MENU
  1. ホーム
  2. React
  3. Next.jsで簡単に始める！Reactアプリの静的サイト生成入門

Next.jsで簡単に始める！Reactアプリの静的サイト生成入門

React

Reactを利用したウェブアプリケーション開発において、パフォーマンスの向上やSEO最適化が求められる場面は少なくありません。Next.jsは、これらの課題を解決するためのフレームワークとして注目を集めています。本記事では、Next.jsの静的サイト生成（SSG）の基本を学び、Reactアプリケーションを効率的に構築する方法を解説します。静的サイト生成を活用することで、高速で安定したウェブサイトを簡単に展開する手法を習得しましょう。

目次

Next.jsの概要

Next.jsは、Reactベースのフレームワークであり、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、多様なレンダリング手法を提供します。このフレームワークは、Reactの柔軟性を保ちながら、ウェブサイトのパフォーマンスやSEOを大幅に改善するために設計されています。

Next.jsの主な特徴

  • 静的サイト生成（SSG）：ビルド時にHTMLを生成し、最適化された静的なページを提供。
  • サーバーサイドレンダリング（SSR）：リクエスト時にHTMLを生成し、動的なコンテンツに対応。
  • APIルートのサポート：バックエンドAPIを簡単に統合可能。
  • 画像最適化機能：画像の自動最適化でページの読み込み速度を向上。

静的サイト生成を選択する理由

静的サイト生成を利用すると、以下のような利点が得られます：

  1. SEOの向上：HTMLがビルド時に生成されるため、クローラーによるインデックスが容易になります。
  2. パフォーマンスの向上：事前に生成されたHTMLを直接配信するため、読み込み時間が短縮されます。
  3. 運用コストの削減：静的ファイルのみを配信するため、ホスティング費用が低く抑えられます。

Next.jsは、これらの機能をシンプルに実現するためのツールとして、開発者の支持を集めています。

静的サイト生成のメリット

静的サイト生成（SSG）は、ウェブアプリケーションのパフォーマンスや運用効率を向上させるために強力な手段です。Next.jsを使った静的サイト生成には、以下のような具体的なメリットがあります。

1. パフォーマンスの向上

静的サイトは事前に生成されたHTMLファイルを配信するため、サーバー側での処理負荷が軽減され、ページの読み込み速度が向上します。ユーザーにとって快適なブラウジング体験を提供できるのは大きな利点です。

2. SEOの最適化

静的HTMLが直接生成されることで、検索エンジンのクローラーが正確にサイトの内容を認識できるようになります。これにより、検索エンジンのランキングが向上し、より多くのユーザーを引き付けることが可能です。

3. 運用コストの削減

静的サイトはサーバー側の動的な処理を必要としないため、クラウドホスティングやCDN（コンテンツ配信ネットワーク）を使用した場合でも運用コストを大幅に削減できます。

4. セキュリティの向上

静的サイトではサーバーサイドの処理が不要であるため、サイバー攻撃のリスクが低減します。セキュリティの確保がより簡単です。

5. スケーラビリティ

静的ファイルはCDNを利用して簡単に配信できるため、トラフィックの急増にも柔軟に対応できます。

静的サイト生成は、シンプルで効果的な方法でウェブサイトの性能と管理効率を向上させるツールとして、多くのプロジェクトで採用されています。

環境構築

Next.jsを使った静的サイト生成を始めるには、開発環境の準備が必要です。以下の手順を参考に、スムーズにプロジェクトを開始しましょう。

1. Node.jsのインストール

Next.jsを動作させるために、Node.jsのインストールが必要です。公式サイト（Node.js公式サイト）から最新版のLTS（長期サポート版）をダウンロードし、インストールしてください。

インストール確認

インストール後、以下のコマンドでバージョンを確認できます。

node -v
npm -v

2. Next.jsプロジェクトの作成

Next.jsの新しいプロジェクトを作成するには、公式提供のコマンドラインツールを使用します。

プロジェクトの作成

ターミナルで以下のコマンドを実行します。

npx create-next-app@latest my-next-app

ここでmy-next-appはプロジェクト名です。任意の名前を指定できます。

プロジェクトディレクトリに移動

作成したディレクトリに移動します。

cd my-next-app

3. 開発サーバーの起動

開発サーバーを起動して、Next.jsアプリケーションが正しく動作しているか確認します。

起動コマンド

以下のコマンドを実行します。

npm run dev

