DEV Community

⚡️ 5 Minute Tutorial: Deploying a NextJS app with AWS Amplify Hosting

Nader Dabit on May 05, 2020

Cover image by Lubo Minar In this tutorial you'll learn how to deploy a Next app to AWS using Amplify Hosting. There are two options: One using...

Read full post

Chris Bailey • Sep 15 '20

Nader, thanks for this. I'm struggling with dynamic routes for a Nuxt app. I'm wondering if you've seen how to do this for that case? I believe that the main problem is that Nuxt doesn't generate a page during the generate/build stage that I can redirect to. I have their regular dynamic routes setup and working locally (and it works when I do a push in my Nuxt app - just not if I try to directly navigate to a dynamic page, as if I'd bookmarked it for example). If you know of any solutions for Nuxt, I'd love to know.

Chris Bailey • Sep 20 '20

I figured out a workaround. If I add a trailing slash it works. So, using URL's like, "somepath/somepage/?param1=foo" (instead of the usual somepath/somepage?param1=foo) works.

Nader Dabit • Sep 20 '20

Hey Chris, thanks for the follow up here, I had yet to try this but will now be trying more with Nuxt so this helps.

ywroh • Aug 25 '20

Thanks for the good info. As you told me, I deployed the nextjs app with amplify, but an error occurred in the build commands. To fix the error, I changed the pre build commands to yarn install --frozen-lockfile and the build commands to yarn build, and it deployed well without any errors.

vasujogani • May 15 '20

Hey Nader, this is a great post! Could you please do something similar for React Native? Currently, I am using Expo and Amplify (App sync, lambda, Cognito) for development. There isn't great documentation that I could find for the deployment of these apps to the app store/play store and how to maintain and update over time. Could you please do something similar for RN, that would be really really helpful.

Also, slightly relevant question: is hosting category useful for React native development? Also, how can I set up my Frontend and Backend on Amplify for RN?

Thank you

Shiva • Dec 30 '20

Hi Developers,

I have problem in next rewrite rules,
(working) example.com --> index.html
(not working) example.com/country --> /pages/[country]/index.html
(not working) example.com/country/city --> /pages/[country]/[city]/index.html

My configuration in rewrite rules,

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "/<*>/",
        "target": "/pages/[country]/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>/<*>/",
        "target": "/pages/[country]/[city]/index.html",
        "status": "200",
        "condition": null
    }
]

Ref code repo : github.com/hosseinAMD/next-playground

Help me to fix this !!

Juan Antonio • Mar 12 '21

Hi! Did you can resolve this fix?

shypixel • Mar 13 '21

Thank you for the excellent tutorials~
When I tried, I got an error related to images:
github.com/vercel/next.js/blob/mas...
When I deployed the same build to Vercel I did not experience the same issue as specified here nextjs.org/docs/basic-features/ima...

I guess I will just do this initial deployment test without an image but could anyone enlighten me... if there's an easy way around it?
I could be wrong but it seems to allow these cloud providers only -- Imgix, Cloudinary, Akama-- how about S3 or WITHOUT any?

Md. Abdul Halim Rafi • Nov 3 '20

Can you please teach how can I host nextJs with SSR (server.js) in aws?

Ibrahim Cesar • Apr 4 '21

You can using CDK, an exemple repo: github.com/ibrahimcesar/nextjs-ssr...

Chris Weekly • Sep 13 '21

Thanks for sharing, @ibrahim Cesar.
Cool PoC, and nice writeup (ibrahimcesar.cloud/blog/nextjs-typ...).

For the sake of other readers I want to point out that the CDK construct for serverless-nextjs is still experimental (serverless-nextjs.com/docs/cdkcons...), and observability (especially tracing, but also logging) is still problematic with the serverless-nextjs component in general.