How to create a Next.js app with serverless

Chapter Comments
1

Link to chapter — https://serverless-stack.com/examples/how-to-create-a-nextjs-app-with-serverless.html

2

Hello…I am getting this a 503 error when deploying to prod with this nextjs example…any ideas on what I can do to fix this… “The Lambda function associated with the CloudFront distribution is invalid or doesn’t have the required permissions. We can’t connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.”

3

The CloudFront distribution might take a bit to update. How long ago did you deploy this btw?

4

Hello…I just re-deployed it about 10 minutes ago…12:45 pm PST. It says in the cloudformation console that the update completed but still getting this 503 error when I click on the cloudfront url…should I try to invalidate the cloudfront distribution maybe?

5

Screen Shot 2021-12-06 at 1.26.25 PM
Screen Shot 2021-12-06 at 1.26.25 PM1914×280 49.6 KB

6

That’s weird. It should clear it out by now.

7

Hi Jay,

I’m getting the same error after going through the sample. It turns out that the lambda@edge function is crashing due to a missing webpack-api-runtime.js reference.

Here’s the error from CloudWatch.

“errorMessage”: “Cannot find module ‘…/…/webpack-api-runtime.js’\nRequire stack:\n- /var/task/pages/api/count.js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js”,

Any ideas on how to get past this?

Thanks!

8

Hmm that’s strange, maybe pop over to our Slack and see if other folks have this issue: https://serverless-stack.com/slack

9

Awesome guide, got everything working, project builds and deploys no problem. However when trying to deploy with Seed, it fails at building the Nextjs site. I’m using the same Node version Seed uses locally.

I have 2 projects I can’t seem to deploy, here are the Seed logs
My first project:

Building Next.js site frontend
Error: There was a problem building the "Site" NextjsSite.
    at NextjsSite.buildApp (/tmp/seed/source/node_modules/@serverless-stack/resources/src/NextjsSite.ts:607:13)
    at new NextjsSite (/tmp/seed/source/node_modules/@serverless-stack/resources/src/NextjsSite.ts:149:16)
    at new MyStack (/tmp/seed/source/stacks/MyStack.ts:32:18)
    at Object.main (/tmp/seed/source/stacks/index.ts:10:3)
    at Object.<anonymous> (/tmp/seed/source/.build/run.js:94:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
There was an error synthesizing your app.

This exact guide’s project:


Building Next.js site frontend
Error: Command failed with ENOENT: ./node_modules/.bin/next build
spawn ./node_modules/.bin/next ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:467:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn ./node_modules/.bin/next',
  path: './node_modules/.bin/next',
  spawnargs: [ 'build' ],
  originalMessage: 'spawn ./node_modules/.bin/next ENOENT',
  shortMessage: 'Command failed with ENOENT: ./node_modules/.bin/next build\n' +
    'spawn ./node_modules/.bin/next ENOENT',
  command: './node_modules/.bin/next build',
  escapedCommand: '"./node_modules/.bin/next" build',
  exitCode: undefined,
  signal: undefined,
  signalDescription: undefined,
  stdout: '',
  stderr: '',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
There was a problem building the "NextSite" NextjsSite.
Failed to get tree.json file: Error: .build/cdk.out/tree.json: ENOENT: no such file or directory, open '.build/cdk.out/tree.json'
There was an error synthesizing your app.
ERROR: spawn ./node_modules/.bin/next ENOENT

Seems to be a problem with npm, I just can’t quite figure it out.

10

Might be better if you pop over on Slack for this one Redirecting…

11

Ran into the same

Building Next.js site frontend
Error: Command failed with ENOENT: ./node_modules/.bin/next build

The fix is to update next in frontend/package.json to 11.1.4. Was able to successfully run

npx sst deploy

after that.