初級① Next.jsプロジェクトをAIと立ち上げる

初級編へようこそ！超初級では“1枚のHTML”を作りました。ここからは、無料講座で学んだ Next.js を使って“本物のアプリの土台”を立ち上げます。初級編のあいだ、この土台をずっと育てて、最後にはログインとデータ保存のあるミニアプリになります。

STEP1：新しい保管庫（リポジトリ）を作る

1. 1GitHubで「＋」→「New repository」。
2. 2名前は my-app（Private でOK、「Add a README file」にチェック）→ Create。

STEP2：AIにNext.jsの土台を作ってもらう

claude.ai/code で my-app をつないだら、③で覚えた「計画→OK→実行」で頼みます。

このリポジトリに、Next.js（App Router）＋ Tailwind CSS の新しいプロジェクトを作りたい。トップページは「My App」という見出しと、ひとこと自己紹介だけのシンプルな構成で。まだ作らずに、計画だけ先に見せて。

OK、その計画で作って。終わったらmainブランチに反映して。

STEP3：Vercelで公開（2回目なのでサクッと）

1. 1Vercelで「Add New…」→「Project」→ my-app を Import。
2. 2今回は「Next.js」と自動で認識されるはず。設定はそのまま Deploy。
3. 3公開URLが発行されたら開いてみる——「My App」が見えたら成功！

STEP4：“フォルダ構成の地図”を読む

GitHubで my-app の中身を眺めてみましょう。ファイルが一気に増えてビックリしますが、全部わかる必要はありません。場所の意味だけ、地図として覚えます。

app/

ページ置き場。ここのフォルダ構成が、そのままURLになる。

app/page.tsx

トップページの中身。

app/layout.tsx

全ページ共通の“枠”（ヘッダーなどを置く場所）。

public/

画像などの素材置き場。

package.json

使っている部品（パッケージ）のリスト。

STEP5：1か所変えて、リズムをつかむ

「見出しを『〇〇のアプリ』に変えて。mainに反映して」と頼み、1〜2分後に公開URLを再読み込み。頼む→mainに反映→自動で公開が変わる——この初級編のリズムを体に入れましょう。

おさらい：今日使った“言葉”

Next.js（App Router）

本格サイトの“全部入りセット”。appフォルダでページを管理する方式。

page.tsx / layout.tsx

ページの中身／全ページ共通の枠。

package.json

部品リスト。npmが読む“お買い物メモ”。

開発のリズム

頼む→mainに反映→自動デプロイ→公開URLで確認。