対象読者： SanityでサイトをゼロからつくりたいけどNext.jsって何？という個人事業主・中小企業のWeb担当者
そもそもNext.jsって何ですか？
正直に言います。Next.jsという言葉は聞いたことがありましたが、何をするものかは全く知りませんでした。
Sanityが「コンテンツを管理する仕組み」だとすると、Next.jsは「そのコンテンツをサイトとして見せる仕組み」です。
WordPressで例えると：
WordPress：
管理画面（コンテンツ管理）＋テーマ（見た目）が一体化している
Sanity × Next.js：
Sanity（コンテンツ管理）＋Next.js（見た目）を別々に組み合わせる
分かれている分だけ複雑に見えますが、それぞれが専門特化しているのでAIが書き出したコードとの相性が良く、表示速度も速いというメリットがあります。
ターミナルに指示を入れてNext.jsを作った
今回もターミナル（コマンドプロンプト）を使いました。
Claudeに言われた通りコマンドをコピペして実行するだけです。数分後にはNext.jsのプロジェクトが自動で作成されていました。
正直に言うと、ターミナルに何を指示したのかさえ分かっていません。 コピペしているだけなので。
ただ、それでも動くものができてしまうのが今のAI時代の現実です。
SanityとNext.jsを「接続」するとはどういうことか
次にやったのが「接続」という作業です。
これはSanityに入れたコンテンツをNext.jsが取得できるようにする設定で、Cursorのチャットに必要な情報を渡して設定ファイルを作ってもらいました。
具体的には：
- lib/sanity.ts（SanityとNext.jsをつなぐ設定ファイル）
- .env.local（SanityのプロジェクトIDなどの情報）
- app/page.tsx（記事一覧を表示するトップページ）
この3つのファイルがCursorによって自動生成されました。
ここでもエラーが出ました。今回の原因はビルド時に環境変数が読み込まれないというものでしたが、またCursorに投げて解決しました。
Sanityに入れた記事がブラウザに表示された瞬間
エラーを修正してブラウザで http://localhost:3000 を開いたところ、Sanity Studioで入力した「テスト記事」が表示されました。
Sanity Studio（管理画面）で記事を入力
↓
Next.js（フロントエンド）が自動で取得
↓
ブラウザに表示された
WordPressで投稿したら記事が表示されるのと同じことが、Sanity＋Next.jsでも実現できました。
localhostとVercelの違い
ここで一つ理解が深まったことがあります。
今まで http://localhost:3000 で確認していたのは自分のPC上だけで動いている仮の状態でした。
WordPressで言えば「Localというソフトで動かしているローカル環境」と同じです。
localhost（ローカル環境）：
自分のPCだけで動いている
→ 自分しか見られない
Vercel（本番環境）：
インターネット上で動いている
→ 世界中からアクセスできる
Sanityでは、このlocalhostでの確認作業がターミナルのコマンドで実現できます。Localのようなソフトを別途インストールする必要がありません。
デザインもAIが一瞬で作った
接続が確認できたあと、Cursorのチャットにデザインの要望を伝えました。
「シンプルで読みやすい・プロフェッショナルな印象・記事カードをグリッドレイアウト・ヘッダーにサイト名・白ベースで青系のアクセントカラー」
数秒後にはそれらしいデザインになっていました。
WordPressに慣れているせいか、まだまだ形が不十分な感じはします。テーマがある程度決まっているWordPressはデザインの予想がつきやすいですが、Sanity×Next.jsではどんなデザインになるか事前に全く想像できませんでした。
ただ、細かい指定をしていないのにそれらしいものができたのは面白いと感じました。これがAIとのバイブコーディングの面白さなのかもしれません。
次回予告
次はいよいよVercelでインターネット上に公開します。自分のPCの外に出て、世界中からアクセスできる状態にする作業です。引き続き全部見せていきます。