Next.jsアプリをNowで公開する

アソビューAdvent Calendar 2019の20日目の記事になります。

フロントエンドエンジニアの野口です。今日は、Next.jsアプリを最近話題のNowで公開する方法を紹介します。
ほんとに一瞬で公開できます。

Next.jsとは

Reactで簡単にSSR(server side rendering)を可能とするフレームワークです。
SSRはもちろん、高速ページロードのための自動コードスプレティングやHMR(Hot Module Replacement)をサポートしたWebpackベースの開発環境などをデフォルトで用意してくれています。

Nowとは

Nowは、Next.jsを開発しているZeit社が提供するPaasです。
Nowを使うことで非常に簡単にデプロイすることができます。

Next.jsアプリを作成

まずはNext.jsアプリを作成します。

create-next-appを使うことで、簡単にアプリケーションの雛形を作成可能です。
かなり多くのExamples（雛形）が用意されているので、用途に合わせて選ぶことができます。
next.js/examples at canary · zeit/next.js · GitHub

create-next-appを使わない場合でも、Reduxの設定など、単純なReactアプリとは少し異なる設定をしないと行けない時もあり、そんな時にここのExamplesはかなり参考になります。

アプリ作成

npx create-next-app {app-name}

アプリ起動

yarn dev

http://localhost:3000/にアクセスするとデフォルトで用意されているページを確認できます。

Next.js デフォルト初期起動画面 — nextjs prepared page

Nowで公開

さきほど作成したアプリを公開していきます。
CLIの場合と、ブラウザでポチポチ操作していく場合をそれぞれ紹介します。

CLIの場合

Nowにサインアップ

まずは、こちらからNowにサインアップします。
Githubアカウントで登録できます。

Now CLIをインストール

npm i -g now

Now login

以下コマンドを実行し、サインアップ時に登録したメールアドレスを入力。

now login

> We sent an email to hoge@hoge.co.jp. Please follow the steps provided
  inside it and make sure the security code matches Gentle Tasmanian Devil.
  ⠦ Waiting for your confirmation

メールの認証を求められるので、届いたメールの認証ボタンを押します。認証完了すると以下のメッセージが表示されます。

✔ Email confirmed
> Congratulations! You are now logged in. In order to deploy something, run `now`.

Nowにデプロイ

これで準備は完了です。
あとは以下のコマンドを実行するだけでデプロイされます。

now

> Deploying ~/Documents/work/next-now-sample under {account name}
> Using project next-now-sample
...
> Ready! Deployment complete [2m]
- https://next-now-sample.now.sh

https://next-now-sample.now.shにアクセスするとNext.jsアプリが公開されているのを確認できます。