個人プロジェクトを Vercel で公開する
作ったものは、やっぱり公開してこそ。個人開発で作った Next.js のアプリは、Vercel で公開することが多いです。手軽さがちょうどよく、気に入っています。この記事では、実際に使うときの流れと、最初に知っておくとよいポイントをまとめます。
GitHub につなぐだけで公開できる
Vercel の良いところは、なんといってもデプロイの手軽さです。最初のセットアップは、ざっくりこれだけです。
- Vercel にGitHubアカウントでログインする
- 公開したいリポジトリを選んで「Import」する
- ビルド設定はほぼ自動で判定されるので、そのまま「Deploy」
一度つないでおけば、あとは main ブランチに push するだけで自動的に本番が更新されます。「公開するための作業」に時間を取られないので、作ることに集中できます。
プレビューが地味に便利
新しい変更をブランチで上げると、本番とは別の「プレビュー用URL」が自動で作られます。
git checkout -b feature/new-section
git push origin feature/new-section
# → プレビューURLが自動で発行される
本番に影響を与えずに、実際の環境で見た目や動きを確認できる。ひとりで開発していると、この「安全に試せる場所」があるのは想像以上に助かります。スマホでプレビューURLを開いて表示崩れを確認する、といった使い方もよくします。
環境変数とドメイン
APIキーなどの秘密情報は、コードに直書きせず Vercel の Settings → Environment Variables に登録します。NEXT_PUBLIC_ を付けた変数だけがブラウザ側に渡る、という命名ルールがあるので、ここは最初に押さえておくと事故りません。独自ドメインも Settings から数分でつなげられ、HTTPS化（証明書）も自動でやってくれます。
押さえておきたい料金の話
無料（Hobby）プランで個人開発を始められますが、いくつか前提があります。
- 個人・非商用が対象：広告などで収益化する場合は、規約上 Pro プランが必要になることがあります。
- 帯域・実行時間に上限：アクセスが増えたり、重い処理を動かしたりすると上限に関わってきます。
なので、AdSense などで収益化を考えているサイトは、最初にプランの条件を確認しておくと安心です。とはいえ、個人プロジェクトを「とりあえず公開してみる」ハードルを、Vercel はぐっと下げてくれます。作ったら世に出す、その一歩を後押ししてくれる存在です。公開後の定期処理には「GitHub Actions で毎日データを自動収集する」のような仕組みを組み合わせています。