| | --- |
| | title: Addressing "App Container Deprecated" Error in Next.js |
| | description: This document guides developers on how to resolve the "App Container Deprecated" error in Next.js by updating their custom App component. |
| | --- |
| |
|
| | |
| |
|
| | The "App Container Deprecated" error usually occurs when you are using the `<Container>` component in your custom `<App>` (`pages/_app.js`). Prior to version `9.0.4` of Next.js, the `<Container>` component was used to handle scrolling to hashes. |
| |
|
| | From version `9.0.4` onwards, this functionality was moved up the component tree, rendering the `<Container>` component unnecessary in your custom `<App>`. |
| |
|
| | |
| |
|
| | To resolve this issue, you need to remove the `<Container>` component from your custom `<App>` (`pages/_app.js`). |
| |
|
| | **Before** |
| |
|
| | ```jsx filename="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 |
| | ``` |
| |
|
| | **After** |
| |
|
| | ```jsx filename="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 |
| | ``` |
| |
|
| | After making this change, your custom `<App>` should work as expected without the `<Container>` component. |
| |
|
| | |
| |
|
| | - [Custom App](/docs/pages/building-your-application/routing/custom-app) |
| |
|