主な技術とそのバージョン
- React:
^19.0.0 - TypeScript:
~5.7.2 - Vite:
^6.2.0
- @apollo/client:
^3.13.4 - @apollo/react-hooks:
^4.0.0 - apollo-boost:
^0.4.9 - graphql:
^15.10.1
- ESLint:
^9.21.0 - @vitejs/plugin-react:
^4.3.4 - typescript-eslint:
^8.24.1
- apollo-server:
^3.13.0 - graphql:
^16.10.0
- Node.js（Apollo Server v3をサポートするバージョン）
- フロントエンドはVite + React + TypeScriptの構成
- GraphQLクライアントとしてApollo Clientを使用
- バックエンドはApollo Serverを使用したGraphQLサーバー
Webの基本から丁寧に説明します。図も含めて、初めての方にもわかりやすく解説していきます。
まずはWebの基本から説明します：
Webサイトを見るときには、大きく分けて2つの場所でプログラムが動いています：
- クライアントサイド：あなたのパソコンやスマホ上のブラウザ（Chrome、Safari等）
- サーバーサイド：インターネット上のコンピューター（サーバー）
- あなたがブラウザでURLを入力します（例：www.example.com）
- ブラウザがインターネットを通じてそのサーバーにリクエストを送ります
- サーバーがリクエストを処理して、HTMLやJavaScriptなどのファイルを返します
- ブラウザがそれらのファイルを受け取り、画面に表示します
Next.jsは、React（JavaScriptのライブラリ）をベースにしたWebアプリケーションフレームワークです。特徴的なのは、サーバーサイドとクライアントサイドの両方で動作するコードを書けることです。
サーバーサイドとは、インターネット上のリモートコンピューター（サーバー）で動くプログラムのことです：
- 場所：Vercel、AWS、Google Cloudなどのクラウドサービス上
- 環境：主にNode.jsという実行環境で動きます
- 役割：
- HTMLを生成する
- データベースからデータを取得する
- 外部APIと通信する
- ユーザー認証を処理する
Next.jsの場合、サーバーコンポーネントがここで動作します。重要なのは、この「サーバー」はAPIサーバーとは少し違います。Next.jsのサーバーは：
- Webページのリクエストを受け取る
- サーバーコンポーネントを実行してHTMLを生成する
- 生成したHTMLをブラウザに送る
一般的なAPIサーバーが「データだけ」を返すのに対し、Next.jsのサーバーは「表示用のHTML」も生成して返します。
クライアントサイドとは、あなたのパソコンやスマホのブラウザ上で動くプログラムのことです：
- 場所：ユーザーのデバイス（パソコン、スマホなど）
- 環境：Webブラウザ（Google Chrome、Safari、Firefox、Edgeなど）
- 役割：
- ユーザーのクリックや入力に反応する
- 画面の表示を更新する
- フォームのバリデーション（入力チェック）
- アニメーションやインタラクションの処理
Next.jsの場合、クライアントコンポーネントがここで動作します。
単純なブログサイトがどのように動作するか見てみましょう：
サーバーサイド（Vercel上のNext.jsサーバー）で起きること：
- Next.jsサーバーがリクエストを受け取る
- データベース（例：PostgreSQL）から記事一覧を取得する
- サーバーコンポーネントで記事一覧のHTMLを生成する
- 生成したHTMLをブラウザに送る
クライアントサイド（ユーザーのChrome等）で起きること：
- ブラウザがHTMLを受け取り、画面に表示する
- ユーザーはページを見ることができる
クライアントサイド（ユーザーのブラウザ）で起きること：
- クライアントコンポーネントのボタンがクリックを検知
- 「いいね」カウントを+1して画面を更新
- サーバーにいいね情報を送信
サーバーサイド（Vercel上のNext.jsサーバー）で起きること：
- 「いいね」情報を受け取る
- データベースの「いいね」カウントを更新する
Next.jsのApp Routerでは2種類のコンポーネントがあります：
App Routerでは、特に指定がなければすべてのコンポーネントは「サーバーコンポーネント」です。
// app/blogs/page.tsx（サーバーコンポーネント）
export default async function BlogsPage() {
// このコードはVercelなどのサーバー上で実行される
// データベースからデータを取得（サーバー上でのみ可能）
const blogs = await database.getAllBlogs();
return (
<div>
<h1>ブログ一覧</h1>
<ul>
{blogs.map(blog => (
<li key={blog.id}>{blog.title}</li>
))}
</ul>
</div>
);
}ファイルの先頭に "use client" と書くと、そのコンポーネントは「クライアントコンポーネント」になります。
// components/LikeButton.jsx
"use client" // これでブラウザ上で実行されるコンポーネントになる
import { useState } from 'react';
export default function LikeButton({ initialLikes }) {
// このコードはユーザーのブラウザ上で実行される
const [likes, setLikes] = useState(initialLikes);
function handleClick() {
setLikes(likes + 1);
// サーバーに「いいね」情報を送信
fetch('/api/like', { method: 'POST', body: JSON.stringify({ likes: likes + 1 }) });
}
return (
<button onClick={handleClick}>
👍 いいね！ ({likes})
</button>
);
}Next.jsを動かすVercel上のNode.jsサーバーは、APIサーバーとWebサーバーの両方の役割を持ちます。
- Webサーバーとしての役割：ブラウザからのリクエストを受け取り、HTMLを生成して返す
- APIサーバーとしての役割：クライアントコンポーネントからのデータリクエストを処理する
従来のWebサイトでは「フロントエンド」と「バックエンド」を明確に分けていましたが、Next.jsはその境界をあいまいにして、開発をシンプルにしています。
基本的な使い分け方：
-
サーバーコンポーネント（デフォルト）を使うケース:
- データベースからデータを取得する部分
- APIから情報を取得する部分
- ページの基本的なレイアウト
- SEO対策が必要な部分
-
クライアントコンポーネント（"use client"）を使うケース:
- ボタンやフォームなど、ユーザーの操作に反応する部分
- アニメーションがある部分
- ユーザー入力に応じて表示を変える部分
- ブラウザのAPIを使う部分（localStorage、window.locationなど）
-
Next.jsは、React（JavaScriptのライブラリ）を使ったWebアプリケーションフレームワークです。
-
サーバーサイド（Vercel等のサーバー上）では：
- サーバーコンポーネント（デフォルト）が動作
- データベースからデータを取得
- HTMLを生成してブラウザに送信
-
クライアントサイド（Chrome等のブラウザ上）では：
- クライアントコンポーネント（"use client"）が動作
- ユーザーのクリックや入力に反応
- 画面の一部を動的に更新
-
Next.jsのサーバーは単なるAPIサーバーではなく、HTMLを生成して返すWebサーバーの役割も持ちます。
この組み合わせにより、Next.jsはユーザー体験の良いWebアプリケーションを簡単に作れる強力なフレームワークになっています。
【Claude】Next.js App RouterのStreamingとReactのSuspense
