404 error with AWS Amplify and Next.js 14 deployment
Answered
Masai Lion posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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:
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!
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!
Answered by Masai Lion
Hi @Anay-208 | Ping For Help
This solved the problem:
https://stackoverflow.com/questions/77292174/intl-localematcher-in-next-js-rangeerror-incorrect-locale-information-provided
This solved the problem:
https://stackoverflow.com/questions/77292174/intl-localematcher-in-next-js-rangeerror-incorrect-locale-information-provided
41 Replies
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
are you using amplify gen2?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
Nope. I'm recreating the app using gen 2 now...
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
ignore it, I'm sending you new content for amplify.yml
use this
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
It solved the problem with 404, but it's giving a 500 now
![Image](https://cdn.discordapp.com/attachments/1196105402505498744/1196115540968738936/image.png?ex=65b67467&is=65a3ff67&hm=648b81d0058d66259c240312c8b961bf82fe77d23819a02ddb7e5c40789c33e2&)
![Image](https://cdn.discordapp.com/attachments/1196105402505498744/1196116247172087878/image.png?ex=65b67510&is=65a40010&hm=886a93028e8b191f9c78b84aa19e35492d19e909a2be7fac490a4f837e3aaf87&)
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
If you’ve a git repo, that’d help
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Alr, I'll check
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
tnx
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
where is the amplify.yml
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
I edited the amplify.yml in build settings on AWS console
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
its best to add it to git repo
amplify.yml
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
Do you wanna me to add it to the git repo?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
You can add it later on
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
okay
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
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](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
yup, I'm using amplify gen2
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
was your build successful in Aws amplify console?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
Yes. But I had to use the amazon linux 2023 image
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
how did you change the image in amplify console?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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
in the yml file
image:
buildImage: 'amplify:al2023'
in the yml file
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
can you send the full yml file?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Once its deployed, I'll see the error.
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
exactly
I think there is something to do with the
middleware.ts
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
I once remember seeing something related to middlewares on the doc, let me see
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
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](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
I got this error before putting the last 2 lines of this
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
I'll let you know more details in a day or 2
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
okay, tnx!
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
If you solve this, Just let me know. I'm looking into this issue. My other projects are also affected by it.
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
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
I'll let you know if I find anything
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Masai LionOP
Hi @Anay-208 | Ping For Help
This solved the problem:
https://stackoverflow.com/questions/77292174/intl-localematcher-in-next-js-rangeerror-incorrect-locale-information-provided
This solved the problem:
https://stackoverflow.com/questions/77292174/intl-localematcher-in-next-js-rangeerror-incorrect-locale-information-provided
Answer
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
alright, mark this message as a solution