Next.jsを使って動的な機能を持つ静的サイトを構築する方法

世界一わかりやすい！～講義形式で学ぶサイト制作～:第16回

---

1. Next.jsの特徴とは？何ができるのか？

• サーバーサイドレンダリング（SSR）: ページをサーバー側で生成してからクライアントに配信する。これにより、初回読み込みが早く、SEOにも優れているんだ。
• 静的サイトジェネレーション（SSG）: 動的なページでも、事前に静的にHTMLを生成しておける。これにより、ページの表示速度が向上するよ。
• APIルート: Next.jsにはAPIルートがあり、バックエンドの処理を組み込むことができるんだ。例えば、フォームの送信やデータベースの操作も可能。
• ページベースのルーティング: ファイルシステムをベースにして、Reactのページを自動的にルーティングしてくれるよ。pagesディレクトリにファイルを置くだけで新しいページが追加されるんだ。

---

2. Next.jsのインストールとプロジェクト作成方法

ステップ1: Next.jsプロジェクトを作成

まずは、npxを使ってNext.jsのプロジェクトをセットアップするよ。

bashコードをコピーするnpx create-next-app@latest my-next-app
cd my-next-app
npm run dev

• **npx create-next-app**は、Next.jsの公式CLIツールを使ってプロジェクトを生成するためのコマンド。
• **npm run dev**で、開発サーバーを立ち上げて、ローカル環境でサイトを確認できるよ。

---

3. ページベースのルーティングと静的サイト生成

ステップ2: 新しいページの作成

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>これはAboutページです。</p>
    </div>
  );
}

• 説明: pagesディレクトリの中にファイルを作成するだけで、新しいURLパスが自動でルーティングされるんだ。Next.jsでは、コードを書く手間が減り、シンプルにルーティングできるのが特徴だね。

4. 静的サイトジェネレーション（SSG）とサーバーサイドレンダリング（SSR）

4.1 静的サイトジェネレーション（SSG）

SSGは、ビルド時に全ページを静的HTMLとして生成する機能で、特にSEOに強く、ページの読み込みが高速だよ。

// pages/blog/[id].js
export async function getStaticPaths() {
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return { props: { blogId: params.id } };
}

export default function Blog({ blogId }) {
  return <h1>ブログID: {blogId}</h1>;
}

• 説明: getStaticPathsで事前に生成したいページのパスを指定し、getStaticPropsでそのページのデータを渡す。この2つの関数を使って、静的ページを生成できるんだ。

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

SSRは、リクエストが来るたびにサーバー側でHTMLを生成して返す方法だよ。動的なページに向いているんだ。

// pages/dashboard.js
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return { props: { stats: json } };
}

export default function Dashboard({ stats }) {
  return (
    <div>
      <h1>ダッシュボード</h1>
      <p>データ: {stats.value}</p>
    </div>
  );
}

• 説明: getServerSideProps関数はリクエストごとに実行され、サーバー側でHTMLをレンダリングしてからクライアントに送信するよ。これで、リアルタイムにデータを取得してページを表示できるんだ。

---

5. APIルートの利用

ステップ5: APIルートの作成

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'こんにちは、世界！' });
}

• 説明: このAPIルートは、/api/helloというエンドポイントを提供して、GETリクエストに対してJSONデータを返すよ。これを使えば、簡単にAPIを実装できるんだ。

---

6. デプロイの手順

ステップ6: Vercelへのデプロイ

1. Vercelの公式サイトにアクセスしてアカウントを作成。
2. GitHub、GitLab、またはBitbucketからプロジェクトをインポートするオプションが表示されるので、Next.jsプロジェクトのリポジトリを選択。
3. 「Deploy」ボタンをクリックするだけで、Vercelが自動的にビルドしてデプロイしてくれるよ。

---

まとめ

---

Next.jsの特徴をおさらい:

1. サーバーサイドレンダリング（SSR）: リクエストごとにサーバー側でページを生成し、高速かつSEOに強いページを提供。
2. 静的サイトジェネレーション（SSG）: ビルド時にHTMLを生成し、高速な静的ページを作成。
3. APIルート: サーバーサイドの処理をフロントエンドと一緒に管理可能。
4. ページベースのルーティング: pagesディレクトリにファイルを置くだけで自動ルーティング。
5. Vercelとの連携: Vercelを使えば、数クリックでNext.jsプロジェクトをデプロイできる。

これで、Next.jsを使って効率的なサイト構築ができるようになります。次のステップでは、デザインやSEOをさらに改善し、パフォーマンスの高いサイトを目指しましょう！