Next.js 13 を AWS amplify にデプロイできないあなたへ

2022年11月2日現在、AWS amplify は Next.js 13 には対応していないようなのでビルドが失敗します。そのためには Next.js 12 を使わないといけないのでその手順になります。

Next.js 13 を使うとどうなるか

このようにプロジェクトを作成し

$ npx create-next-app@latest --ts nextjs-sample

AWS amplify で Github への関連付けを行って設定するとエラーがでます。

2022-11-01T22:40:04.495Z [ERROR]: [?25h[G[J
                                  133s › d1iu91szokw8xx › Error: Command failed with exit code 1: node_modules/.bin/next build
                                  warn  - Invalid next.config.js options detected:
                                  - The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
                                  See more info here: https://nextjs.org/docs/messages/invalid-next-config
                                  > Build error occurred
                                  Error: The "target" property is no longer supported in next.config.js.
                                  See more info here https://nextjs.org/docs/messages/deprecated-target-config
                                  at Object.loadConfig [as default] (/codebuild/output/src321412884/src/cabo2-nextjs/node_modules/next/dist/server/config.js:97:19)
                                  at async Span.traceAsyncFn (/codebuild/output/src321412884/src/cabo2-nextjs/node_modules/next/dist/trace/trace.js:79:20)
                                  at async /codebuild/output/src321412884/src/cabo2-nextjs/node_modules/next/dist/build/index.js:68:28
                                  at async Span.traceAsyncFn (/codebuild/output/src321412884/src/cabo2-nextjs/node_modules/next/dist/trace/trace.js:79:20)
                                  at async Object.build [as default] (/codebuild/output/src321412884/src/cabo2-nextjs/node_modules/next/dist/build/index.js:64:29)
                                  [G[?25h
Terminating logging...

next.config.js に target という項目を使うなというエラーだけど、そんなもの使ってないです。

どうやら AWS amplify はまだ Next.js 13 には対応していないので 12 を使わないといけないようです。（そんなことどこにも書いてないから分からないよ）

Next.js 12 を使う

まずは package.json を編集しましょう。

{
  "name": "nextjs-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "next": "13.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  }
}

"next": "13.0.1", を "next": "12.3.2", に変更します。

そして、package-lock.json を削除して npm install で　package-lock.json を再生成して、git commmit git push します。

$ rm package-lock.json
$ npm install
$ git add .
$ git commit -m "Change to Next.js 12"
$ git push

これで無事にビルドが通るはずです！