Next.jsのメモ

Next.jsのメモ(自分用)

・ 静的ルーティング(pagesディレクトリ)


・ 動的ルーティング(file name[id].tsx)


・ クライアントサイドルーティング(<Link>)
クライアントサイドでナビゲーションを行っているため、ブラウザ全体でリロードすること無く、遷移が行われる。 本番環境では<Link>コンポーネントが表示されると、バックグラウンドでリンク先のページのコードをプリフェッチしてくれる。


・ CSS-in-JS


・ プリレンダリング(SSR, SSG)

SSRについて
- アクセス時にサーバー側でHTMLを生成
- リクエストごとに生成される

SSG
- ビルド時にHTMLを生成
- 事前にビルドされる
- CDNを利用するため、SSRより高速

更新頻度が高いページ(SNS等)はSSR、そうでない場合はSSG
ページごとに選択可能
可能な限りSSGを利用すべき


・ 拡張性が高い


・ ホットリロードをサポート


・ コード分割
リクエストしたページのコードだけを読み込み、ほかはバックグラウンドでプリフェッチを行う


・ Dynamic Routers
- [id].tsx

・ SSG getStaticProps
- 開発環境では毎回のリクエストごとに実行される
- 本番環境ではビルド時にのみ実行される
- サーバーサイドでのみ実行される


・ SSG getStaticPaths
- Dynamic Routesを使用する際にも静的なファイルを生成するためのAPI
- 開発環境では毎回のリクエストごとに実行される
- 本番環境ではビルド時にのみ実行される
- サーバーサイドでのみ実行される


・ SSR getServerSideProps
- リクエスト時に実行される
- サーバーサイドでのみ実行される


・ CSR SWR
- データフェッチ用のReactフック
- クライアント側でフェッチする際にはこれを使う

今後追加