How to Deploy a NextJS App to AWS with API Routes and Dynamic Routes
In this video you'll learn how to use the Serverless Framework to deploy a NextJS app to AWS complete with API routes, dynamic routes, server side rendered pages at the edge, and automatic pre-rendering using the Serverless NextJS Component.
Nader Dabit: [0:00] We'll start by creating a new Next app using npx. Here, we'll give the project a name and press Enter. Next, we'll change into the directory and create a new serverless application by running npx serverless create. Here, we'll set the template to be aws-nodejs.
[0:24] Once the application has been created, open it up in your text editor and then open the serverless.yml file. Here, we can delete the boilerplate and create our own two properties. The first thing that we'll need is the name of our application. I'll set this to myNextApp.
[0:40] Next, we'll specify the serverless Next component. I'll be specifying version 1.16., as it's the most recent version as of this recording. That's all we have to do. Save the file and go back to your terminal.
[0:54] To deploy our app, we can now run npx serverless. The first deployment takes much longer than future updates. Here, my first deployment took 49 seconds, but you'll notice that my future deployments are much faster.
[1:11] In the terminal, we should be given the app URL, which we can copy and paste into our web browser. You should see that your application has been deployed.
[1:24] By default, Next.js ships with an API route, so let's test it out. We can navigate to /api/hello to see the API response.
[1:53] Next, let's test out some dynamic routes. To do so, I'll create a new folder called posts. In the posts folder, I'll create a new file called [id] .js with the ID wrapped in brackets. In this component, we'll first import the useRouter hook from 'next/router'.
[2:16] Next, we'll create a new component called Post. In the Post component, we'll use the useRouter hook to get the id out of the route param.
[2:32] Finally, we'll just return an h1 showing the Post id. We can now deploy the updates using either npx serverless or the serverless CLI.
[2:54] Once the deployment is successful, you should now be able to use the dynamic route. To delete the app, you can run serverless remove.