データの読み書き

1. データはどこに置かれているか

お知らせの一覧、商品の在庫、問い合わせの内容。サイトで扱うデータは、ページのプログラムとは別の場所に保管するのが一般的です。代表的な置き場所は3つです。

API：データをやり取りする「窓口」

API（エーピーアイ）は、プログラム同士がデータをやり取りするための窓口です。銀行の窓口に決まった用紙を出すと、決まった手続きをしてくれるように、APIに決まった形でお願いすると、決まった形でデータが返ってきます。

2. データを「読む」：サーバーコンポーネントで取り出す

App Routerでは、データを読んで表示するのはとてもシンプルです。第4章で学んだサーバーコンポーネントの中で、直接データを取り出せるからです。

// お知らせ一覧ページ（サーバーコンポーネント）
export default async function NewsPage() {
  const news = await getNewsFromDatabase(); // データを取り出す
  return (
    <ul>
      {news.map((item) => <li key={item.id}>{item.title}</li>)}
    </ul>
  );
}

await は「データが届くまで待つ」という意味です。取り出したお知らせを、1件ずつリストにして表示しています。

この処理はサーバー（厨房）で行われるため、データベースの住所やパスワードがブラウザに届くことはありません。完成したHTMLだけが客席に運ばれます。

3. データを「書く」：Server Actions

問い合わせフォームの送信や、管理画面での記事の保存など、データを書き込む処理にはどうすればよいでしょうか。

以前は、まずサーバー側にAPI（窓口）を作り、ブラウザからその窓口にデータを送る、という2段階の作業が必要でした。Next.jsではServer Actions（サーバーアクション）を使うと、フォームのボタンから、サーバー側の処理を直接呼び出せます。

async function saveInquiry(formData) {
  "use server";                       // ← この処理はサーバーで動く
  const email = formData.get("email");
  // 入力内容を確認し、データベースに保存する
}

<form action={saveInquiry}>
  <input name="email" />
  <button>送信する</button>
</form>

"use server" は「この処理はサーバーで実行する」という印です。第4章の "use client" と対になっています。

4. 外部との窓口：Route Handler

画面ではなく、データだけをやり取りする窓口（API）が必要な場面もあります。例えば次のようなケースです。

• 決済サービスから「支払いが完了しました」という通知を受け取る（これをWebhook＝ウェブフックと呼びます）
• スマホアプリや社内の別システムから、データを取りに来てもらう

こうした窓口は、app/api/payment/route.ts のように route.ts という名前のファイルで作ります。これをRoute Handler（ルートハンドラー）と呼びます。page.tsx が「人が見る画面」なら、route.ts は「プログラムが使う窓口」です。

5. 秘密の情報と「環境変数」

データベースのパスワードや、外部サービスを使うためのAPIキー（サービスを使うための合鍵のような文字列）は、プログラムの中に直接書いてはいけません。プログラムは共有されたり公開されたりすることがあるからです。

こうした秘密の情報は、環境変数という仕組みで、プログラムとは別に保管します。開発中は、プロジェクトの中の .env.local というファイルに書きます。

# .env.local（このファイルはGitHubなどに上げない）
DATABASE_URL=postgres://…（データベースの住所とパスワード）
STRIPE_SECRET_KEY=sk_…（決済サービスの秘密キー）
NEXT_PUBLIC_SITE_NAME=サンプル商店

6. ログイン機能と「ページに入る前のチェック」

会員サイトや管理画面には、ログイン機能（認証）が必要です。パスワードの安全な保管など注意点が多いため、自作せずに専用のサービスや部品を使うのが一般的です（Auth.js、Clerk、Supabase Auth など）。

また、「ログインしていない人が /admin に来たら、ログイン画面へ案内する」といった、ページに入る前のチェックには、proxy.ts というファイルを使います（15系までは middleware.ts という名前でした）。建物の入り口にいる受付係のような役割です。ただし、受付だけに頼らず、データを扱う処理の中でも権限を確認するのが安全な作り方です。