その後、ブラウザでhttp://localhost:3000にアクセスすると、Next.jsのウェルカムページが表示されます。

4. 必要なエディタとツールの準備

  • コードエディタ：Visual Studio Codeを推奨します。
  • 拡張機能：ESLintやPrettierをインストールして、コードの整形と品質を向上させましょう。

5. 必要な依存パッケージのインストール

プロジェクトに必要なライブラリをインストールします。

npm install react react-dom next

これでNext.jsを使った静的サイト生成の準備は完了です。次は、実際に静的サイト生成の仕組みを理解しながら、具体的なページを作成していきましょう。

静的サイト生成の基礎

Next.jsでは、静的サイト生成（Static Site Generation: SSG）を利用して、高速かつSEOに強いウェブサイトを構築できます。ここでは、Next.jsで基本的な静的サイトを生成する仕組みとその方法を解説します。

1. 静的サイト生成の仕組み

静的サイト生成は、ビルド時にHTMLファイルを生成し、これを静的ファイルとして配信する方式です。Next.jsでは、ビルドプロセス中にデータを取得してHTMLを生成し、それを効率的に配信します。

2. 基本的なページ作成

Next.jsでは、pagesディレクトリ内にファイルを作成することで、新しいページを簡単に追加できます。

例: 基本的なページ

pages/index.jsに以下のコードを記述します。

export default function Home() {
  return (
    <div>
      <h1>静的サイト生成の基本</h1>
      <p>Next.jsを使用した静的サイト生成の基本例です。</p>
    </div>
  );
}

これで、http://localhost:3000にアクセスすると、作成したページが表示されます。

3. getStaticPropsの利用

Next.jsでは、getStaticPropsという特別な関数を使って、ビルド時に必要なデータを取得できます。

例: getStaticPropsを使用したページ

pages/example.jsに以下のコードを記述します。

export async function getStaticProps() {
  const data = { message: "静的サイト生成の例です。" };
  return {
    props: { data },
  };
}

export default function Example({ data }) {
  return (
    <div>
      <h1>静的サイト生成の例</h1>
      <p>{data.message}</p>
    </div>
  );
}

これにより、http://localhost:3000/exampleで静的に生成されたページが表示されます。

4. ビルドコマンドの実行

Next.jsで静的サイトを生成するには、以下のコマンドを実行します。

npm run build

これにより、outディレクトリに静的ファイルが生成されます。

5. HTMLファイルの確認

ビルド後のHTMLは、最適化された状態でoutディレクトリに格納されています。このHTMLファイルを任意の静的ホスティングサービスで配信できます。

まとめ

基本的な静的サイト生成では、pagesディレクトリにReactコンポーネントを作成するだけで、ページを簡単に作成できます。また、getStaticPropsを活用することで、ビルド時にデータを取得してHTMLに反映できます。この仕組みを理解することで、Next.jsを使った静的サイトの開発がスムーズに進みます。

getStaticPropsの活用方法

Next.jsでは、静的サイト生成の際にデータを取得してページに埋め込むために、getStaticPropsという特別な関数を使用します。この関数を適切に活用することで、動的なデータを含む静的ページを効率よく生成できます。

1. getStaticPropsの基本

getStaticPropsは、ビルド時に実行され、ページに必要なデータを取得してコンポーネントのpropsとして渡します。これにより、事前にレンダリングされた静的HTMLが生成されます。

基本構文

以下のように、exportを付けて関数を定義します。

export async function getStaticProps() {
  // データ取得処理
  const data = { title: "静的生成の例", content: "これはgetStaticPropsの使用例です。" };

  return {
    props: { data }, // propsとして渡す
  };
}

2. データを利用したページの例

以下は、getStaticPropsを使用したページのコード例です。

コード例

export async function getStaticProps() {
  const post = { title: "Next.js入門", content: "Next.jsを使った静的サイト生成の基本を学びましょう。" };

  return {
    props: { post },
  };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

このコードをpages/blog.jsとして保存すると、http://localhost:3000/blogに静的なページが生成されます。

3. 外部APIからのデータ取得

getStaticPropsは、外部APIやデータベースからデータを取得する場合にも便利です。

コード例

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return {
    props: { post },
  };
}

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

このコードでは、JSONPlaceholderというサンプルAPIからデータを取得し、静的ページに埋め込んでいます。

4. 再生成の設定（ISR）

データが頻繁に更新される場合は、静的サイトの再生成（Incremental Static Regeneration: ISR）を設定できます。

