URL with Trailing Slash with Next.js returns 403 status code

[anatolzak]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d17g4lsg0ngzxg

AWS Region

us-east-1

Amplify Hosting feature

Not Applicable

Describe the bug

I have deployed a simple Next.js SSG website with an index page and test page. Repository: https://github.com/anatolzak/nextjs-trailing-slash

Pages:
https://main.d17g4lsg0ngzxg.amplifyapp.com
https://main.d17g4lsg0ngzxg.amplifyapp.com/test

And I don't have any rewrites or redirects.

When going to https://main.d17g4lsg0ngzxg.amplifyapp.com/test, everything works correctly. But when going to the same url but with a trailing slash, I get a 403 page.

So apparently, trailing slashes don't work

Expected behavior

URLs with a Trailing slash should redirect to their counterpart without a trailing slash which is the default behavior for Next.js apps as described here: https://nextjs.org/docs/api-reference/next.config.js/trailing-slash.

Or URLs with a trailing slash should at least not return 403 status code and instead just render the same page as without a trailing slash.

Reproduction steps

1. Deploy a Next.js app
2. Delete any rewrites or redirects
3. Go to any page except the index page and add a trailing slash to the url, and you should get 403

Build Settings

No response

Log output

# Put your logs below this line

Additional information

No response

[anatolzak]

For anyone else with the same issue, a workaround for this issue, is to set trailingSlash to true in next.config.js (https://nextjs.org/docs/api-reference/next.config.js/trailing-slash).

After doing that, it looks like AWS Amplify redirects all urls without a trailing slash to the urls with a trailing slash.

I am not sure why by default AWS Amplify can't redirect urls with trailing slashes to their counterpart without a trailing slash which is the default expected behavior for Next.js apps as described here: https://nextjs.org/docs/api-reference/next.config.js/trailing-slash

It is pretty absurd that you can't deploy a Next.js app as is without finding all the different bugs that AWS Amplify has with Next.js apps and trying to find solutions to all the different problems it has to make your deployment actually work.

Update: Since posting this issue, I found another issue #3374 which is that if you add query params to a url that then redirects to with/without a trailing slash, AWS Amplify drops the URL query params entirely.

[ghost]

Hi @anatolzak 👋🏽 thanks for raising this issue and providing feedback. I have not been able to reproduce this on my end. I've deployed SSG and SSR apps with Next.js and navigating to paths ending / just redirected it to the path without it.

Are you experiencing this behavior with any other apps you have deployed?

[JKeddo95]

Hi there, I am having the exact same issue with my relatively plain NextJS 13.4 app using app router and mostly SSG.

No links or images load correctly for my website except for the homepage and one other page that I happen to be calling with a URL parameter.

Website works perfectly on localhost. I don't have any aws amplify packages installed in my package.json, I am using the standard next-js template. I initially created the app with NextJS 13.4.1, and tried updating it to 13.4.4 but that didn't work either. Maybe there is an issue with and nextJS built in components?

My appID appears as follows arn:aws:amplify:us-east-1:[AWS_ARN_HERE]:apps/da397fbpzwtia

If it helps, one issue I noticed is that amplify seems to think I am trying to access ".txt" files when I call specific pages

[anatolzak]

@hloriii The issue doesn't occur on next.js ssr apps.
I just deployed a simple next.js ssg app. When going to any route that isn't the base path, for example /test, it works fine. When going to /test/, if there is no redirects or rewrites, it returns 403. If there is a rewrite to 404.html, it returns the 404 page instead of the test route.

Here is the SSG app I just deployed that is behaving in the above described ways: https://main.d3qwejj06ayzs0.amplifyapp.com/test/

[JKeddo95]

I spent about 8 hours troubleshooting and also comparing builds with Vercel on this -- It seems that this issue appears for Vercel deployments as well in my testing. Here are the steps I took to solve my issues:

1. Nextjs app directory routing+config is extremely case sensitive. Several of my tags had camelCase text within that needed to be fixed.
2. NextJS local "release"/"prod" builds are much less strict than deployed ones. yarn build && yarn start might work fine on local but end up breaking on actual deploys
3. This one is displeasing: builds sometimes change the case of your component name or URL all on their own and ignoring what your source specifies. Check the build logs for your app and change your link tags the output directories you see mentioned in the build logs on amplify console.
4. Import images on top your file instead of trying to reference them inside tag.
5. Output: "standalone", should be inside your next.config.js

If worse comes to worse, you can try deleting and recreating your amplify app :)