Next.jsの_app.js(tsx)

_app.js(tsx)とは

公式より

Next.jsはページの初期化にApp Componentを利用している。

ユーザーはApp Componentをoverrideすることで下記のような制御することが出来る。

  • ページ間のレイアウトを共通化
  • ページ間の状態(state)を維持
  • componentDidCatchを利用してエラーハンドリングをカスタマイズ
  • Global CSSを利用してページ間のスタイルを統一

全ページで共通な挙動を記載する場所。

 

使い方

チュートリアルを終わらせたばかりのため、現状はGlobalなCSSを追加する辺りしか用途がない。。。

今後Reduxを導入したり、エラーハンドリングする際に使い方に関しては追記していきたいと思っています。。。

 

※Redux

Reduxを利用する際は_app.js内でProviderを指定する。

【参考にしたサイト】

https://nextjs.org/docs/advanced-features/custom-app