コード例

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return {
    props: { post },
    revalidate: 10, // 10秒ごとにページを再生成
  };
}

revalidateキーを指定すると、ビルド後でも一定間隔でページを再生成できます。

5. 活用ポイント

  • 静的ページに動的なデータを埋め込みたい場合に最適。
  • APIやデータベースの情報を利用する際にも簡単に統合可能。
  • 再生成を活用して最新のデータを維持可能。

getStaticPropsを活用することで、データ駆動型の静的サイトを簡単に構築できるようになります。これにより、パフォーマンスの高いReactアプリケーションの開発が可能になります。

動的ルーティングの実現

Next.jsでは、動的ルーティングを活用して、異なるデータに基づく複数の静的ページを効率よく生成できます。これにより、ブログや商品ページなどの動的な構造を簡単に実現できます。

1. 動的ルーティングとは

動的ルーティングでは、URLの一部をパラメーターとして扱い、それに応じたページを生成します。Next.jsでは、ファイル名に角括弧（[param]）を使用して動的ルートを定義します。

2. 動的ルーティングの基本

以下は、pages/post/[id].jsとしてファイルを作成する例です。このファイルは、/post/1や/post/2といった動的なルートを処理します。

コード例

import { useRouter } from 'next/router';

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  // 動的ルートを生成
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

3. コードのポイント解説

getStaticPaths

  • getStaticPaths関数では、生成するすべての動的ルートを定義します。
  • 各ルートをparamsオブジェクトの形式で指定します。

getStaticProps

  • 動的ルートで取得したparamsを利用して、ページごとに異なるデータを取得します。
  • 取得したデータはコンポーネントのpropsとして渡されます。

4. 動的ルーティングのデプロイ後の動作

上記の例では、ビルド時にすべての動的ルートが静的ファイルとして生成されます。たとえば、/post/1や/post/2などのページがHTMLファイルとして生成されます。

5. 再生成の設定（ISR）との併用

データが頻繁に変わる場合、ISR（Incremental Static Regeneration）を併用することで、効率よく最新のページを提供できます。

再生成のコード例

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 10, // 10秒ごとに再生成
  };
}

6. 活用例

  • ブログ記事のページ：記事ごとに異なる内容を表示。
  • 商品詳細ページ：商品IDをパラメーターにして詳細ページを生成。
  • ユーザープロファイル：動的ルートを使用して各ユーザーのプロフィールページを作成。

動的ルーティングを活用することで、柔軟で拡張性のある静的サイトを構築できるようになります。これにより、効率的に多くのページを生成し、優れたユーザー体験を提供できます。

デプロイ方法

Next.jsで作成した静的サイトをデプロイするには、静的サイト生成機能を活用して生成されたHTMLファイルをホスティングサービスにアップロードします。ここでは、特に人気のあるホスティングサービスVercelを使用した簡単なデプロイ方法を紹介します。

1. Vercelの概要

Vercelは、Next.jsの開発元であるVercel社が提供するホスティングプラットフォームです。Next.jsとの親和性が高く、静的サイトやSSR（サーバーサイドレンダリング）を簡単にデプロイできます。

2. Vercelアカウントの作成

まず、Vercel公式サイトにアクセスしてアカウントを作成します。

  • GitHub、GitLab、またはBitbucketのアカウントを使用してログインできます。

3. Next.jsプロジェクトのデプロイ

Vercelを使ったデプロイ手順を以下に示します。

手順1: プロジェクトのGitリポジトリ化

プロジェクトをGitで管理している場合、次の手順に進んでください。まだの場合は以下を実行します。

git init
git add .
git commit -m "Initial commit"

手順2: GitHubリポジトリの作成

GitHubで新しいリポジトリを作成し、プロジェクトをリモートリポジトリにプッシュします。

git remote add origin <リポジトリURL>
git branch -M main
git push -u origin main

手順3: Vercelでプロジェクトをインポート

  1. Vercelのダッシュボードにアクセスし、「New Project」をクリックします。
  2. GitHubリポジトリを選択し、プロジェクトをインポートします。
  3. デプロイ設定画面で特別な設定がなければそのまま「Deploy」をクリックします。

手順4: デプロイ完了の確認

デプロイが成功すると、Vercelが提供するURLが表示されます。このURLをクリックすると、デプロイ済みのサイトを確認できます。

4. 静的ファイルを使ったデプロイ

Next.jsで静的ファイルを生成し、他のホスティングサービスを利用する方法もあります。

