create-next-appでNext.jsプロジェクトを作成してNetlifyにデプロイする

Next.jsの公式ドキュメントには手動でプロジェクトを作る方法が紹介されています。が、GitHubのREADMEを見るとセットアップ系のコマンドがある様子なので使ってみました。

セットアップ

createすることがメインですので、npxでさっと実行しちゃいましょう。

$ npx create-next-app my-first-next-app

ちなみにオプションは以下の通りです。バージョンやyarn or npmの指定などができる様子です。

$ npx create-next-app --help
Usage: create-next-app <project-directory> [options]

Options:
  -V, --version                 output the version number
  --use-npm                     
  -e, --example <example-path>  an example to bootstrap the app with
  -h, --help                    output usage information

ディレクトリ構成

生成されたファイルの構成はこちらです。

$ tree -I node_modules
.
├── components
│   └── nav.js
├── package.json
├── pages
│   └── index.js
├── public
│   └── favicon.ico
└── yarn.lock

3 directories, 5 files

pagesにindex.jsだけがある、ペライチのアプリケーション構成です。

ServerlessにNext.jsのアプリケーションをホストする

Next.jsはNuxtなどと同じく、サーバー機能を持っています。デフォルトのユースケースでは、Node.jsのサーバー上で動かすイメージです。

しかしNetlifyのようなサーバー側の機能を利用できないホスティング環境では、この方法は使えません。

そのため、Next.jsで構築したアプリをNetlifyでホストする場合、静的に出力させる必要があります。

Next.jsの場合は、next exportで静的に出力することができますので、こちらを使います。

$ ./node_modules/.bin/next build
Creating an optimized production build  

Compiled successfully.

Automatically optimizing pages  

Page                    Size
─ ○ /                   6.24 kB
+ shared by all         69.8 kB
  ├ chunks/commons.js   64.3 kB
  ├ runtime/main.js     4.76 kB
  └ runtime/webpack.js  746 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

$ ./node_modules/.bin/next export
> using build directory: /Users/develop/next-app/.next
  copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
  launching 7 workers
  copying "public" directory
Exporting (3/3)

Export successful

exportしたファイルは、デフォルトだとoutディレクトリに配置されます。

$ tree out  -L 2
out
├── 404.html
├── _next
│   ├── Kjlg_gpNQzBWDgi01N8ge
│   └── static
├── favicon.ico
└── index.html

3 directories, 3 files

Netlifyへのデプロイ準備

Netlify上でnext.jsのアプリをビルドしてデプロイする形をとります。そのための各種設定をnetlify.tomlで実施します。

[build]
  base = "/"

  # next exportの出力先
  publish = "out/"

  # next buildからのnext exportでファイル生成
  command = "yarn run build && yarn run export"

[context.production]
  command = "NODE_ENV=production yarn run build && yarn run export"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

おわりに

プロジェクトを作成して、Netlifyにアップするまでの手順をまとめました。

Netlifyだけでなく、AWS AmplifyはFirebase Hostingなどにも応用できるとは思います。