はじめに
今回は、Next.js で作った自分のサイトを、vercel にデプロイして誰でも見られるようにしていきます。
前提として、Next.js のディレクトリがあること、GitHub に登録してプッシュ（git push）できるようにしてあることが条件となります。
Next.js が無いよという方の事前準備（飛ばしてOK）
Next.js のサイトの作り方はこちらになります
こちらの記事を参考に作ると、デフォルトのままのサイトになってしまうので、少しだけいじりましょう。
- src/app/page.tsx の
- で囲まれている部分の文字を書き換える
- 同ファイルの
<div className={styles.ctas}>のブロックをすべて削除 - 同ファイルの
<footer>の内側をすべて削除。とりあえず「フッター」といれておく - src/app/page.module.css の .page {} のかっこの中の最後の行に
background-color: darkblueと記述する（好きな色でOK）
localhost:3000 の見た目がこんな風になります。
しょぼいですね。最初はこんなもんでしょう。
しょぼいのは恥ずかしいという方は、もっと作りこんでから次の手順に行きましょう。
GitHub の準備
Next.js のプロジェクトに移動（cd <プロジェクト名>）して、以下を行います。
git init
git branch -M main
git add .
git commit -m "feat: first page"
GitHub の新しいリポジトリを作成する際のリンクです。こちらにアクセスして、リポジトリを作成していきます。
Choose vibility を Public にすると、全世界にソースコードが公開されます。Public にしたい場合は見られていい内容か、気を付けて反映するようにして下さい。Private にしておくことをおすすめします。
リポジトリを決めて、「Create repository」を押下します。
こんな画面になったら成功です。
「…or push an existing repository from the command line」と書いてあるところをコマンドラインに戻って実行します。
git remote add origin git@github.com:<ユーザー名/リポジトリ名>.git
git branch -M main # 先にやってあるので飛ばしていいです
git push -u origin main
これで GitHub のリポジトリに、Next.js のソースコードを反映することができました！
Vercelのアカウント作成
Vercel は、Next.js をはじめとして、今回使用する Vercel クラウドプラットフォームなどを開発・提供している会社です。Vercel はサービス名でもあります。
まずはアカウントを作成しましょう。
個人開発では、無料枠のある Hobby を選択します。
アカウントの連携を聞かれます。今回はGitHubで進めます。
GitHubのログインを求められるので、入力します。
このような表示になれば、アカウント作成は完了です。
今回はこのままサイト上でデプロイしてみましょう。
デプロイ（vercelのサイト上から）
先ほどの画面から続けて操作します。
画面中央左の、GitHub のアイコン付き install ボタンから、先ほど準備したリポジトリを選択します。
- 「install」を選択
- 「Only select repositories」 を選択
- 「Select repositories」から、先ほどNext.js で作られていてサイトとして見られるようにしたいリポジトリを選択
リポジトリ名が表示されていれば成功です。「Import」を押下します。
「Project Name」は、URLを作る際に参考にされるので、自分の好きな名前に書き換えておきましょう。個人情報は書かないようにしましょう。小文字のみだったり記号に制限があったりするので、Deploy押したときに引っかかったら書き直しです。
ほかの設定もいくつか表示されていますが、今回は「Deploy」でOKです。
「Deploy」を押すと自動でデプロイが進み、URLが発行されます。全世界から誰でもアクセスできるようになります。世界に見せても大丈夫かどうか、今一度確認してから進むようにしてください。
Congratulations! と表示されれば、デプロイ完了です！
「Continue to Dashbord」を押下します。
こちらの真ん中ちょい上にある、Domains に書かれているURLを押下します。
例として、画像にもある筆者が作成したサイトへのリンクも載せておきます。しょぼいやつですね。
無事にサイトを見ることができましたか？たったこれだけでサイトができちゃうの、本当にすごいですよね！自分のスマホとか別のデバイスから見てみると、「おぉ…、本当に公開されてるんだ…」とさらに感動を覚えます。ぜひいろいろなデバイスで確認してみてください！
別パターン：CLIからデプロイする
コマンドラインを立ち上げて、下記のコマンドを打ちます。
npm install -g vercel
vercel login
ブラウザが開かれると思います。開かれなかったらコマンドラインで Enter 押してみてください。
そうすると、ログインと認証を求められます。サイト上同様、いろいろな方法でログインできます。今回は GitHub でログインしましたし、GitHubのリポジトリを使っているのでGitHubがおすすめです。
次にデプロイ（サイトに反映する）を行います。もう本番です。以下のコマンドを打ちます。
vercel
サイトで進めてきたのと同じ内容を聞かれます。名前など設定を進めていけば、完了です！URLにアクセスして、反映されているか確認してみてください。
Tips: 既存のプロジェクトに反映したいときは？
もし先にサイトで進めるなどして vercel にプロジェクトがあるよという状態の場合、vercel コマンドの進行中に手元でいじっているソースコードを vercel の既存プロジェクトと繋げるかどうか聞かれるので、プロジェクト名を入力してください。
? Link to existing project? yes # 繋げたいので yes
? What’s the name of your existing project? eto-playground # 自分でつけたプロジェクト名
これで反映できるようになります。
参考