Next.js Server Componentsだけでブログを作る方法を初心者向けに完全解説

1. Next.js Server Componentsとは？

1. Next.js Server Componentsとは？

Next.jsのServer Componentsは、サーバーでだけ動くReactコンポーネントです。サーバー上でHTMLを生成し、そのままブラウザに送信するので、ページの表示が速くなります。Reactのクライアントコンポーネントと違い、ブラウザでJavaScriptを使わなくても初期表示が可能です。

Server ComponentsはデータベースやAPIからデータを直接取得して、サーバーでレンダリングできるため、ブログの記事一覧や詳細ページの表示に適しています。

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

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

まずはNext.jsの新しいプロジェクトを作ります。ターミナルで以下のコマンドを入力します。

npx create-next-app@latest my-blog
cd my-blog
npm run dev

これでNext.jsの開発環境が整いました。

3. Server Componentsでブログ記事一覧を作る

3. Server Componentsでブログ記事一覧を作る

Server Componentsを使って、ブログの記事一覧を表示します。まずはサーバーで記事データを取得する関数を作ります。

import fs from "fs";
import path from "path";

export default function BlogList() {
  const filePath = path.join(process.cwd(), "data", "posts.json");
  const jsonData = fs.readFileSync(filePath, "utf-8");
  const posts = JSON.parse(jsonData);

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

4. 個別記事ページをServer Componentsで作成

4. 個別記事ページをServer Componentsで作成

次に、記事をクリックすると詳細ページが表示されるようにします。

import fs from "fs";
import path from "path";

export default function BlogPost({ params }) {
  const filePath = path.join(process.cwd(), "data", "posts.json");
  const jsonData = fs.readFileSync(filePath, "utf-8");
  const posts = JSON.parse(jsonData);
  const post = posts.find((p) => p.id === params.id);

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

5. サーバーコンポーネントで動的ルーティングを使う

5. サーバーコンポーネントで動的ルーティングを使う

Next.jsのServer Componentsでは、ファイル名に角括弧を使って動的ルートを作成できます。例えば、app/blog/[id]/page.jsのようにします。

export default function Page({ params }) {
  return <BlogPost params={params} />;
}

これにより、/blog/1や/blog/2のように、URLに応じて記事を切り替えることができます。

6. データベースから記事を取得する方法

6. データベースから記事を取得する方法

Server Componentsはサーバー上で動くので、直接データベースから記事データを取得できます。例えば、Prismaを使って記事を取得する場合は以下のようになります。

import { prisma } from "@/lib/prisma";

export default async function BlogList() {
  const posts = await prisma.post.findMany();

  return (
    <div>
      <h1>ブログ記事一覧（データベース版）</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

7. サーバーコンポーネントの利点と注意点

7. サーバーコンポーネントの利点と注意点

Server Componentsを使うと、初期表示が速くSEOにも強くなります。ただし、ブラウザで動くJavaScriptは使用できないので、ボタンを押してデータを変更するような機能はクライアントコンポーネントと組み合わせる必要があります。

ブログでは記事一覧や詳細ページの表示、コメントの初期読み込みなどにServer Componentsを活用し、動的な操作部分だけクライアントコンポーネントに分けるのが理想です。

8. サンプルブログ全体の構成例

8. サンプルブログ全体の構成例

簡単な構成例としては以下のようになります。

• app/blog/page.js：記事一覧ページ（Server Components）
• app/blog/[id]/page.js：個別記事ページ（Server Components）
• components/CommentForm.js：コメントフォーム（Client Components）
• data/posts.json：記事データ（サンプル用）

これでNext.js Server Componentsだけでブログの基本構成が完成します。

まとめ

まとめ

ここまででNextjsのServerComponentsだけを使ってブログを作成する流れを一通り学びました。ServerComponentsはサーバー上で実行されるReactコンポーネントであり、データ取得とHTML生成を同時に行える点が大きな特徴です。従来のクライアント中心のReact開発と比べて、初期表示が速くなり、検索エンジンに正しく内容が伝わりやすい構造を自然に作ることができます。ブログのように文章コンテンツが中心となるWebサイトでは、記事一覧ページや記事詳細ページをServerComponentsで構築することで、表示速度と保守性の両方を高めることができます。

またNextjsのAppRouterとServerComponentsを組み合わせることで、ファイル構成そのものがURL構造と一致し、初心者でも理解しやすい設計になります。角括弧を使った動的ルーティングにより、記事IDごとのページ生成も直感的に行えました。JSONファイルやデータベースから直接データを取得できる点も、サーバー専用で動作するServerComponentsならではの利点です。

実際のブログ開発では、すべてをServerComponentsだけで完結させるのではなく、必要に応じてClientComponentsと組み合わせることが重要です。例えばコメント投稿やボタン操作など、ブラウザ側でのインタラクションが必要な部分はClientComponentsに切り分けることで、全体としてバランスの取れた構成になります。今回学んだ内容は、Nextjsを使った実践的なブログ制作の土台となる知識です。

import fs from "fs";
import path from "path";

export default function BlogList() {
  const filePath = path.join(process.cwd(), "data", "posts.json");
  const jsonData = fs.readFileSync(filePath, "utf-8");
  const posts = JSON.parse(jsonData);

  return (
    <div>
      <h1>最新ブログ記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

このようにServerComponentsではデータ取得の処理と表示ロジックを同じ場所に書くことができます。コードの見通しが良くなり、ブログ運用時の修正や拡張も行いやすくなります。記事数が増えても構成が破綻しにくく、長期的な運用にも向いています。