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> コンポーネントを削除する必要があります。

変更前

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

変更後

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> コンポーネントなしで意図したとおりに機能するはずです。

便利なリンク

• カスタムApp