nero15.dev

【2025年10月現在】AI駆動開発でNext.jsプロジェクトを爆速で立ち上げるためのTips

【2025年10月現在】AI駆動開発でNext.jsプロジェクトを爆速で立ち上げるためのTips
著者: nero15
開発
AI駆動開発Next.jsClaude Sonnet 4.5

生成AIツールを活用して、Next.jsプロジェクトを爆速で立ち上げる方法をまとめました。

「1週間？遅すぎる。」

1ページのランディングページなら、0の状態から1日でローンチできます。要件を整理して、実装して、デプロイして、ドメイン設定まで全部。私は今、そのペースで開発しています。クライアントや社内メンバーの期待を2〜3段階ぶち抜いて「え、もう出来たの！？」と言わせましょう。

従来の開発では数週間かかっていた作業が、AI駆動開発なら1日で完結する。これが2025年10月現在のリアルです。

2025年10月現在と書いたのはAI駆動開発を初めてここ数ヶ月の間。テクノロジーは日々進化していて、性能向上や新機能追加で「え、もうこんなことできるの？」と状況がガラッと変わるということを何度も見てきました。なので、この記事は2025年10月時点のスナップショットだと思っていただけると幸いですし、常にアンテナを張って最新に自分自身をアップデートし続けることが最も大事なことなんじゃないかなと思っています。

この記事のゴール

  • リポジトリのベース立ち上げ方を理解する
  • AI駆動開発で自然とできあがる構成を把握する
  • AIへの効率的な指示方法を習得する

この記事では、Next.jsの詳細な実装方法ではなく、プロジェクトの土台作りとAIとの協働のコツに焦点を当てています。

使用しているLLM

Claude Sonnet 4.5

2025年10月現在、現場で最も使いやすいと感じているのはClaude Sonnet 4.5です。コード生成の精度、長いコンテキストの理解力、指示の汲み取り方が優れています。

ただし、Codex、Gemini、その他のLLMもこれから進化していくので、数ヶ月後には状況が変わっている可能性は大いにあります。常に最新のLLMを試して、自分に合うものを選ぶことをおすすめします。

どうやってAIと壁打ちしているのか？

私が使っているのはClaude CLI

私はターミナルでclaudeコマンドを叩いて、Claude Sonnet 4.5と対話しながら開発しています。

# ターミナルでClaude CLIを起動
claude

# プロジェクトディレクトリで起動すると、ファイルを読み込んでくれる
cd your-project
claude

なぜCLIが好きなのか？

  • シンプル: ターミナル1つで完結する
  • 速い: エディタとAIを行き来する必要がない
  • 集中できる: 余計なUIがないので思考を妨げない
  • git操作と相性がいい: コミット、プッシュ、ブランチ操作がすぐできる

他の選択肢

もちろん、以下のツールでも問題ありません：

  • Cursor: AI統合エディタ（VSCodeベース）
  • GitHub Copilot: VSCode拡張機能
  • Claude.ai: ブラウザでClaude と対話

自分のワークフローに合ったツールを選びましょう。私はCLIの軽快さが気に入っているので、ターミナルでガンガン叩いています。

リポジトリ作成後、最初にやること

GitHubでリポジトリを作成してclone

# GitHubでリポジトリ作成後
git clone https://github.com/yourusername/your-project.git
cd your-project

docsディレクトリを作成してマークダウンで仕様を書きまくる

これが最重要です。

リポジトリをcloneしたら、まず最初にdocs/ディレクトリを作成して、マークダウンファイルに仕様をガンガン書いていきます。

mkdir docs
cd docs

なぜdocsディレクトリが重要なのか？

AIは「プロジェクトの全体像」を理解することで、より正確なコードを生成できます。docsディレクトリにマークダウンで仕様を書いておくことで、AIに常にプロジェクトの文脈を参照させられます。

意識しているのは「短いやりとりを数多く叩く」こと

人間同様、AIも1発で完璧なものを作ることは難しいです。だから私は大枠から埋めて、徐々に密度を濃くしていくアプローチを取っています。

実際のやりとり例：最初のステップ

# 最初の指示（大枠を作る）
あなた：「AI駆動開発でNext.jsプロジェクトをローンチしていきたい。
       まずはdocs配下に仕様を作成していきます。
       進めていくのに必要なファイル群を作成して」

AI：「docs/requirements.md、docs/technical-specifications.md、
     docs/claude.mdを作成しました」

ここでまだ中身は空っぽか、ほとんど書かれていません。それでOK。

2回目：プロジェクトの目的を伝える

あなた：「このプロジェクトの目的は○○です。
       requirements.mdに追記して」

AI：（requirements.mdにプロジェクト目的を追記）

3回目：要件を詰める

あなた：「要件は以下です：
       - ランディングページを1日でローンチ
       - SEO最適化必須
       - レスポンシブデザイン
       - アニメーションでリッチに
       requirements.mdに追記して」

AI：（requirements.mdに要件を追記）

4回目：技術スタックを決める

あなた：「そうした状況で採用するべき技術スタックはどうすれば良いか？」

