Next 13 - future plans - Is serverless-next.js dead?

[anonymouscatcher]

I just wanted to open this issue as a feature request. This project appears to be dead, and I need to migrate my current application to something new that is active and supports new NEXT JS features such as middleware, possibly Vercel! But I'd really like to know the status of this project. I know that the maintainers are very busy and don't have time to work on this project. Any plans for the future? Also, it would be nice to let us know If anyone has already migrated to something else, share your thoughts!

[anonymouscatcher]

@dphang @danielcondemarin

[mattbbc]

I'd advise moving to another method of deployment.

[vafPER]

We have the same problem here. Our Back-end is based on AWS serverless (C#) and our Front-end is based on Next and deployed on AWS too . We are eager to cooperate and teamwork for migration of our front-end with Anyone or any team who has the same problem so we can achieve a better result together and troubleshoot together along the way

[anonymouscatcher]

BANG, you cannot even deploy with next13 because of some errors that target is not supported anymore and invalid root options in next.config.js

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

[cmaerz]

https://github.com/serverless-nextjs/serverless-next.js/discussions/2439 Doesn't seem that project goes forward. Any other approaches to deploy NextJS to AWS?

[gregkonush]

seems to be dead 💀

[mattbbc]

2439 Doesn't seem that project goes forward. Any other approaches to deploy NextJS to AWS?

Docker on EC2.

[agnese-kerubina]

Dead is a strong statement. IMO It still is a very solid way to deploy v11/10 next.js , that is compatible up to current next version (have not checked recent v13, but it came out like couple of days ago), minus deployment sensitive features. You lose on some features, but you get self managed serverless way to deploy next app. I for one manage a project where these pros still outweigh the cons and the architecture provided here is perfect for my project - I am ready to embrace its quirks, so to speak.

If you need any of the deployment sensitive features from next, you can still add them here (provided they are compatible with architecture offered here), maintainer has been very open to contributions.

Thing is, Vercel is doing amazing work and only way to be truly up to speed with all they do is to either use architecture they provide or just do a server deployment (That is an easy backup plan if things truly go weird the js way).

[joyfulelement]

Next.js v13 have introduced React (v18) Server Components, and making it default for app/ directory. As it switches towards more emphases on SSR, I am too wonder how Next.js v13 app can be deployed to AWS while meeting the server runtime requirement? (Perhpas the generally assumption is lambda@edge with AWS CloudFront will continue support such runtime requirement for Next.js v13?) Would AWS Amplify eventually support it?

[fnavarrodev]

Next.js 13, Does it work on other platforms a part from Vercel? Maybe Netlify? Having it in running as a server on an EC2 is not the best scenario.

[kylekirkby]

@fnavarrodev this is the problem when falling into the open-source trap.

Next.js - A great open-source project that heavily relies on a commercial product to actually use most of the features...

[cmaerz]

You can easily deploy Next.js with a Docker Container to AWS Apprunner, AWS ECS / Fargate or Google Cloud Run.

For AWS just try: https://aws.github.io/copilot-cli/ https://github.com/vercel/next.js/tree/canary/examples/with-docker

You need a shared storage if you want to use ISR: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#self-hosting-isr

[fnavarrodev]

@cmaerz as far as I know those technologies are on not on the edge, but I could be wrong. I supose you can use cloudfront with a proper cache policy to minigate the latency to your AWS region

[cmaerz]

@fnavarrodev We use Cloudflare. On all this services you can deploy your Origin on multiple Regions. So this shouldn't be a problem.

[chrisFFL]

For those looking for a simple fix, I can confirm decrementing next and eslint-config-next to 12.x fixed this error for me.

Obviously there are tradeoffs to downgrading, but I was able to get this package to deploy my build as expected afterward.

[arpecop]

https://aws.amazon.com/blogs/mobile/amplify-next-js-13/

[uclaeamsavino]

https://aws.amazon.com/blogs/mobile/amplify-next-js-13/

I just came here to post that. We've been playing around with it and it looks promising.

Today, AWS Amplify Hosting announces Next.js 12 and 13 support. Your app can take advantage of Next.js features including server-side rendering (SSR), API routes, middleware, incremental static regeneration (ISR), and image optimization.

In combination with Next.js feature support, Amplify Hosting is improving the experience of running Next.js apps on AWS:

Faster builds. Next.js apps deploy at least 3x faster, helping developers deliver changes to production faster. Amazon CloudWatch integration. Server-side logs are delivered to Amazon CloudWatch, allowing teams to observe, monitor and troubleshoot their apps. Next.js apps work seamlessly with Amplify back-ends such as Authentication and Data. Fully managed hosting infrastructure reduces operational overhead for development teams, with fewer resources to manage in your AWS account. To learn more about pricing visit https://aws.amazon.com/amplify/pricing/. Follow the tutorial below to create and deploy your Next.js app to AWS with Amplify Hosting.

[ryanolee]

Just to note seems like serverless-components themselves are no longer directly supported by serverless :thinking: https://github.com/serverless/components

[TheManFromEarth1]

https://aws.amazon.com/blogs/mobile/amplify-next-js-13/

Does not support ISR yet, even though they say it does.

[khuezy]

Hi, if anyone else is interested in deploying on AWS (a lot more flexible/cost-effective than Vercel), consider using SST. The SST team is implementing its own version that's up to date w/ the latest NextJS version. You can find them on discord https://discord.com/invite/sst in the nextjs channel. Drop on by and asks questions. As of now, most nextjs features are supported/in development.

[trompx]

Hi, if anyone else is interested in deploying on AWS (a lot more flexible/cost-effective than Vercel), consider using SST. The SST team is implementing its own version that's up to date w/ the latest NextJS version. You can find them on discord https://discord.com/invite/sst in the nextjs channel. Drop on by and asks questions. As of now, most nextjs features are supported/in development.

A few links to:

• Their first project: https://sst.dev/examples/how-to-create-a-nextjs-app-with-serverless.html

• Their new project recently annouced: https://github.com/serverless-stack/open-next https://open-next.js.org/

[khuezy]

To add to those resources, if you'd like to get something up and running now, you can use this Construct: https://github.com/jetbridge/cdk-nextjs. cdk-nextjs-standalone will incorporate open-next once open-next is stable. The official SST Open-Nextjs Construct may or may not use cdk-nextjs-standalone, but it should be an easy replacement.

[arpecop]

Amplify build takes few minutes , I even optimised it shorter ... don't like the fact they provide expensive machine for the build process , you can always ship the .next directory pre-built

[fnavarrodev]

With Amplify and nx-cloud the build is quiet fast, I think now is faster that it was before with next.js 12 and serverless, but still slow compare with Vercel.

[khuezy]

Update: SST v2 NextjsSite construct has integrated w/ open-next. There's still a few things to iron out like middleware redirection and viewer request vs origin request policy.

But for the most part, it works great.

[suil]

Update: SST v2 NextjsSite construct has integrated w/ open-next. There's still a few things to iron out like middleware redirection and viewer request vs origin request policy.

But for the most part, it works great.

didn't see V2 in NextjsSuite documentation. could u share a link?

[khuezy]

@suil The doc for v2 isn't ready yet, but you can reference it on the sst2 branch: https://github.com/serverless-stack/sst/tree/sst2/packages/sst/src/constructs

example: https://github.com/serverless-stack/sst/tree/sst2/examples/nextjs-app

[suil]

so you mean still use `npx create-sst@latest my-project' to create a ss1 project. but import { NextjsSuite } from https://github.com/serverless-stack/sst/tree/sst2/packages/sst/src/constructs

right?

[khuezy]

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

[suil]

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

Thx it worked really well

[pencilcheck]

Looks like this setup require node16, which is hard because my project requires node14

(node:34405) UnhandledPromiseRejectionWarning: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'stream' imported from /project/node_modules/.pnpm/sst@2.0.0-rc.40_@types+react@18.0.26/node_modules/sst/stacks/metadata.js
    at new NodeError (internal/errors.js:322:7)
    at packageResolve (internal/modules/esm/resolve.js:687:9)
    at moduleResolve (internal/modules/esm/resolve.js:728:18)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36)

[khuezy]

Consider upgrading your node version. 14 is almost at its end of life.

[pencilcheck]

ok, I copied the project and used node16 as a template, now getting an error:

  SST v2.0.0-rc.40

  ➜  Stage:   persona

Error: "Symbol()" context was not provided.

Trace: Error: "Symbol()" context was not provided.
    at Object.use (file:///project/node_modules/.pnpm/sst@2.0.0-rc.40_@types+react@18.0.26/node_modules/sst/context/context.js:18:27)
    at useProject (file:///project/node_modules/.pnpm/sst@2.0.0-rc.40_@types+react@18.0.26/node_modules/sst/project.js:18:27)
    at new SsrSite (file:///project/node_modules/.pnpm/sst@2.0.0-rc.40_@types+react@18.0.26/node_modules/sst/constructs/SsrSite.js:69:28)
    at new NextjsSite (file:///project/node_modules/.pnpm/sst@2.0.0-rc.40_@types+react@18.0.26/node_modules/sst/constructs/NextjsSite.js:27:9)
    at EmptyStack.Web (file:///project/sst.config.1674189144392.mjs:14:7)
    at stack (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/sst@2.0.0-rc.40/node_modules/sst/constructs/FunctionalStack.js:20:35)
    at App.stack (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/sst@2.0.0-rc.40/node_modules/sst/constructs/App.js:512:16)
    at Object.stacks [as fn] (file:///project/sst.config.1674189144392.mjs:13:9)
    at Module.synth (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/sst@2.0.0-rc.40/node_modules/sst/stacks/synth.js:51:20)
    at async file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/sst@2.0.0-rc.40/node_modules/sst/cli/commands/deploy.js:37:24
    at process.<anonymous> (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/sst@2.0.0-rc.40/node_modules/sst/cli/sst.js:40:17)
    at process.emit (node:events:525:35)
    at processEmit [as emit] (/library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/signal-exit@3.0.7/node_modules/signal-exit/index.js:199:34)
    at process._fatalException (node:internal/process/execution:149:25)
    at processPromiseRejections (node:internal/process/promises:279:13)
    at processTicksAndRejections (node:internal/process/task_queues:97:32)

Need help with this error? Join the SST community on Discord https://sst.dev/discord
 ERROR  Command failed with exit code 1: /library/pnpm/store/v3/tmp/dlx-37462/node_modules/.bin/sst deploy

pnpm: Command failed with exit code 1: /library/pnpm/store/v3/tmp/dlx-37462/node_modules/.bin/sst deploy
    at makeError (/usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:22415:17)
    at handlePromise (/usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:22986:33)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.handler [as dlx] (/usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:193613:7)
    at async /usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:200906:21
    at async main (/usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:200877:34)
    at async runPnpm (/usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:201101:5)
    at async /usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:201093:7

The content of the 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) {
      return new NextjsSite(ctx.stack, "MyApp")
    });
  },
}

Already followed the instructions to setup awscli and also aws configure with the access key

node version 16.18.1

nextjs 13 (this might be the reason)

[pencilcheck]

I'm using this instead: https://www.reddit.com/r/nextjs/comments/yps1zh/deploying_nextjs_v13_to_aws/

Seems to deploy, now resolving some dep issues with build since it is using standalone output

[khuezy]

Hmm looks like you're using brew for your node installation? Try using nvm. I've had node issues with brew in the past. Also humor me and use node 18

[pencilcheck]

Hmm looks like you're using brew for your node installation? Try using nvm. I've had node issues with brew in the past. Also humor me and use node 18

I use nvm, and I switched to 18, still the same error

[khuezy]

Hmm looks like you're using brew for your node installation? Try using nvm. I've had node issues with brew in the past. Also humor me and use node 18

I use nvm, and I switched to 18, still the same error

at async /usr/local/Cellar/pnpm/7.15.0/libexec/dist/pnpm.cjs:201093:7 /usr/local/Cellar is usually from HomeBrew right?

I haven't had this issue, nor some folks above. Can you remove pnpm from your homebrew and install it via npm i -g pnpm? I'm guessing something in homebrew isn't meshing well w/ nvm.

[pencilcheck]

ok, just uninstalled pnpm and install from npm instead. Trying out from node 16 then node 18 again.

Node 16 failed the same way

Error: "Symbol()" context was not provided.

Trace: Error: "Symbol()" context was not provided.
    at Object.use (file:///project/node_modules/.pnpm/sst@2.0.0-rc.41_@types+react@18.0.26/node_modules/sst/context/context.js:18:27)
    at useProject (file:///project/node_modules/.pnpm/sst@2.0.0-rc.41_@types+react@18.0.26/node_modules/sst/project.js:18:27)
    at new SsrSite (file:///project/node_modules/.pnpm/sst@2.0.0-rc.41_@types+react@18.0.26/node_modules/sst/constructs/SsrSite.js:69:28)
    at new NextjsSite (file:///project/node_modules/.pnpm/sst@2.0.0-rc.41_@types+react@18.0.26/node_modules/sst/constructs/NextjsSite.js:27:9)
    at EmptyStack.Web (file:///project/sst.config.1674253974969.mjs:14:7)
    at stack (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/sst@2.0.0-rc.41/node_modules/sst/constructs/FunctionalStack.js:20:35)
    at App.stack (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/sst@2.0.0-rc.41/node_modules/sst/constructs/App.js:512:16)
    at Object.stacks [as fn] (file:///project/sst.config.1674253974969.mjs:13:9)
    at Module.synth (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/sst@2.0.0-rc.41/node_modules/sst/stacks/synth.js:51:20)
    at async file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/sst@2.0.0-rc.41/node_modules/sst/cli/commands/deploy.js:33:24
    at process.<anonymous> (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/sst@2.0.0-rc.41/node_modules/sst/cli/sst.js:40:17)
    at process.emit (node:events:525:35)
    at process.emit (node:domain:489:12)
    at process._fatalException (node:internal/process/execution:149:25)
    at processPromiseRejections (node:internal/process/promises:279:13)
    at processTicksAndRejections (node:internal/process/task_queues:97:32)

Need help with this error? Join the SST community on Discord https://sst.dev/discord
 ERROR  Command failed with exit code 1: sst deploy

pnpm: Command failed with exit code 1: sst deploy
    at makeError (/home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:23105:17)
    at handlePromise (/home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:23676:33)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.handler [as dlx] (/home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:215896:7)
    at async /home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:223487:21
    at async main (/home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:223456:34)
    at async runPnpm (/home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:223686:5)
    at async /home/.nvm/versions/node/v16.18.1/lib/node_modules/pnpm/dist/pnpm.cjs:223678:7

Node 18 also fail the same way (I made sure to uninstall pnpm from previous node version and switch and install again using nvm of course)

Perhaps the new sst@rc is broken?

---

Actually, looks like pnpx isn't working with sst. I switched to use npx sst deploy and it worked -- at least it get pass the error (for node 16)

This is weird...

[khuezy]

Hmm... I haven't ran into this. I'm doing npx sst deploy. Is pnpx sst deploy giving you that error?

[pencilcheck]

yea, pnpx error out, while npx worked.

---

On the slightly different topic, is there any tutorial or blog that talked about how to use this deploy? I saw tons of lambda functions and not sure how I can access the api routes for this deployment. I found the server handler URL but it doesn't work (it said server failed to respond)

[khuezy]

assuming you're using pages/api/etc, you can just hit it directly on your cloudfront url or domain url if you've configured a custom domain. eg: example.com/api/etc If you've created a separate API construct, you'll want to pass in: cdk.distribution.additionalBehaviors and map "/your-api/*": someBehavior

[pencilcheck]

assuming you're using pages/api/etc, you can just hit it directly on your cloudfront url or domain url if you've configured a custom domain. eg: example.com/api/etc If you've created a separate API construct, you'll want to pass in: cdk.distribution.additionalBehaviors and map "/your-api/*": someBehavior

thanks for your reply. i'm very new to this so I don't know what you mean by cloudfront url.

I used /pages/api/etc and I don't think I have custom domain since I only just deploy this.

[khuezy]

No problem, happy to help. When you deploy, it uses CloudFront to distribute your app. If you go to your AWS console and navigate to CloudFront, you should see your distribution. Under the "Domain Name" column, you should see something like this: <some id>.cloudfront.net. You can hit your APIs by <some id>.cloudfront.net/api/hello

[pencilcheck]

I see. I found the url in cloudfront, but unfortunately it still said server failed to respond. not sure why. i wonder where I can see the server log for the cloudfront access

nvm, I think I found them in cloudwatch

[sladg]

👋 was pointed to this discussion.

There seems to be zero support and communication from creators of this package, so I took it and implemented more flexible and leaner version :) feel free to give it a shot: https://github.com/sladg/nextjs-lambda

Used on production for past 6 month, works like a charm 💙 hope it helps someone

[mattbbc]

👋 was pointed to this discussion.

There seems to be zero support and communication from creators of this package, so I took it and implemented more flexible and leaner version :) feel free to give it a shot: https://github.com/sladg/nextjs-lambda

Used on production for past 6 month, works like a charm 💙 hope it helps someone

What's the migration process like for users of serverless-nextjs?

[sladg]

@mattbbc just delete everything serverless-nextjs related and do:

In your NextJS project, set output to standalone.
Run next build (will generate standalone next folder).
Run npx --package @sladg/nextjs-lambda cli pack (will create ZIPs).
Run npx --package @sladg/nextjs-lambda cli deploy (will deploy to AWS).
Profit 🎉

There are some limitations, coming mainly from NextJS's standalone option. Primarily: you must use npm and experimental features are not supported much. At the same time, .babelrc not work with standalone. ISR and regeneration is not supported for now (not tested).

So depends on your application really. But 90% of projects and users should be fine.

[mattbbc]

I guess what I'm wondering is how to manage a project with serverless.yml configs for different deployment environments that co-ordinate S3 buckets and Cloudfront configuration - region, domains, aliases, ACLs, certificates, header forwarding and so on. Can you configure that with this, or is it something that should just be handled in the AWS console?

[sladg]

I guess what I'm wondering is how to manage a project with serverless.yml configs for different deployment environments that co-ordinate S3 buckets and Cloudfront configuration - region, domains, aliases, ACLs, certificates, header forwarding and so on. Can you configure that with this, or is it something that should just be handled in the AWS console?

You can extends CDK constructs provided or alter resources created via CLI in Serverless, the options are really unlimited I would say 😁

PS. Cloudfront, Route53, routing, headers are all managed by default so you don't need to tweak it if you don't need to.

[uclaeamsavino]

I guess what I'm wondering is how to manage a project with serverless.yml configs for different deployment environments that co-ordinate S3 buckets and Cloudfront configuration - region, domains, aliases, ACLs, certificates, header forwarding and so on. Can you configure that with this, or is it something that should just be handled in the AWS console?

Here's how we do it.

First run in a new environment:

1. Run serverless command to build and deploy the app
2. Sync everything in the .serverless folder to an S3 bucket

Subsequent runs in an environment:

1. Sync the .serverless folder from the S3 bucket used above to the build environment
2. Run serverless command to build and deploy the app
3. Sync everything in the .serverless folder back to the S3 bucket

Once you let serverless create the cloudfront, edge lambdas, etc. - you can add certs, custom cloudfront settings and the like. The serverless job won't overwrite them unless you run serverless remove. Just don't change the names of anything.

This is our serverless.yml:

# need to run command: serverless - locally once for each environment, then add contents of .serverless folder to s3 cicd cache for that environment (see README)

pocD12Web:
  component: "@sls-next/serverless-component@3.6.0"
  inputs:
    build:
      env:
        REACT_APP_API_GATEWAY_HOST: ${env.REACT_APP_API_GATEWAY_HOST}
        REACT_APP_USER_POOL_ID: ${env.REACT_APP_USER_POOL_ID}
        REACT_APP_USER_POOL_WEB_CLIENT_ID: ${env.REACT_APP_USER_POOL_WEB_CLIENT_ID}
        REACT_APP_USER_POOL_DOMAIN: ${env.REACT_APP_USER_POOL_DOMAIN}
        REACT_APP_USER_POOL_REGION: ${env.REACT_APP_USER_POOL_REGION}
        REACT_APP_ENABLE_TEST_WALKTHROUGHS: ${env.REACT_APP_ENABLE_TEST_WALKTHROUGHS}

This our buildspec.yml for AWS codebuild:

version: 0.2

phases:
  install:
    commands:
      - echo CURRENT_ENVIRONMENT=${CURRENT_ENVIRONMENT}
      - npm install -g serverless@2.72.2
      - npm install

  pre_build:
    commands:
      - aws s3 sync s3://xxx/app-d12_next_web/${CURRENT_ENVIRONMENT}/.serverless .serverless --delete

  build:
    commands:
      - npm run deploy-${CURRENT_ENVIRONMENT}
      - aws s3 sync .serverless s3://xxx/app-d12_next_web/${CURRENT_ENVIRONMENT}/.serverless --delete

And the npm command in package.json:

"deploy-dev": "env-cmd .env.development serverless --debug",