跳到内容
文档错误解决 Next.js 中的 “App Container Deprecated” 错误

解决 Next.js 中的 “App Container Deprecated” 错误

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

为何出现此错误

“App Container Deprecated” 错误通常发生在你正在自定义的 <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> 组件。