AWS Amplify just announced server-side rendering deployment support for Next.js! Here's a quick guide on how to deploy both an SSR and an SSG Next....
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Great article, thanks!
I've just created a new app from the Next.js starter and added a page with some server-side data fetching (SSR).
Build and deployment are running successfully. Amplify detects the framework correct with "Next.js SSR". Also the Lambda@Edge exists after the deployment. But there is no trigger connected as far as I can see.
But when I navigate to the SSR Page in the browser I always receive a "503 ERROR
The request could not be satisfied."
Maybe anyone got an idea?
Hey, thanks for bubbling this up! The engineering team is checking into it and I'll let you know when I hear back!
After some investigation I found out that I have to set webpack to version 4 in my next.config.js.
The latest Next.js uses webpack 5 as default which is not working with AWS Amplify Hosting right now.
Yes, you're right. Downgrading Next.js to v11.1.3 and setting
webpack5: falsein next.config.js fixed the issue.github.com/aws-amplify/amplify-hos...
I've had issue with prediction not working in the NextJS api routes. Where in the end I used LAMDA functions instead of API routes. I also number into other hurdles with Amplify. Love the idea. But not 100% sure about using it in my next big project.
Hey! Thanks for the reply -- I just chatted with the engineers and for now SSR only works with Data and Auth not predictions yet. It could be a good thing to create an issue for to show the team you'd be interested in that as a feature! github.com/aws-amplify/amplify-js/...
Great read!
I just followed this and got a demo app deployed. It may be worth noting that you need to add a role to the app. I created a demo without one and it didn't seem to work. It said it was deployed, but the link did not work and I did not see an S3 bucket created.
I created a second one and created a new role on the create app screen and it worked!
Unfortunately, it looks like the Image component is not working. I'm pretty new to Next.js and I'm using SSR. I'm not sure if that is something that's not supported? 🤔
Thank you!!
Hey! Thanks for the feedback, the Image component was Next 10, and we're supporting the Next 9 features for now. Have let the product and engineering teams know that this feature is requested though!
I wish I could like this more than once! 😂
Thank you Ali!
Hey Ali, great article.
We also receive a lot of requests in the SST community for deploying Next.js apps to AWS. And I just wanted to share that we created a SST construct (backed by CDK) to help with building and deploying Next.js apps to your AWS account. It uses a similar architecture behind the scene S3, CloudFront, Lambda@Edge, and Route53 for domains. Next.js 11 compatible with ISR and image optimization support.
Here's an example serverless-stack.com/examples/how-...
It would be nice with some level of rollback functionality like Netlify. It just gives you so much mire peace in mind when updating a page. Otherwise AWS Amplify looks great!
Hey! Thanks for this feature request, I passed it on to the engineering and product teams!
Thanks Ali. Didn't realize you actually work at AWS until now! But I really liked the article! I am still short of my first project on AWS but Amplify really looks great!
Any plans for supporting ISR in the near future?
I've passed along your request to the team! A few other people have asked as well, so my guess would be yes :)
Hi!
Any idea why Next.js's Fast Refresh doesn't work when testing the application locally with Amplify?