Encountering difficulties accessing certain pages of your static website hosted on AWS may be linked to your site's routing mechanism.
Typically, if requests aren't being routed through your index page, a HTTP 404 error is triggered. While utilizing CloudFront, this error might be masked, leading to the appearance of a 403 error.
This issue arises in scenarios where your website directly handles URL paths like /example by searching for an 'example' file within the S3 bucket. Naturally, this file doesn't exist, resulting in an error.
To resolve this, consider implementing an error handling mechanism that redirects such requests to your index page, where a proper routing mechanism can be applied. Within your S3 static website hosting settings, configure the Error Document to index.html.
However, if you want to bypass the hassle of advanced routing mechanisms using S3 setup, Lambda functions, or presenting an error page, you can modify your next.config.js file by adding trailingSlash: true. This modification enables direct loading of subpages without the need for such complexities.
const nextConfig = {
reactStrictMode: true,
poweredByHeader: false,
output: "export",
images: {
unoptimized: true,
},
trailingSlash: true, // for s3 routing
};