Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
anonymouscatcher opened this issue Oct 26, 2022 · 61 comments
Open

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

anonymouscatcher opened this issue Oct 26, 2022 · 61 comments

Comments

@anonymouscatcher
Copy link

anonymouscatcher commented Oct 26, 2022

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
Copy link
Author

@dphang @danielcondemarin

@mattbbc
Copy link

mattbbc commented Oct 26, 2022

I'd advise moving to another method of deployment.

@vafPER
Copy link

vafPER commented Oct 26, 2022

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
Copy link
Author

anonymouscatcher commented Oct 26, 2022

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
Copy link
Contributor

cmaerz commented Oct 27, 2022

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

@gregkonush
Copy link

seems to be dead 💀

@mattbbc
Copy link

mattbbc commented Nov 2, 2022

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

Docker on EC2.

@agnese-kerubina
Copy link

agnese-kerubina commented Nov 3, 2022

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
Copy link

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
Copy link

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
Copy link

@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
Copy link
Contributor

cmaerz commented Nov 17, 2022

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
Copy link

@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
Copy link
Contributor

cmaerz commented Nov 17, 2022

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

@chrisFFL
Copy link

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
Copy link

arpecop commented Nov 18, 2022

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

@uclaeamsavino
Copy link

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
Copy link

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

@TheManFromEarth1
Copy link

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

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

@khuezy
Copy link

khuezy commented Dec 5, 2022

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
Copy link

trompx commented Dec 14, 2022

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:

@khuezy
Copy link

khuezy commented Dec 14, 2022

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
Copy link

arpecop commented Dec 14, 2022

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
Copy link

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
Copy link

khuezy commented Jan 6, 2023

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
Copy link

suil commented Jan 17, 2023

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
Copy link

khuezy commented Jan 17, 2023

@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
Copy link

suil commented Jan 18, 2023

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
Copy link

khuezy commented Jan 18, 2023

  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")
    });
  },
}
  1. run npx sst deploy

@pencilcheck
Copy link

