コンテンツをスキップ
ドキュメントエラーNext.jsにおける「App Container Deprecated」エラーへの対処

Next.jsにおける「App Container Deprecated」エラーへの対処

このドキュメントでは、カスタムAppコンポーネントを更新することで、Next.jsにおける「App Container Deprecated」エラーを解決する方法を開発者に案内します。

このエラーが発生する理由

「App Container Deprecated」エラーは通常、カスタム``（`pages/_app.js`）で``コンポーネントを使用している場合に発生します。Next.jsのバージョン`9.0.4`より前では、``コンポーネントはハッシュへのスクロールを処理するために使用されていました。

バージョン`9.0.4`以降、この機能はコンポーネントツリーの上位に移動され、カスタム``で``コンポーネントが不要になりました。

解決策

この問題を解決するには、カスタム``（`pages/_app.js`）から``コンポーネントを削除する必要があります。

変更前

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

この変更を行うと、カスタム``は``コンポーネントなしで期待どおりに動作するはずです。