AWS AmplifyでNext.jsを12から13に上げた際のトラブルシューティングメモ

要約

• Amplify の platformがWEB_DYNAMICになっているので、WEB_COMPUTE に変更したらうまくいった

事象

Next.jsを12から13に更新後にデプロイで以下のようなエラーになる

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/src659395015/src/yorudokimayu-info/node_modules/next/dist/server/config.js:96:19)
                                  at async Span.traceAsyncFn (/codebuild/output/src659395015/src/yorudokimayu-info/node_modules/next/dist/trace/trace.js:79:20)
                                  at async /codebuild/output/src659395015/src/yorudokimayu-info/node_modules/next/dist/build/index.js:69:28
                                  at async Span.traceAsyncFn (/codebuild/output/src659395015/src/yorudokimayu-info/node_modules/next/dist/trace/trace.js:79:20)
                                  at async Object.build [as default] (/codebuild/output/src659395015/src/yorudokimayu-info/node_modules/next/dist/build/index.js:65:29)
                                  at makeError (/root/.//node_modules/execa/lib/error.js:60:11)
                                  at handlePromise (/root/.//node_modules/execa/index.js:118:26)
                                  at processTicksAndRejections (node:internal/process/task_queues:96:5)
                                  at async Builder.build (/root/.//node_modules/@sls-next/lambda-at-edge/dist/build.js:377:13)
                                  at async NextjsComponent.build (/root/.//node_modules/@sls-next/-component/dist/component.js:165:13)
                                  at async NextjsComponent.default (/root/.//node_modules/@sls-next/-component/dist/component.js:22:13)
                                  at async fn (/root/.npm/_npx/780a6c1398234b48/node_modules/@/template/utils.js:280:41)
                                  at async Promise.all (index 0)
                                  at async executeGraph (/root/.npm/_npx/780a6c1398234b48/node_modules/@/template/utils.js:294:3)
                                  at async Template.default (/root/.npm/_npx/780a6c1398234b48/node_modules/@/template/.js:67:38)
                                  at async Object.runComponents (/root/.npm/_npx/780a6c1398234b48/node_modules/@/cli/src/index.js:222:17) {
                                  shortMessage: 'Command failed with exit code 1: node_modules/.bin/next build',
                                  command: 'node_modules/.bin/next build',
                                  escapedCommand: '"node_modules/.bin/next" build',
                                  exitCode: 1,
                                  signal: undefined,
                                  signalDescription: undefined,
                                  stdout: '',
                                  stderr: 'warn  - Invalid next.config.js options detected: \n' +
                                  '  - 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).\n' +
                                  '\n' +
                                  'See more info here: https://nextjs.org/docs/messages/invalid-next-config\n' +
                                  '\n' +

その際のnext.config.jsは

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["ja", "en"],
    defaultLocale: "ja",
  }
}

module.exports = nextConfig

で、エラーメッセージにあったtargetというプロパティは一切入ってない。

原因

初回のAWS Amplifyの構築時にSSRを将来的に使おうと思って SSRサポートありのプラットフォーム (WEB_DYNAMIC) を選択している。
WEB_DYNAMIC は Amplify Hositingの独自SSRサポート。

解決方法

プラットフォームをWEB_COMPUTE にする。

公式ドキュメント

↑はAWS CLIを使っているが、AWSのManagementConsoleにプラットフォーム変更の案内が出ているのでそちらからも実行可能。