React 同様にこちらも今更ながら、Next.js の公式チュートリアルを全部終えました。やったことの概要は次の通りです。
- React 概要
- Next.js 概要
- Next.js によるブログ作成
- デプロイ先：https://nextjs-blog-haru52.vercel.app/
- ソースコード：https://github.com/haru52/nextjs-blog
- SSG、SSR、ISR、ルーティング、Head/Image/Link/Script components など Next.js の基本機能を学習
- Vercel へのデプロイ方法を学習
- SEO 概要と Next.js アプリでの SEO 対策方法
- Google の (Core) Web Vitals 概要と Next.js アプリでのパフォーマンス測定および改善方法
- TypeScript 連携
感想
ざっと Next.js を学んだ感想です。
- Next.js は React ベースの Web アプリを作るフレームワーク（React にもフレームワークっぽさはある気がしますが、基本的にはライブラリ扱いが一般的だと思います）
- リソースのロード、レンダリング、コンピュテーション、キャッシングなどそれぞれについて、いつ、どこで、どの粒度で実行するかを制御可能
- ファイル（ディレクトリ）構成と Link component によりマルチページアプリ化可能
- SSR してクライアントに返した HTML は JS（React 周りのコード）のロードが完了するまでインタラクティブではない。この状態のページに JS をロードしてインタラクティブにすることを「ハイドレーション」と呼ぶ
- 基本はページ単位でレンダリング方法（例：SSR、SSG、ISR）を制御
dynamic()関数（API）などを用いることでコンポーネント単位でのロードタイミング、レンダリング方法（SSR するかどうか）の制御も可能- React Server Components も活用するとより細かな制御ができそう（？）
- キャッシング、CDN、エッジコンピューティング、サーバーレス FaaS (Lambda) など、Next.js は多機能でそれらをカバーしてくれる Vercel というデプロイ先は便利（GitHub 連携なども楽）
- しかし、Next.js は OSS とは言えそのメインの開発元は Vercel であり、ベンダーロックイン的なリスクは気になる
