Faust.jsを利用したNext.jsアプリをVercelにデプロイした時の覚書です。

Vercelでのデプロイ設定

Vercelにアプリをデプロイするには、少なくとも２つの設定作業が必要です。

設定1: 環境変数を設定する

ローカルでの開発をはじめる際、２つの環境変数を設定します。

Replace the NEXT_PUBLIC_WORDPRESS_URL value with the URL of your WordPress site. Additionally, grab the Headless Secret from WordPress Settings -> Headless and replace it with the FAUSTWP_SECRET_KEY value.

https://faustjs.org/docs/tutorial/setup-faustjs#create-envlocal

• FAUSTWP_SECRET_KEY
• NEXT_PUBLIC_WORDPRESS_URL

Vercel上でも利用する必要がありますので、管理画面から設定しましょう。

VercelではGitのブランチごとに環境変数を設定できます。

テスト環境と本番環境で別のWordPressを使いたい場合などでは、こちらも活用しましょう。

設定2: ビルドコマンドを変更する [Optional]

Faust.jsはGraphQL APIへのアクセスにGQtyを利用します。

Finally, run the generate script:

npm run generate

https://faustjs.org/docs/tutorial/setup-faustjs#configure-gqty

client/schema.generated.tsファイルをGit管理していない場合、ビルドコマンドを以下のように変更しましょう。

// Before
$ npm run build

// After
$ npm run generate && npm run build

「Gitリポジトリに追加されていない」かつ「npm run generateを実行していない」場合、ファイルが不足しているとエラーが表示されます。

デプロイ前に、手元でビルドしてみよう

これはNext.jsの仕様ですが、ビルド時にLintが走ります。

そのため、mapを利用したコンポーネントにkeyをつけ忘れたりすると、Lintエラーでビルドが失敗します。

28:6  Warning: React Hook useMemo has a missing dependency: 'currentPage'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
53:13  Error: Missing "key" prop for element in iterator  react/jsx-key
76:17  Error: Missing "key" prop for element in iterator  react/jsx-key
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Error: Command "npm run generate && next build" exited with 1

npm run devだけではLintエラーに気づきにくいため、Lintまたはビルドが動くことを手元で確認してからPushすることをお勧めします。