公式
Next.js by Vercel – The React Frameworkhttps://nextjs.org
インストール
動作要件
Node 10.13以上
Windows, Mac, Linux
Macで動作確認を実施済み
アプリを作成
yarn create next-app
数秒以内にNext.jsアプリを作成することができる
Next.js CLI
ビルド
yarn next build
最適化された本番ビルドを生成する
First Load JS という項目が表示され、ページにアクセスした際にダウンロードされるアセットのサイズが表示される
First Load JSは色分けされ、緑、黄色、赤色で表示される
パフォーマンスの高い緑を目指す
開発
yarn next dev
ホットリロード、エラーレポートなどの機能を有した開発モードを立ち上げる
デフォルトで、http://localhost:3000 で起動する
以下のように利用ポートを変更することもできる
yarn next dev -p 4000
本番
yarn next start
アプリケーションを本番モードで起動するyarn next build を行っておく必要がある
テレメトリ
Next.js は、匿名の利用情報データを収集している
収集している内容
・どのnext cli コマンドが実行されたか
・Next.js のバージョン
・マシン情報
・Next.js プラグイン
・next build の時間とサイズ
テレメトリオプトアウト方法
NEXT_TELEMETRY_DISABLED=1 の環境変数を設定するか、yarn next telemetry disable を実行するyarn next telemetry status で状態を確認し、yarn next telemetry enable で有効化する
ページ
Next.js では、.js, .jsx, .ts, .tsx のファイルでエクスポートされたReact コンポーネントをpages ディレクトリに設置する
ファイル名で、URLルートが関連づけられる
例えば、pages/about.js を作成した場合、/about のURLパスが対応する形になる
pages/posts/[id].js を作成した場合、/posts/1、/posts/2 などが対応する
レンダリング
デフォルトでは、Next.js は全てのページを事前にレンダリングする
事前レンダリングにより、パフォーマンスとSEOが向上する
生成されたHTMLは、ブラウザに読み込まれると、関連づけられたJavaScriptコードが実行され、ページが完全にインタラクティブになる
このプロセスをhydration (水和反応) という
事前レンダリングの形式
Next.js のレンダリングには、2種類ある
Static Generation (静的生成)：HTMLはビルド時に生成され、リクエストごとに再利用される
Server-Side Rendering (サーバレンダリング)：HTMLはリクエストごとに生成される
パフォーマンス上の理由から、静的生成が推奨される
静的生成
データなしの静的生成
デフォルトでは、Next.js はデータをフェッチせずに静的生成を使用してページを事前レンダリングする
function About() {
return <div>About</div>
}
export default About
この場合、Next.js はビルド時にページごとに1つのHTMLファイルを生成する
データを使用した静的生成
2つのパターンが存在する
ページのコンテンツが外部データに依存している場合→getStaticPropsを使用
ページのパスが外部データに依存している場合→getStaticPathsやgetStaticPropsを使用