Addressing "App Container Deprecated" Error in Next.js

Why This Error Occurred

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>.

Possible Ways to Fix It

To resolve this issue, you need to remove the <Container> component from your custom <App> (pages/_app.js).

Before

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

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.

Useful Links

• Custom App