AIと一緒に作るとき

1. 非エンジニアがNext.jsの知識を使う場面

いまは、Claude Code などのAIに依頼すれば、非エンジニアでもNext.jsのサイトを作れる時代です。また、開発会社に依頼する場合でも、提案書や見積もりにはこれまでの章で学んだ用語が並びます。

コードを自分で書けなくても、「何を頼めばよいか」「出てきたものが正しそうか」を判断できること。これが、本教材で目指してきたゴールです。最後の章では、その具体的な使い方をまとめます。

2. AIに伝わる依頼文の書き方

AIへの依頼は、「いい感じのサイトを作って」のような曖昧なものほど、意図とずれた結果になりがちです。次の4点を具体的に伝えましょう。

1. 技術的な前提：Next.js 16、App Router、TypeScript、Tailwind CSS など（第1〜3章の言葉がそのまま使えます）
2. 誰が・何のために使うか：「社内の経理担当5名が、月次の経費を入力する」など
3. ページの構成：URLの一覧（第2章のフォルダ構成で考えると整理しやすい）
4. データと安全面の条件：どこに保存するか、ログインが必要か、秘密の情報をどう扱うか（第5章）

依頼文の例

Next.js 16（App Router）、TypeScript、Tailwind CSS で、
社内向けの「備品貸出管理サイト」を作ってください。

■ 利用者：総務部と社員（約50名）。社員は貸出を申請し、総務が承認する。
■ ページ構成
  /            貸出できる備品の一覧
  /items/[id]  備品の詳細と貸出申請フォーム
  /admin       総務用の承認画面（ログイン必須）
■ 条件
  ・データは Supabase に保存。接続情報は環境変数で管理し、
    NEXT_PUBLIC_ を付けないこと
  ・フォームの保存は Server Actions で行い、サーバー側で入力チェックと
    権限チェックをすること
  ・"use client" は動きが必要な部品だけに付けること
  ・Pages Router（pages フォルダ）の書き方は使わないこと

各章で学んだ言葉が、そのまま依頼の条件になっていることが分かります。

3. AIが出したコードを確認する観点

コードの中身を細かく読めなくても、次の点は非エンジニアでも確認できます。

分からない用語が出てきたら

AIの回答に知らない用語が出てきたら、遠慮なく「非エンジニア向けに、たとえを使って説明して」と聞き返しましょう。本サイトの用語集も活用してください。

4. 開発会社に依頼するときに確認すること

開発会社にNext.jsでの制作を依頼する場合は、作る中身だけでなく、公開後のことを最初に確認しておくことが重要です。後から揉めやすいポイントを挙げます。

1. 公開先と月額費用：Vercelか、AWSなど別のサービスか。アクセスが増えたときの費用の目安は。
2. アカウントの所有者：ドメイン、GitHub、Vercel、データベースのアカウントは誰の名義か。自社名義にしておくと、開発会社を変えるときに困りません。
3. アップデートの方針：セキュリティ更新（第7章）を誰が、どのくらいの頻度で行うか。保守契約に含まれるか。
4. ページの作り方の方針：どのページを作り置き（SSG）にし、どのページを毎回作る（SSR）にするか。更新はどのくらいの時間で反映されるか（第4章）。
5. 更新の手順：お知らせなどを自社で更新できるか（CMSを使うか）。変更を本番前に確認するプレビューの流れはあるか。

5. 次の一歩

全体像をつかんだら、実際に手を動かしてみると理解が一段と深まります。

• 小さなサイトを1つ作ってみる：AIに「自己紹介ページを3ページ、Next.js 16のApp Routerで」と依頼し、localhost:3000 で表示するところまで進めてみましょう。
• Vercelに公開してみる：無料のHobbyプランで、GitHub連携から公開までを体験すると、第7章の流れが実感できます。
• 公式の学習コースを眺める：Next.jsの公式サイト（nextjs.org）には、英語ですが「Learn」という無料の学習コースがあります。ブラウザの翻訳機能を使えば十分に読めます。

最後に、まとめテスト（全24問）で、全体の理解度を確かめておきましょう。