pencilcheck commented Jan 20, 2023

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/[email protected]_@[email protected]/node_modules/sst/context/context.js:18:27)
    at useProject (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/sst/project.js:18:27)
    at new SsrSite (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/sst/constructs/SsrSite.js:69:28)
    at new NextjsSite (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/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/[email protected]/node_modules/sst/constructs/FunctionalStack.js:20:35)
    at App.stack (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/sst/stacks/synth.js:51:20)
    at async file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/[email protected]/node_modules/sst/cli/commands/deploy.js:37:24
    at process.<anonymous> (file:///library/pnpm/store/v3/tmp/dlx-37462/node_modules/.pnpm/[email protected]/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/[email protected]/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
Copy link

pencilcheck commented Jan 20, 2023

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
Copy link

khuezy commented Jan 20, 2023

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
Copy link

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
Copy link

khuezy commented Jan 20, 2023

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
Copy link

pencilcheck commented Jan 20, 2023

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/[email protected]_@[email protected]/node_modules/sst/context/context.js:18:27)
    at useProject (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/sst/project.js:18:27)
    at new SsrSite (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/sst/constructs/SsrSite.js:69:28)
    at new NextjsSite (file:///project/node_modules/.pnpm/[email protected]_@[email protected]/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/[email protected]/node_modules/sst/constructs/FunctionalStack.js:20:35)
    at App.stack (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/sst/stacks/synth.js:51:20)
    at async file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/[email protected]/node_modules/sst/cli/commands/deploy.js:33:24
    at process.<anonymous> (file:///library/pnpm/store/v3/tmp/dlx-97964/node_modules/.pnpm/[email protected]/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
Copy link

khuezy commented Jan 20, 2023

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

@pencilcheck
Copy link

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
Copy link

khuezy commented Jan 20, 2023

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
Copy link

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
Copy link

khuezy commented Jan 20, 2023

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
Copy link

pencilcheck commented Jan 20, 2023

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
Copy link

sladg commented Feb 15, 2023

👋 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
Copy link

mattbbc commented Feb 16, 2023

👋 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
Copy link

sladg commented Feb 16, 2023

@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
Copy link

mattbbc commented Feb 16, 2023

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
Copy link

sladg commented Feb 16, 2023

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
Copy link

uclaeamsavino commented Feb 16, 2023

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/[email protected]"
  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 [email protected]
      - 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",

@yehonadav-feel
Copy link

there's a nice article here: https://dev.to/kumo/deploying-nextjs-13-with-amplify-cdk-1dgd on how to deploy next 13 with cdk and amplify, you can also check out swarmion with you wanna use a monorepo https://github.com/swarmion/swarmion/tree/main/examples/swarmion-with-next
pnpm create swarmion-app and choose the Next.js option

@juliocorzo
Copy link

New project for Next.js 13 I've been using: https://github.com/serverless-stack/open-next

It packages the .next folder in two Lambdas (server and image optimization), on Edge Lambda (middleware), and assets, just like this does, with the big difference that image optimization and the default Lambda are no longer edge, but that is not a big problem, considering that you should be caching using CloudFront anyways.

This begs the question though, is edge Next.js really worth the pain in AWS if it requires weeks of research and implementation that has the potential of becoming stale due to relying on open-source projects that can be easily abandoned?

I've been thinking a lot about that lately.

For context, I've used this in a large production application for about a year now, adding ISR on our own when we needed it. But as a developer and a devops engineer, I think I'd sleep better at night if I was deploying to Vercel or to Docker, because I know that version changes won't completely lock me to a lower version of Next.js.

@khuezy
Copy link

khuezy commented Feb 28, 2023

@juliocorzo I'd recommend using NextjsSite from sst (who manages open-next). And of course you'll get the latest features from Vercel but you'd be paying a premium for that.

@erikkri
Copy link

erikkri commented Mar 13, 2023

This might be useful for people looking to deploy next-js on serverless: https://github.com/awslabs/aws-lambda-web-adapter

@emyriounis
Copy link

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

@patricktyndall
Copy link

Seems like SST -- specifically, using NestjsSite (which uses their open-next) -- is the smart choice. Thanks to all for testing, going to give it a try.

Only question so far: Has anyone actually moved their prod site/domain over? Are there any gotchas, or is it just a matter of pointing your A record to the new Cloudfront URL?

@juliocorzo
Copy link

@patricktyndall If you're moving from this solution to SST, it won't be as simple, because, as far as I know, SST assumes you're going to be using Next.js 13. The transition from 12 to 13 is not as straightforward.

Additionally, your deployment infrastructure will also change, while the general idea will be the same. It depends on how you plan to deploy prod changes (via SST CLI or via CodePipeline, or both.)

I'd like to echo what I said in February (despite it sounding like a defeatist stance.) If you want to adopt the latest and greatest in Next.js, do not go for a serverless solution. Go for ECS or Vercel. Next.js 14 just got announced and I worry that serverless solutions will not give you all the functionality that was added soon.

@mluksch
Copy link

mluksch commented Nov 1, 2023

it is possible to use aws-lambda-adapter as a general solution for webservers within lambdas: https://github.com/awslabs/aws-lambda-web-adapter But one needs to package nextjs as docker image to lambda service. At least it works with nextjs 13 but most likely will also work for 14 since it is just running nextjs within a docker container basically. For low budget hobby projects I find it great where longer cold starts are not a deal breaker.

@khuezy
Copy link

khuezy commented Nov 1, 2023

At that point you might as well use fly.io which can scale your containers to 0 unlike AWS.

@patricktyndall
Copy link

@juliocorzo thanks for flagging the Next >=13 requirement with SST (though I haven't found concrete docs on this requirement and am tempted to try it with 12). Deploying via SST CLI from our own CI setup seems best -- I see no reason to directly integrate source control tools with deployment tools.

Either way, in our case, the benefits of a serverless deployment to our own AWS cloud are hard to beat. We're happy to remain a few months behind Next.js for new features (we usually wait anyways), as long as we know that the project is well-supported and will get there eventually.

You're probably right that deploying using vercel or our own containers is probably the more "mature" solution though. I just think that the full benefits of next.js (which is OSS) -- specifically the ability to leverage serverless/CDNs for static pages -- shouldn't be coupled to a single company (and shouldn't cost you control of your own architecture). I also don't think non-edge lambda is a real contender for webserver if latency is a concern

@khuezy
Copy link

khuezy commented Nov 2, 2023

You can still use next12 w/ SST, but there might be some gotchas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests