Next.jsの_app.js(tsx)

Next.js SSR programming _app.js _app.tsx Redux

_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

【Next.js】Tutorialをやってみた

Next.js Vercel programming SSR

最近興味のあるNext.jsを触ってみた感想を書いてみます。

ひとまず、入門編としてチュートリアルをやってみた所感などなど。

実施したチュートリアルは公式のものです。

nextjs.org

背景

  • Reactは触ったことあるけど、SSRなNext.jsは触ったことがないのでやってみたい
  • 自作のブログを作ってみようと考えているので、サーバー側の言語を模索中

所感

  • ページのルーティングがフォルダ、ファイル構成で自動でやってくれるため、わかりやすい
  • APIのエンドポイントも指定できるので、サーバーアプリを簡単に作成することが可能
  • Vercelと組み合わせればdeployや効率的な開発ができそう
  • Vercel、GitHubの組み合わせも良さそうだけど、クラウドサービス使う時とか認証情報伏せたいけどprivateで登録するしかない？←要調査

 

各機能などについては別途ブログに起こそうかな。