手順1: 静的ファイルの生成

次のコマンドを実行して静的ファイルを生成します。

npm run build
npm run export

これにより、outディレクトリに静的ファイルが生成されます。

手順2: 静的ホスティングサービスへのアップロード

  • NetlifyやAWS S3などの静的ホスティングサービスを使用してoutディレクトリのファイルをアップロードします。

5. デプロイ後の注意点

  • 再デプロイ：デプロイ後にコードを更新した場合は、再度ビルドしてデプロイする必要があります。
  • 環境変数：APIキーや機密情報はVercelの環境変数設定を利用して安全に管理してください。

6. まとめ

Vercelを利用すると、Next.jsアプリを簡単にデプロイできます。また、静的サイトとしてエクスポートしたファイルを他のホスティングサービスにアップロードすることも可能です。これにより、プロジェクトのデプロイが迅速かつ効率的に行えるようになります。

応用例

Next.jsの静的サイト生成（SSG）は、様々なプロジェクトに応用できる柔軟性を持っています。ここでは、静的サイト生成を活用したリアルプロジェクトの例と便利なツール・ライブラリを紹介します。

1. ブログサイトの構築

ブログは静的サイト生成を利用する典型的な例です。記事データをMarkdownやCMSから取得して静的HTMLとして生成し、高速でSEOに強いサイトを構築できます。

ブログ構築のコード例

以下のように、Markdownファイルから記事データを取得し、静的にページを生成します。

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export async function getStaticProps() {
  const files = fs.readdirSync(path.join('posts'));

  const posts = files.map((filename) => {
    const markdownWithMeta = fs.readFileSync(path.join('posts', filename), 'utf-8');
    const { data } = matter(markdownWithMeta);
    return { ...data, slug: filename.replace('.md', '') };
  });

  return {
    props: { posts },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>ブログ記事一覧</h1>
      {posts.map((post) => (
        <div key={post.slug}>
          <h2>{post.title}</h2>
          <p>{post.date}</p>
        </div>
      ))}
    </div>
  );
}

2. 商品カタログサイト

商品カタログサイトでは、APIを使用して商品データを取得し、各商品の詳細ページを静的に生成できます。これにより、商品数が多い場合でも高速でスケーラブルなサイトが構築できます。

例: 商品詳細ページ

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return { props: { product } };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>価格: {product.price}円</p>
    </div>
  );
}

3. ポートフォリオサイト

デザイナーや開発者が自分の作品を展示するポートフォリオサイトにも静的サイト生成が適しています。ビルド時に作品データを埋め込み、軽量で高速なサイトを構築できます。

4. 多言語対応サイト

Next.jsの静的サイト生成は、多言語対応にも適しています。next-i18nextライブラリを使用することで、各言語のHTMLを事前に生成し、グローバル展開が簡単に行えます。

5. 静的サイト生成を支えるツール

  • ContentfulやSanity：ヘッドレスCMSを利用してコンテンツを管理。
  • GraphQL：Apollo Clientを利用して効率的にデータを取得。
  • Tailwind CSS：軽量でカスタマイズ性の高いCSSフレームワークでスタイルを作成。

6. 高度な静的サイト生成

  • ISR（Incremental Static Regeneration）：データが頻繁に更新される場合にも対応可能。
  • プレビューモード：コンテンツ編集者が変更をリアルタイムで確認できる機能。

まとめ

Next.jsの静的サイト生成は、ブログ、商品カタログ、多言語対応など幅広いプロジェクトに応用可能です。また、関連するツールを活用することで、効率的かつスケーラブルな開発が実現できます。これにより、より多様なプロジェクトに対応できる柔軟なウェブサイトを構築できます。

まとめ

本記事では、Next.jsを利用したReactアプリケーションの静的サイト生成について、基本から応用例までを解説しました。静的サイト生成のメリットとして、SEO最適化、高速なページ表示、コスト削減が挙げられます。getStaticPropsや動的ルーティングの活用により、柔軟かつスケーラブルなサイト構築が可能です。

さらに、Vercelを使ったデプロイや、多言語対応、ブログや商品カタログサイトの構築など、実際のプロジェクトでの活用例もご紹介しました。Next.jsの静的サイト生成を活用することで、高性能なウェブアプリケーションを効率的に構築できます。

これを機に、Next.jsを用いたウェブ開発に挑戦し、高品質なアプリケーションを実現してください。

React
React Next.js 静的サイト生成

コメント

コメントする

目次