対象読者: SanityとNext.jsでサイトを作ってVercelで公開することに興味がある個人事業主・中小企業のWeb担当者
VercelはWordPressで言うレンタルサーバーです
Vercelとは何かを一言で言うと、Next.jsのサイトを公開するためのサーバーです。
WordPressで例えると:
WordPress:
Xserverなどの有料レンタルサーバーが必要(月1,000円〜)
Sanity × Next.js:
Vercel(無料)+Sanity(無料)
→ 維持費ほぼゼロで運用可能
これがSanityが注目される理由の一つです。Xserverやさくらサーバーのようなレンタルサーバーなしでサイトが公開できます。
ターミナルでVercelにログインして公開した
今回もターミナルを使いました。流れはこうです。
- Vercelのアカウントを作成(Googleアカウントで登録)
- ターミナルで
vercel loginを実行 - ブラウザが開いてGoogleアカウントで認証
- 環境変数をVercelに設定(SanityのプロジェクトIDなど)
vercel --prodで本番公開
途中でエラーも出ましたが、Cursorに投げて解決しました。今回のエラーの原因は2つでした。
- 環境変数がVercelに設定されていなかった(SanityのプロジェクトIDをVercelに教えていなかった)
- Next.jsとしてVercelに認識されていなかった(設定ファイルの追加で解決)
SanityのCORS設定も必要だった
公開後に404エラーが出ました。原因はSanityの設定でした。
SanityにはCORS(コルス)という「どこからのアクセスを許可するか」という設定があります。ローカル環境(localhost)は最初から許可されていましたが、Vercelのドメインは許可されていませんでした。
Sanityの管理画面から https://bizinets-life-web.vercel.app を追加することで解決しました。
「できた」という実感がわかなかった
公開が完了してブラウザでサイトを確認しました。
正直に言います。「できた」という実感がわきませんでした。
理由はこうです。localhostで見ていた画面と、Vercelで公開された画面が全く同じに見えるからです。URLが変わっているだけで、見た目は何も変わりません。
「ちゃんと公開されているのかされていないのかの判断が難しい」というのが率直な感想です。
Claudeに「公開成功です!」と言ってもらって初めて安心しました。
これはWordPressでサーバーにアップロードしたときとは違う感覚でした。WordPressの場合は「サーバーに繋いで、ファイルをアップして、URLで確認する」という明確なステップがあるので「公開した」という実感が持てます。Sanityの場合はその感覚が薄いかもしれません。
AIに頼らずにできるか?というと正直無理です
3日間を振り返って率直に言います。
AIが伴走してくれているので作業自体は全く難しくありませんでした。
ただ、AIに頼らずに同じことができるか?というと、できません。ターミナルに何を指示したのかさえ理解していないからです。コピペで作業しているだけです。
でも、それでいいと思っています。
AIの進歩が目覚ましい今の時代、仕組みを完全に理解してから動くよりも、まず動いてみることが大切だと感じています。
3日間でできたこと
Day1:Sanityのセットアップ
└ アカウント作成→プロジェクト作成→Studio起動
Day2:スキーマ設計
└ 実践記・カテゴリ・著者・サイト設定・サービスの5つを定義
Day3:Next.js接続→Vercel公開
└ サイトとしてインターネット上に公開
エンジニアではない自分が、コードを一行も書かずにここまで来られました。
これから挑戦しようとしている人へ
一言だけ言うとしたら、これです。
AIの進歩が目覚ましいため、この機会に何事にも挑戦してみることが大切です。
「自分にはできない」ではなく「AIを使えばできそう」という感覚で始めてみてください。
次回からはデザインの改善・独自ドメインの設定・実際のコンテンツ投入など、サイトを育てていく過程を公開していきます。引き続き全部見せていきます。