跳到內容
文件錯誤解決 Next.js 中的 "App Container Deprecated" 錯誤

解決 Next.js 中的 "App Container Deprecated" 錯誤

本文檔引導開發人員如何透過更新自訂的 App 元件來解決 Next.js 中的 "App Container Deprecated" 錯誤。

為何會發生此錯誤

當您在自訂的 <App> (pages/_app.js) 中使用 <Container> 元件時，通常會發生 "App Container Deprecated" 錯誤。在 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> 元件。