跳至內容
文件錯誤解決 Next.js 中「應用程式容器已棄用」的錯誤

解決 Next.js 中「應用程式容器已棄用」的錯誤

本文檔指導開發人員如何透過更新自訂應用程式元件來解決 Next.js 中的「應用程式容器已棄用」錯誤。

錯誤發生的原因

「應用程式容器已棄用」錯誤通常發生在您於自訂的 <App> (pages/_app.js) 中使用 <Container> 元件時。在 Next.js 9.0.4 版之前，<Container> 元件是用於處理捲動到雜湊的功能。

從 9.0.4 版開始，此功能已移至元件樹的更上層，因此在自訂的 <App> 中不再需要 <Container> 元件。

可能的解決方法

要解決此問題，您需要從自訂的 <App> (pages/_app.js) 中移除 <Container> 元件。

修改前

pages/_app.js
import React from 'react'
import App, { Container } from 'next/app'
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}
 
export default MyApp

修改後

pages/_app.js
import React from 'react'
import App from 'next/app'
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}
 
export default MyApp

進行此變更後，您的自訂 <App> 應該可以正常運作，無需 <Container> 元件。