AI：「Next.js 15 + React 19 + TypeScript 5 + Tailwind CSS 4 + Framer Motionが最適です」

あなた：「OK。technical-specifications.mdに書いて」

5回目：非機能要件を詰める

あなた：「非機能要件は以下：
       - Lighthouse Score 90+
       - LCP < 2.5s
       - デプロイはGCP Cloud Run
       requirements.mdに追記して」

AI：（requirements.mdに追記）

このやりとりを10回、20回、30回と繰り返す

1回のやりとりで全部決めようとしない。短い指示を数多く叩いて、少しずつドキュメントの密度を上げていく。この積み重ねで、最終的にAIが「このプロジェクトで何をどう作るべきか」を正確に理解できるようになります。

ドキュメントが育つ = AIの精度が上がる

docsディレクトリにマークダウンファイルが蓄積されていくと、AIは「このプロジェクトでは何をどう実装すべきか」を正確に理解できるようになります。結果、1回の指示で期待通りのコードが返ってくる確率が高くなります。

この作業に一番時間をかける

感覚的に、プロジェクト全体の中でdocsの作成に最も時間をかけています。ここが甘いと後で全部ブレます。

自分が作る前提でちゃんとレビューすること

AIが提案する技術スタックや設定をそのまま鵜呑みにしてはいけません。放っておくと、実は3バージョン前の古い技術スタックが使われていることもあります（Node.jsのバージョンとか）。

若手エンジニアが設計しているのをペアプロで見ている感覚

AIは優秀な若手エンジニアです。でも、最新バージョンや細かい設定の選択は、あなたがレビューして判断しましょう。

# 悪い例
AI：「Next.js 14を使います」
あなた：「OK」 ← そのまま受け入れてはダメ

# 良い例
AI：「Next.js 14を使います」
あなた：「待って。Next.js 15が最新だよね？15を使おう」
AI：「了解です。Next.js 15.5.4に変更します」

よくあるレビューポイント

  • Node.jsのバージョン: 最新LTSを使っているか？
  • React/Next.jsのバージョン: 最新の安定版か？
  • Tailwind CSSのバージョン: v3とv4で書き方が変わるので注意
  • デプロイ先の設定: Cloud Run? Vercel? 正しい設定になっているか？
  • TypeScriptの設定: strict: trueになっているか？

docsの作成を急がず、丁寧にレビューしながら進めましょう。

補足：なぜNext.jsなのか？

タイトルに「Next.js」と書いていますが、実は意識的にNext.jsを選んでいるわけではありません。AIは世の中で情報量の多いものが精度高く実装できる。この事実が全てです。

Next.jsは世の中で最も情報量が多いフロントエンドフレームワークの1つ（Stack Overflow、GitHub、公式ドキュメント、LLMの学習データ等）。結果として、Webページをローンチする前提だとほぼほぼNext.js一択になります。

個人的にも、Webのフロントエンドを実装するならSEOや画像の最適化などのサポートが充実している面でNext.js一択だと思っています。AI駆動開発という観点でも、フレームワーク自体の優秀さという観点でも、今のところNext.jsが最適解です。

リポジトリのベース立ち上げ

やることはただ1つ。

「これで実装して」

docsで仕様を詰めたら、あとはAIに「これで実装して」と指示するだけです。コマンドを自分で叩く必要はありません。AIがNext.jsプロジェクトの初期化から、必要なライブラリのインストール、ディレクトリ構成の作成、設定ファイルの準備まで全部やってくれます。

実際にこうなった：最近実装したプロジェクトのディレクトリ構成

最近実装したプロジェクト（あくまで例として）で、以下のようなディレクトリ構成ができあがりました：

my-project/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/
│   └── ui/
├── lib/
│   └── utils.ts
├── docs/
│   ├── requirements.md
│   ├── technical-specifications.md
│   ├── development-workflow.md
│   ├── coding-standards.md
│   └── ai-integration.md
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
└── README.md

注意：この構成はdocsの質と量によって変動します。

docsで詳細な要件を書けば書くほど、AIが生成する構成は充実していきます。最初はシンプルな構成から始まり、プロジェクトが進むにつれて自然と複雑になっていきます。

最後にREADME.mdとclaude.mdを更新（作成）する

プロジェクトの立ち上げが完了したら、最後にREADME.mdとclaude.mdを更新（または作成）します。

あなた：「プロジェクトの立ち上げが完了した。
       README.mdとclaude.mdを最新の状態に更新して。
       技術スタック、ディレクトリ構成、セットアップ手順を反映させて」

AI：（README.mdとclaude.mdを更新）

これで、プロジェクトの全体像がドキュメントとして固まります。以降、AIはこれらのドキュメントを参照しながら開発を進められます。

ドキュメント管理のコツ

README.mdを充実させる

READMEはAIに渡す最も重要なコンテキストです。プロジェクトを開始するときに、AIに「READMEのテンプレートを作って」と依頼して、プロジェクトの進行に合わせて更新していきましょう。

claude.mdの書き方と注意点

claude.mdはClaude Code（CLI）で開発する際に最も重要なファイルです。

