3分で NextJS をデプロイして「 Hello from NextJS 」

関連

必要なファイルは4つです。

NextJS をインストールする為のpackage.json
NextJS の設定ファイルのnext.config.js
now の設定ファイルのnow.json
ページになるpages/index.jsx

package.json

まず NextJS がデプロイ先でインストールされるように、package.jsonを作る必要があります。中身はこんな感じです。

{
  "dependencies": {
    "next": "*"
  }
}

next.config.js

next.config.jsは NextJS の設定ファイルで、 Webpack の設定を弄ったり、静的サイトビルド時のパスといった設定をするファイルなのですが、今回は何もする必要がないので空オブジェクトを指定します。

module.exports = {
  target: 'serverless',
};

now.json

NextJS のデプロイには@now/nextを使います。またその場合srcにはnext.config.jsを指定します。

{
  "builds": [{"src": "next.config.js", "use": "@now/next"}]
}

pages/index.jsx

ページとなるファイルです。これはnext.config.jsが置かれているディレクトリにpages/というディレクトリを作りその中に置く必要があります。中には JSX でHello from NextJSと表示するように書きます。
この辺は now というより NextJS のルールです。

export default () => Hello from NextJS

デプロイ

そして、nowをただ実行するとデプロイが始まりDIR_NAME-xxxxxx.now.shという URL で見れるようになるはずです。そのページを開きこのように表示されれば完了です。