Next.js v13 support

[R-Bower]

After upgrading to Next.js 13, I get the following error during tf-next build:

Running "pnpm run vercel-build"

> @my-app@1.9.26 vercel-build /private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP
> 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] (/private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP/node_modules/.pnpm/next@13.0.0_qtpcxnaaarbm4ws7ughq6oxfve/node_modules/next/dist/server/config.js:97:19)
    at async Span.traceAsyncFn (/private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP/node_modules/.pnpm/next@13.0.0_qtpcxnaaarbm4ws7ughq6oxfve/node_modules/next/dist/trace/trace.js:79:20)
    at async /private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP/node_modules/.pnpm/next@13.0.0_qtpcxnaaarbm4ws7ughq6oxfve/node_modules/next/dist/build/index.js:68:28
    at async Span.traceAsyncFn (/private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP/node_modules/.pnpm/next@13.0.0_qtpcxnaaarbm4ws7ughq6oxfve/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/private/var/folders/44/lsxcxj6j493dcwvsxtb91jm403n6g6/T/tmp-38705-hueF4gn7GyTP/node_modules/.pnpm/next@13.0.0_qtpcxnaaarbm4ws7ughq6oxfve/node_modules/next/dist/build/index.js:64:29)
 ELIFECYCLE  Command failed with exit code 1.

[khuezy]

Version 13 removed the deprecated target: serverless (See notes: https://github.com/vercel/next.js/releases/tag/v13.0.0) Nextjs likes to break things on every major release, so it's extremely hard for frameworks like this to keep up. Hopefully things are better moving forward though.

Unfortunately the maintainer isn't active on this project, and I'd recommend this project: https://github.com/jetbridge/sst-prisma. They are using serverless-nextjs, which its maintainer also went AWOL... but the SST team is working on implementing their own nextjs standalone deployment (see: https://github.com/jetbridge/cdk-nextjs).

That project is still WIP, but the maintainer is very active. The amplify-hosting team is working on a solution too: https://github.com/aws-amplify/amplify-hosting/issues/2343.

It looks like we're going to have to wait til sometime next year to having a working system.

[khuezy]

Felix now works at Vercel (darn Vercel for poaching everyone... serverless-nextjs and now our beloved Felix). https://twitter.com/ofhouse/status/1590133247823921152

If anyone is interested in another serverless framework, I'd recommend https://github.com/jetbridge/sst-prisma. One of the contributors has made great progress on the standalone nextjs component. We are able to deploy nextjs 13 via SST. Join and ask questions on https://discord.com/channels/983865673656705025/1027265626085019769

Hopefully the Vercel guys don't see this and poach them too.

[R-Bower]

@khuezy I've tried to replicate the nextjs deployment but am seeing some build errors. Tried to join the discord but the link you provided takes me to a broken server.

[khuezy]

@R-Bower https://discord.gg/sst Nextjs channel

[stamatim]

Having this issue as well. Particularly the:

Error: The "target" property is no longer supported in next.config.js.

I do not have any "target" property in my nextjs.config.js file...

/**
 * @type {import('next').NextConfig}
 */
module.exports = {
  output: 'standalone',
  images: {
    domains: [
      'images.unsplash.com',
    ],
  },
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
          },
        ],
      },
    ];
  },
};

[khuezy]

@stamatim Hey, target: serverless has been removed in NextJS 13+. The target properly is set under the hood of this library to generate the build. I'd recommend moving away from this terraform library and into sst: https://discord.gg/sst (as this is no longer being maintained). There is a new initiative called open-next that aims to standardize nextjs deployments across various cloud providers.

eg:

1. create a new Next.js app npx create-next-app@latest
2. go into the Next.js app and install npm install --save-dev sst@rc
3. add an sst.config.js
import { NextjsSite } from "sst/constructs"

export default {
  config: () => ({
    name: "my-app",
    region: "us-east-1",
  }),
  stacks: async (app) => {
    app.stack(function Web(ctx) {
      new NextjsSite(ctx.stack, "MySite")
    });
  },
}

4. run npx sst deploy

[ajollie]

@R-Bower hey just wanted to check did you manage to find any solution ? Thanks

[R-Bower]

@R-Bower hey just wanted to check did you manage to find any solution ? Thanks

I went with @khuezy's recommendation and that's been working well for me.

[ajollie]

@R-Bower ok great. Thanks

[emyriounis]

Hi everyone. With my team, we created a terraform module to deploy next.js apps on AWS. (we support next.js v13, soon v14 too)

Feel free to try it