AIツールを用いてWebサービスを作成する本企画。これまでにChatGPTを用いた要件定義から利用環境の選定、環境構築の実施と作業を進めてきました。
前回の記事「Next.jsのインストール方法とSupabaseの初期設定まで」ではフロントエンドの構築としてNext.jsを採用し、インストール方法まで解説しています。
しかしNext.jsの構造やルールを理解しないまま使うと、エラーが発生したときの対応が難しくなるのが懸念点です。そこで今回はNext.jsの理解を深めるために、具体的な機能やReactとの違いなどについて調べた結果を共有します。
Next.jsとは
Next.jsとはプログラミング言語「JavaScript」のフレームワークで、読み方は「ネクストジェイエス」です。ReactというJavaScriptのライブラリを拡張しているため、Next.jsを使うことでReactの基本機能もそのまま使用できます。
Next.js = 「React + 便利な機能」
のように考えると分かりやすいです。
Next.jsはVercelという企業によって開発・メンテナンスされており、最新のフロントエンド開発に適した強力なツールとして人気を集めています。
Next.jsとReactの違い
Next.jsがReactを拡張したフレームワークということもあり、下記のような違いがあります。
項目 | React | Next.js |
---|---|---|
ルーティング | 「react-router-dom」が必要 | 「pages/」フォルダのファイル構成で自動ルーティング |
ページ遷移の方法 | 「react-router-dom」のLinkタグを使用 | 「next/link」を使用(高速な遷移) |
データ取得 | クライアントサイドレンダリング(CSR) | 「SSR / SSG / ISR / CSR」すべて対応 |
SSR | なし(自分で設定が必要) | 「getServerSideProps()」で簡単に実装可能 |
SSG | なし | 「getStaticProps()」で事前にページを生成 |
ISR | なし | 「revalidate」オプションで静的ページを動的に更新 |
バックエンド API | 別途Express.jsなどが必要 | 「pages/api/」内にAPIを作成できる |
画像最適化 | 最適化なし | 「next/image」で自動最適化(圧縮・遅延読み込み) |
SEO対策 | 「react-helmet」で手動設定 | 「next/head」を使用し、SSR/SSG による SEO 効果あり |
環境変数の管理 | 「.env」を使用 | 「.env.local」を使い簡単に設定可能 |
ビルドとデプロイ | 自分で設定(Vite, Webpack など) | 「next build」で最適化、Vercelで簡単デプロイ |
ReactはフロントエンドのUI開発に特化したライブラリであり、シングルページアプリケーション(SPA)に向いていますが、ルーティングやデータ取得の仕組みは自分で用意する必要があります。
対してNext.jsはファイルベースのルーティングやAPIルート、画像最適化など機能性に優れいています。双方の違いを理解したうえで、作成するWebアプリに合わせて使い分けることが大切です。
Next.jsで利用できる機能
ファイルベースのルーティング
ルーティング(Routing)とはユーザーがアクセスしたURLに応じて、適切なページを表示する仕組みのことです。Next.jsではpages/
フォルダの中にファイルを作るだけで、自動でルートが設定されます。
追加でルーティングの設定を行う必要がなく、URLに対応したページを直感的に作成可能。これにより開発スピードが向上し、コードの管理が簡単になります。
【サンプルコード】
export default function About() {
return <p>test</p> ;
}
たとえばpages/about.js
を作成するだけで /about
にアクセス可能になります。
サーバーサイドレンダリング(SSR)
サーバーサイドレンダリングとはユーザーがページにアクセスするたびに、サーバー側でHTMLを生成して返す仕組みです。最新のデータを常に表示できるため、頻繁に更新されるデータを扱うサイトに適しています。
また、検索エンジンに最適化(SEO)されるため、検索結果の上位に表示されやすくなります。
静的サイト生成(SSG)
ビルド時にデータを取得し、HTMLを事前に生成しておく方法です。動的なデータ取得を必要としないページ(ブログ記事や製品ページなど)に適しており、ロード時間を大幅に短縮できます。
事前に生成されたHTMLはCDNにキャッシュされるため、パフォーマンスが向上します。
増分静的再生成(ISR)
静的サイト生成(SSG)と動的な更新を組み合わせた仕組みです。一定時間ごとに新しいデータを取得し、ページを更新できます。
これにより最新の情報を提供しつつ、静的サイトのメリット(高速な読み込み)を維持できます。
APIルート
APIルート(API Routes)とはサーバーサイドでデータを処理し、フロントエンドからリクエストを受け取るための仕組みです。Next.jsでは pages/api/
ディレクトリにファイルを作成することで、簡単にAPIを提供できます。
これによりバックエンドを別途構築することなく、サーバー側の処理を簡単に実装できます。
【サンプルコード】
export default function handler(req, res) {
res.status(200).json({ message: "Hello from API!" });
}
このAPIにアクセスすると {"message": "Hello from API!"}
が返ります。フロントエンドとバックエンドを統合しやすくなり、開発がスムーズになります。
画像最適化(next/image)
Next.jsの next/image
を使用すると画像を最適化し、パフォーマンスを向上させることが可能です。自動で適切なサイズの画像を提供し、WebP 変換や遅延読み込み(Lazy Loading)を行います。
この機能を活用することでページの読み込み速度が向上し、ユーザー体験の改善につながります。
Next.js でサービスを作る際に最低限抑えておくべき機能
ルーティング(Routing)
Next.jsでは「pages/」フォルダ内にファイルを作成するだけで、対応するURLが自動的に設定されます。追加のルーティング設定が不要で、直感的にページを管理できます。
【サンプルコード】
/pages/index.js → /
/pages/about.js → /about
/pages/blog/[id].js → /blog/123
これによりReactで「react-router-dom」を設定する手間が省け、シンプルにルーティングを管理できます。
データ取得の基本(SSR・SSG)
Next.jsではデータ取得の方法として、サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)を適切に使い分けることが重要です。SSRは毎回最新のデータを取得し、SSGはビルド時にデータを取得してページを高速化します。
【サンプルコード】
// SSR(リクエストごとにデータを取得)
export async function getServerSideProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
SSRはリアルタイム性が必要なページにぴったりです。一方で事前にデータを取得し、静的なHTMLとして提供するSSGも活用できます。
【サンプルコード】
// SSG(ビルド時にデータを取得)
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return { props: { data } };
}
SSGは頻繁に更新しないコンテンツ(ブログ記事や製品ページなど)に適しています。
APIルート
Next.jsでは「pages/api/」ディレクトリ内にファイルを作るだけで、簡単にAPIを作成できるのが特徴。バックエンドを別途構築する必要がなく、フロントエンドと統合しやすくなります。
【サンプルコード】
// API ルート(/api/hello)
export default function handler(req, res) {
res.status(200).json({ message: "Hello from API!" });
}
APIルートを利用すればフロントエンドから「fetch("/api/hello")」で簡単にデータを取得できます。
環境変数の管理
API キーや機密情報は「.env.local」に保存し、コード内で「process.env」を使ってアクセスします。環境変数を使うことでAPIエンドポイントや、設定値を外部から管理できます。
【サンプルコード】
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
クライアント側で環境変数を利用する場合は「NEXT_PUBLIC_」プレフィックスをつける必要があります。
【サンプルコード】
// 環境変数の使用
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
環境変数を利用すると、開発環境・本番環境で異なる設定を簡単に切り替えらえるのがメリットです。
デプロイ(Vercel)
Next.jsはVercelに最適化されており、簡単にデプロイできるのが魅力。GitHub連携を行うことで自動デプロイも可能です。
【サンプルコード】
# Vercel にデプロイ
npm i -g vercel
vercel
Vercel を使えば「git push」するだけで本番環境にデプロイできるため、開発効率が向上します。
Next.jsのプロジェクト作成と起動
Next.jsを利用するには、事前にNode.jsをインストールする必要があります。Node.jsのインストール方法は下記の記事でも紹介しているので参考にしてみて下さい。

インストール後は下記の手順でプロジェクトを作成します
プロジェクト作成
以下のコマンドを実行して、Next.jsのプロジェクトを作成します。
【サンプルコード】
npx create-next-app@latest next-app
開発サーバーの起動
プロジェクトフォルダに移動し、開発サーバーを起動します。
【サンプルコード】
cd next-app
npm run dev
ブラウザで確認
サーバーが起動したら以下のURLにアクセスしてください。
【サンプルコード】
http://localhost:3000
上記の手順でNext.jsの初期設定が完了です。