Amplify NextJS 13 static pages stop working after deploy (JavaScript 404)
My setup: I'm building a NextJS 13 app (using App Router) with Amplify Studio. I have a static index page which is rendered at build time as it has no dynamic data. "next": "13.5.3" "react": "18.2.0" "aws-amplify": "5.3.11"
Issue: After an deploy to Amplify, clickable elements (like links) stops working because the NextJS-JavaScript bundle could not be found anymore (404):
This - of course - is due to the fact that a new javaScript bundle is deployed and the old one is not available anymore. The issue here is, that the main HTML document is still served from CloudFront cache which references to old JavaScript files.
Last deploy:
Even when I access the site 45min after deployment, the main document is still served from CloudFront cache:
Amplify App configuration:
Why is Amplify not fully invalidating CloudFront Cache after the deploy? How can I get this fixed?
- Newest
- Most votes
- Most comments
Hello, Max.
Here are some common reasons why cache invalidation might not work as expected and steps to potentially fix it:
Cache Invalidation Configuration: Check your Amplify project's configuration to ensure that cache invalidation is properly configured. In the Amplify Console, you can specify cache settings under "App settings" > "Build settings" > "General" > "Enable Cache Invalidation."
Manual Cache Invalidation: If cache invalidation is still not working as expected, you can manually invalidate the cache in the AWS Management Console. Go to the CloudFront distribution associated with your Amplify project, and under the "Invalidations" tab, create a new cache invalidation. This can be a workaround, but it's not ideal for frequent deployments.
Best regards, Andrii
Did you check this article https://aws.amazon.com/blogs/mobile/aws-amplify-console-supports-instant-cache-invalidation-and-delta-deployments/?
Yes, there its written that it should work "automatically", but it didn't. The section "Instant cache invalidation with the Amplify Console" is not writing about a setting which I need to set.
I have also used performance mode but it doesnt work.
Relevant content
- asked 2 years ago
- asked 2 years ago
- asked 2 years ago
- asked 3 years ago
AWS OFFICIALUpdated 6 months ago- AWS OFFICIALUpdated 3 years ago
- AWS OFFICIALUpdated 10 months ago
Hi Andrii, thanks for your comment! Under "App settings" > "Build settings" I do not see a "General" tab. Instead, an amplify.yml is shown here:
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '/*' cache: paths: - node_modules//*
I have same issue and I could not find "Enable Cache Invalidation" option. I am using next.js 13