Claude Codeはこのファイルを参照しながらコードを生成するので、ここに書かれたルールが生成コードの質に直結します。

私が意識している3つの原則：

  1. できる限り細かくルール化する

    • 必須ルールは詳細に書く
    • コーディング規約、命名規則、ディレクトリ構成など
    • 曖昧な表現を避け、具体的に指示する

  2. できる限りスリムにする

    • 容量が増えすぎるとコンパクション（要約）が頻発する
    • コンパクションが起きるとルールが欠落する可能性がある
    • 必須事項に絞って、冗長な説明は削る

  3. 英語で書く、絵文字・余計なインデントは不要

    • AIが読むものなので日本語より英語の方が精度が高い
    • 絵文字やMarkdownの装飾は不要
    • シンプルに、淡々と書く

claude.mdの構成例：

# Project Name

## Tech Stack
- Next.js 15.5.4
- React 19
- TypeScript 5.8
- Tailwind CSS 4.1

## Directory Structure
app/
components/
  - layout/
  - sections/
  - ui/
lib/
docs/

## Coding Rules
- Use Server Component by default
- Add 'use client' for Client Component
- Use Tailwind CSS for styling
- Use cn() function for className

## Naming Conventions
- Components: PascalCase
- Functions: camelCase
- Files: PascalCase for components, camelCase for utils

## Common Issues
(Add as you encounter them)

必要最小限の情報に絞り、シンプルに保つのがポイントです。プロジェクトが進むにつれて追記していきましょう。

AIへの指示のコツ

具体的に指示する

AIは曖昧な指示よりも、具体的な箇条書きを好みます。

# 悪い例
「かっこいいヘッダーを作って」

# 良い例
「Headerコンポーネントを作って。要件は以下：
- ロゴ（左上）
- ナビゲーションメニュー（中央）
- CTAボタン（右上）
- レスポンシブ対応（モバイルはハンバーガーメニュー）
- スクロール時に背景色を変える」

デザインの参考URLがあれば、それも一緒に伝えましょう。

既存コードを参照させる

新しいコンポーネントを作る際、既存コードを参照させることで一貫性のあるコードが生成されます。

「Button.tsxと同じスタイルでCard.tsxを作って。
- variant: default, bordered, elevated
- Propsはchildren, className, variant
- cn()関数を使って」

「○○.tsxと同じスタイルで」と伝えると、命名規則やコーディングスタイルを引き継いでくれます。

エラーが出たらエラーメッセージをそのまま渡す

AIはエラーメッセージを読んで原因を特定し、修正コードを提案できます。エラーメッセージは省略せず、全文を渡しましょう。

「以下のエラーが出ました。修正してください。

Type error: Property 'children' is missing in type '{}' but required in type 'PropsWithChildren'.
  at components/ui/Card.tsx:10」

スタックトレースも含めるとより正確に原因を特定できます。

よくある問題と解決方法

AIが古い書き方を提案してくる

AIが古いNext.jsの書き方を提案してくることがあります。

問題例：

  • pages/ディレクトリを使おうとする
  • getServerSidePropsを使おうとする
  • Tailwind CSS 3.xの@tailwindディレクティブを使おうとする

対処法：

「Next.js 15.5のApp Routerを使っています。
pages/ディレクトリではなくapp/ディレクトリを使ってください。
Tailwind CSS 4.1を使っているので、@import "tailwindcss"を使ってください。」

最新バージョンを明示して指示しましょう。

ディレクトリ構造がバラバラになる

AIに複数回依頼すると、ファイルの配置場所がバラバラになることがあります。

対処法：

「このプロジェクトのディレクトリ構成は以下です。
新しいファイルを作る際は、この構成に従ってください。

components/
  ├── layout/     # Header, Footer
  ├── sections/   # ページセクション
  └── ui/         # 再利用可能なUI」

プロジェクトの最初にディレクトリ構成をREADMEに明記して、AIに常に参照させましょう。

まとめ

AI駆動開発でNext.jsプロジェクトを爆速で立ち上げるポイント：

  1. docsディレクトリに仕様を書きまくる（最重要）

    • 短いやりとりを数多く叩く
    • 大枠から徐々に密度を上げる
    • AIをレビューしながら進める

  2. claude.mdを育てる

    • できる限り細かくルール化
    • できる限りスリムに保つ
    • 英語で書く、絵文字不要

  3. AIに「これで実装して」と指示する

    • コマンドは叩かない
    • AIに全部やってもらう

  4. 具体的に指示する

    • 箇条書きで要件を明示
    • 既存コードを参照させる
    • エラーは全文渡す

従来の開発では数週間かかっていた作業が、AI駆動開発なら1日で完結します。docsの質と量が全てを決めます。ここに一番時間をかけて、丁寧に育てていきましょう。

最終更新: 2025年10月11日

このコンテンツは役に立ちましたか？

サーバー代やコンテンツ制作費として、コーヒー1杯分のサポートをいただけると嬉しいです！

皆様のサポートが継続的なコンテンツ制作の励みになります

Buy me a coffee