Next.js初心者必見！ゼロから学べる実践入門

はじめに

Next.jsは、Reactをベースにした人気のフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を提供しています。

ページとルーティング

Next.jsでは、pagesディレクトリ内のファイルが自動的にルートとなります。

pages/
  index.js
  about.js

pages/index.jsはルートURL（/）に対応します。
pages/about.jsは/aboutに対応します。

静的サイト生成（SSG）

ビルド時にHTMLを生成します。
getStaticPropsを使ってデータをフェッチし、ページを静的に生成します。
ビルド(build):ソースコードやその他のリソースを最終的なプロダクトに変換するプロセス
getStaticProps:ページコンポーネントのエクスポートとして定義される非同期関数
リクエスト時にサーバーがHTMLを生成する必要がなくなります。

サーバーサイドレンダリング（SSR）

リクエスト時にHTMLを生成します。
getServerSidePropsを使ってリクエスト時にデータをフェッチし、サーバーサイドでレンダリングします。
getServerSideProps: ページコンポーネントのエクスポートとして定義される非同期関数
デプロイメント後のリクエスト時にデータフェッチが行われます。

APIルート

pages/apiディレクトリ内にAPIエンドポイントを作成できます。これにより、フロントエンドとバックエンドのロジックを同じプロジェクト内で管理できます。

基本的なディレクトリ構成

my-nextjs-app/
├── public/
│   ├── assets/        # 画像やフォントなどの静的ファイル
│   └── favicon.ico    # サイトのファビコン
├── src/
│   ├── components/   # 再利用可能なReactコンポーネント
│   ├── pages/        # ページコンポーネント（ルーティングを自動管理）
│   │   ├── api/      # APIルート
│   │   ├── _app.js   # カスタムAppコンポーネント
│   │   └── _document.js # カスタムDocumentコンポーネント
│   ├── styles/       # グローバルなスタイルやCSSモジュール
│   ├── utils/        # ユーティリティ関数やカスタムフック
│   └── hooks/        # カスタムReactフック
├── .gitignore        # Gitで無視するファイルやディレクトリ
├── next.config.js    # Next.jsの設定ファイル
├── package.json      # プロジェクトの依存関係とスクリプト
└── README.md         # プロジェクトの説明

まとめ

Next.jsは、Reactの強力な機能に加えて、サーバーサイドレンダリングや静的サイト生成などの高度な機能を提供し、モダンなWebアプリケーションの開発をサポートします