DEV Community

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

⚡️ 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...
Collapse
 
chrisrbailey profile image
Chris Bailey

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.

Collapse
 
chrisrbailey profile image
Chris Bailey

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.

Collapse
 
dabit3 profile image
Nader Dabit

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.

Collapse
 
zural profile image
Shiva

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
    }
]
Enter fullscreen mode Exit fullscreen mode

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

Help me to fix this !!

Collapse
 
jrosales90 profile image
Juan Antonio

Hi! Did you can resolve this fix?

Collapse
 
ywroh profile image
ywroh

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.

Collapse
 
vasujogani profile image
vasujogani

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

Collapse
 
mdabdulhalimrafi profile image
Md. Abdul Halim Rafi

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

Collapse
 
ibrahimcesar profile image
Ibrahim Cesar

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

Collapse
 
cweekly profile image
Chris Weekly

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.

Collapse
 
shypixel profile image
shypixel

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?

Collapse
 
ponyjackal profile image
ponyjackal

Thank you for your post

Collapse
 
imewish profile image
Vishnu Prassad

This so Cool. Can we deploy Next apps with SSR enabled to amplify? @dabit3

Collapse
 
dabit3 profile image
Nader Dabit

Not yet, but we are working on supporting hosting SSR support.

Collapse
 
krankj profile image
Sudarshan K J • Edited

Starting 18th May, 2021, AWS has started support for SSR and API Routes.
More info here: aws.amazon.com/blogs/mobile/host-a...