Next.js Discord

Discord Forum

404 error with AWS Amplify and Next.js 14 deployment

Answered
Masai Lion posted this in #help-forum
Open in Discord
Avatar
Masai LionOP
I'm having trouble with deploying my Next.js 14 app on AWS Amplify. Everything works fine on my local machine, but when I deploy to Amplify, I receive a "Failed to load resource: the server responded with a status of 404 ()" error.

Here's what I've done so far:

Configured my Amplify project to use a custom build image with support for Next.js 14 features (amplify:al2023).

Ensured that all my routes and resource links are correct and working locally.

Checked my build settings on Amplify to make sure the base directory and artifact settings are correctly pointing to my .next folder.

Here is my amplify.yml file:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 20
        - nvm use 20
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
image:
  buildImage: 'amplify:al2023'


Despite this, I keep getting a 404 error when accessing the website, and I can't seem to figure out why. Has anyone else encountered this issue, or does anyone have any insights on what might be going wrong?

Any help or guidance would be greatly appreciated!

41 Replies

Avatar
require("anay-208")
are you using amplify gen2?
Avatar
Masai LionOP
Nope. I'm recreating the app using gen 2 now...
Avatar
require("anay-208")
ignore it, I'm sending you new content for amplify.yml
use this
Avatar
Masai LionOP
It solved the problem with 404, but it's giving a 500 now
Image
Image
Avatar
require("anay-208")
If you’ve a git repo, that’d help
Avatar
Masai LionOP
I just make it public 🙂

https://github.com/yohanaff/yohanaf-dev
Avatar
require("anay-208")
Alr, I'll check
Avatar
Masai LionOP
tnx
Avatar
require("anay-208")
where is the amplify.yml
Avatar
Masai LionOP
I edited the amplify.yml in build settings on AWS console
Avatar
require("anay-208")
its best to add it to git repo
amplify.yml
Avatar
Masai LionOP
Do you wanna me to add it to the git repo?
Avatar
require("anay-208")
You can add it later on
Avatar
Masai LionOP
okay
Avatar
require("anay-208")
I've forked the repo & I'm testing it by deploying on amplify. I'll let you know if I find the issue(if any).
and you're using amplify gen2 only, right?
Avatar
Masai LionOP
yup, I'm using amplify gen2
Avatar
require("anay-208")
was your build successful in Aws amplify console?
Avatar
Masai LionOP
Yes. But I had to use the amazon linux 2023 image
Avatar
require("anay-208")
how did you change the image in amplify console?
Avatar
Masai LionOP
Strange. The UI changed and I can't find where I changed the image, but it was in build settings. But you can change the image by adding
image:
  buildImage: 'amplify:al2023'

in the yml file
Avatar
require("anay-208")
can you send the full yml file?
Avatar
Masai LionOP
version: 1
backend:
  phases:
    build:
      commands:
        - nvm install 20
        - nvm use 20
        - npm ci
        - npx amplify pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
image:
 buildImage: 'amplify:al2023'
Avatar
require("anay-208")
Once its deployed, I'll see the error.
Avatar
Masai LionOP
exactly
I think there is something to do with the middleware.ts
Avatar
require("anay-208")
I once remember seeing something related to middlewares on the doc, let me see
Avatar
require("anay-208")
Did you got this error while building on amplify?
49

2024-01-14T16:28:20.481Z [INFO]: # Executing command: npm ci

50

2024-01-14T16:28:20.481Z [WARNING]: node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)

51

node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)

52

2024-01-14T16:28:20.482Z [ERROR]: !!! Build failed
I just believe its a problem on amplify end, due to the latest stable version. the last stable version didn't had any issues
I believe its a problem on amplify end, even if I try to deploy nextjs-starter app, even that build fails
Avatar
Masai LionOP
I got this error before putting the last 2 lines of this
Avatar
require("anay-208")
I'll let you know more details in a day or 2
Avatar
Masai LionOP
okay, tnx!
Avatar
require("anay-208")
If you solve this, Just let me know. I'm looking into this issue. My other projects are also affected by it.
Avatar
Masai LionOP
Sure! I'm on vacation and have free time to try to solve this problem.

I'll let you know if I find anything
Avatar
Masai LionOP
Answer
Avatar
require("anay-208")
alright, mark this message as a solution