モダンなWeb開発の定番フレームワーク Next.js。OpenAI Codex と組み合わせれば、開発スピードが劇的に上がります。
この記事では、CodexでNext.jsアプリを開発する流れを、実践的なプロンプト例とともに解説します。
⚠️ 本記事は OpenAI 公式とは無関係の解説記事です。Next.jsはバージョンによって仕様が変わるため、使用バージョンをCodexに明示するのが重要です。
なぜNext.js × Codexは相性が良いのか
- Next.jsは情報量が多く、Codexが仕様をよく理解している
- コンポーネント単位で開発するので、Codexへの指示が出しやすい
- ファイル構成が規約化されており、Codexが適切な場所にコードを置ける
実際、このサイト（codex-guide.com）もNext.jsで作られ、Codexのようなエージェントで開発・運用されています。
開発前の準備
環境
バージョンを必ず伝える
Next.jsは進化が速く、App Router登場以降は書き方が大きく変わりました。使うバージョンをCodexに明示 しないと、古い書き方が混ざることがあります。
> Next.js 16 の App Router で開発します。最新の書き方で実装して
これをAGENTS.mdに書いておくのが鉄則です。
プロジェクト作成
> Next.js 16 (App Router, TypeScript, TailwindCSS) の新規プロジェクトを作る手順を教えて。
> その後、トップページに「Hello Codex」と表示するところまで一緒にやって
Codexがセットアップコマンドから初期実装まで案内してくれます。
実践：機能を実装する
コンポーネントを作る
> ヘッダーコンポーネントを作って。
> - ロゴ（左）とナビゲーション（右）
> - モバイルではハンバーガーメニュー
> - TailwindCSSでレスポンシブ対応
> - components/Header.tsx に配置
ページを追加する
> /about ページを追加して。会社概要を表示するシンプルな構成で
App Routerの規約（app/about/page.tsx）に沿って自動配置されます。
APIルートを作る
> お問い合わせフォームの送信を受け取るAPIルートを作って。
> POST /api/contact で、名前・メール・本文を受け取りバリデーションする
データ取得を実装
> 記事一覧を表示する機能を作って。
> Markdownファイルを読み込んで、日付順に並べて表示
AGENTS.mdの推奨設定（Next.js向け）
# Next.jsプロジェクト
- Next.js 16 (App Router)
- TypeScript（strictモード、any禁止）
- TailwindCSS v4
- Server Componentsを優先、必要な時だけ"use client"
# ルール
- ページは app/[route]/page.tsx
- 共通UIは components/
- データ取得ロジックは lib/
- 新規ライブラリ追加は事前に提案
これで、Codexが規約に沿った一貫性のあるコードを書いてくれます。
デプロイまで自動化
> このNext.jsアプリをCloudflare Workersにデプロイする設定を作って。
> ビルド→デプロイを npm run deploy で実行できるように
Goal modeで「デプロイが成功するまで」を任せれば、設定の試行錯誤も自走してくれます。
よくあるトラブルと対処
古いAPIで書かれる
→ バージョンを明示。「Next.js 16のApp Routerで」と毎回伝えるか、AGENTS.mdに記載。
"use client"の付け忘れ/付けすぎ
→ 「これはServer Componentにすべき？Client Componentにすべき？」と相談しながら進める。
ビルドエラー
→ エラー全文をCodexに渡して「直して」。エラー解決も参照。
型エラー
→ TypeScriptの型エラーはCodexが得意。エラーメッセージごと貼り付ければOK。
効率化テクニック
- コンポーネント単位で依頼：大きく頼まず、1コンポーネントずつ
- 既存コードを参照させる：「PostCard.tsxと同じスタイルで」
- Goal modeで重い実装を自走：Goal mode
- テストも書かせる：「このコンポーネントのテストも書いて」
- 画像でデザインを渡す：AppshotsやVS Code画像入力
よくある質問（FAQ）
Q. Next.js初心者でも使えますか？
A. 使えますが、基礎概念（コンポーネント、ルーティング） を理解していると指示が的確になります。プログラミング学習も参考に。
Q. React単体やほかのフレームワークでも同様に使える？
A. はい。Vue、Svelte、Astroなどでも同じアプローチが使えます。バージョン明示が共通のコツ。
Q. 大規模アプリも開発できますか？
A. できます。GPT-5.1-Codex-MaxとGoal modeで大規模リファクタも自走可能。
Q. デプロイ先のおすすめは？
A. Cloudflare Workers / Pages、Vercelなど。Codexに「○○にデプロイしたい」と伝えれば設定を作ってくれます。
Q. 仕事の案件でも使えますか？
A. フリーランス案件で活用している人は多数。機密コードの扱いは料金プランのデータ設定を確認。
まとめ
Next.js × Codex は相性抜群で、コンポーネント実装からデプロイまで 大幅に効率化できます。成功の鍵は バージョンの明示 と AGENTS.mdでの規約共有、そして コンポーネント単位の依頼。
