跳至内容
文档错误解决 Next.js 中“App Container 已弃用”错误

解决 Next.js 中“App Container 已弃用”错误

本文档指导开发者如何通过更新其自定义 App 组件来解决 Next.js 中的“App Container 已弃用”错误。

错误发生的原因

“App Container 已弃用”错误通常发生在您在自定义的 <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> 组件。