Zenn
🐥

Next.jsのSSG（静的サイト生成）でWebサイトを作成する

に公開
Next.js
React
TypeScript
frontend
SSG
tech

Next.jsのSSG（静的サイト生成）でWebサイトを作成する

はじめに

Next.jsは、Reactをベースにしたフレームワークであり、静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）、ISR（インクリメンタル・スタティック・リジェネレーション）を簡単に実装できます。本記事では、最新のApp Router（appディレクトリ）を利用してSSGを実装する方法を解説します。

Next.jsのSSGとは？

SSG（Static Site Generation）は、ビルド時にHTMLを生成し、CDN（コンテンツデリバリーネットワーク）を活用して配信する仕組みです。

SSGのメリット

  • パフォーマンス向上：事前に生成したHTMLを配信するため、読み込み速度が速い
  • SEO対策に有利：検索エンジンがHTMLを直接読み取れる
  • コスト削減：動的なサーバーレンダリングが不要なため、サーバー負荷が少ない

Next.jsのセットアップ

まず、Next.jsのプロジェクトを作成します。

npx create-next-app@latest my-static-site --typescript
cd my-static-site
npm run dev

このコマンドを実行すると、http://localhost:3000 で開発サーバーが立ち上がります。

静的ページを作成する

Next.jsでは、appディレクトリを使用するのが推奨されています。
例えば、app/about/page.tsx を作成すると、/about にアクセスできるようになります。

app/about/page.tsx の作成

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>このサイトはNext.jsのSSGを使用しています。</p>
    </div>
  );
}

データ取得を伴う静的ページ

fetchを使用して、ビルド時に外部データを取得し、ページを静的に生成できます。

app/posts/page.tsx の作成

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

export default async function Posts() {
  const posts = await getPosts();
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

動的ルーティングを用いたSSG

App Routerでは、generateStaticParamsを使用して動的なルートを静的に生成できます。

app/posts/[id]/page.tsx の作成

async function getPost(id: string) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
}

export async function generateStaticParams() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return posts.map((post: any) => ({ id: post.id.toString() }));
}

export default async function Post({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

この設定により、/posts/1, /posts/2, ... のようなURLが静的に生成されます。

ビルドとデプロイ

Next.jsのSSGサイトを本番環境にデプロイするには、next build コマンドを使用します。

npm run build
npm run start

また、Vercelを使用すると簡単にデプロイできます。

npx vercel

まとめ

Next.jsの最新のApp Routerを活用し、静的サイト生成を行う方法を紹介しました。generateStaticParams を適切に使い、最適なサイトを構築してみましょう！

Discussion