【JavaScript】Next.jsとは?具体的な機能やReactとの違いなどを徹底的に調べてみた

【JavaScript】Next.jsとは?具体的な機能やReactとの違いなどを徹底的に調べてみた

公開: 更新:

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のインストール方法は下記の記事でも紹介しているので参考にしてみて下さい。

【大苦戦】AIツールで1からWebサービスを作ってみる【第二弾】
【大苦戦】AIツールで1からWebサービスを作ってみる【第二弾】

インストール後は下記の手順でプロジェクトを作成します

プロジェクト作成

以下のコマンドを実行して、Next.jsのプロジェクトを作成します。

【サンプルコード】
npx create-next-app@latest next-app

開発サーバーの起動

プロジェクトフォルダに移動し、開発サーバーを起動します。

【サンプルコード】
cd next-app
npm run dev

ブラウザで確認

サーバーが起動したら以下のURLにアクセスしてください。

【サンプルコード】
http://localhost:3000

上記の手順でNext.jsの初期設定が完了です。

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する