React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Next.js is a minimalistic framework for server-rendered React applications.

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Learn how to use the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and deploy a [DynamoDB table](https://aws.amazon.com/dynamodb/) with [Next.js](https://nextjs.org).

- 🛠 API Route to handle CRUD actions
- 📦 AWS CDK for Infrastructure as Code
- 🔓 IAM role to restrict permissions
- 🚀 Deploy instantly to [Vercel](https://vercel.com)

You can view the completed code [here](https://github.com/leerob/nextjs-aws-dynamodb). 

You can use the [Amazon Web Services (AWS) command-line interface (CLI)](https://aws.amazon.com/cli/) and the [Cloud Development Kit (CDK) CLI](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and configure a user with access permissions for DynamoDB with [IAM](https://aws.amazon.com/iam).

[Amazon DynamoDB](https://aws.amazon.com/dynamodb/) is a key-value and document database that delivers single-digit millisecond performance at any scale.

Use AWS IAM to Create a User with Permission for DynamoDB

Configure the [Amazon Web Services (AWS) command-line interface (CLI)](https://aws.amazon.com/cli/) to properly use the [Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk) for your [IAM](https://aws.amazon.com/iam) user.

Configure Your Local Environment for Communicating with AWS

We'll create a new [CDK Stack](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-dynamodb-readme.html), defining a DynamoDB table called "Items" that is configured to [pay per request](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-dynamodb-readme.html#billing-mode) with a partition key of ID.

Use AWS CDK to Deploy a DynamoDB Table

Rather than using [create-next-app](https://nextjs.org/docs/api-reference/create-next-app), we can manually set up Next.js and create our first [API route](https://nextjs.org/docs/api-routes/introduction). This route allows you a straightforward solution for building an API alongside your React application with Next.js. No need to set up Express or any other Node.js server.

Create a New Next.js Application with an API Route

The [Amazon Web Services (AWS) Node.js SDK](https://aws.amazon.com/sdk-for-node-js/) allows us to securely connect and fetch information from [DynamoDB](https://aws.amazon.com/dynamodb/). Using a [Next.js API Route](https://nextjs.org/docs/api-routes/introduction), we can easily add an API to our application to perform CRUD (Create, Read, Update, Delete) operations.

Connect to DynamoDB Using the AWS Node.js SDK and a Next.js API Route

With a single [API route](https://nextjs.org/docs/api-routes/introduction) in [Next.js](https://nextjs.org), you can execute the full set of [CRUD (Create, Read, Update, Delete)](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations – creating a [RESTful](https://restfulapi.net/) API. The `req` object allows us to identify the HTTP method (`PUT`, `GET`, `POST`, `DELETE`) and keep our logic centralized in a single route.

Create a RESTful Next.js API Route to Modify Your DynamoDB Table

[SWR](https://swr.vercel.app/), a React hooks library for data fetching, makes it easy to communicate with your [Next.js API Route](https://nextjs.org/docs/api-routes/introduction).

Use SWR to Fetch Data from a Next.js API Route

[Vercel](https://vercel.com) combines the best developer experience with an obsessive focus on end-user performance. With Vercel, we can easily deploy our [Next.js](https://nextjs.org) application to production in under a minute.

Deploy a Next.js Application to Vercel with GitHub

Using DynamoDB with Next.js

https://app.egghead.io/api/v1/lessons/aws-use-aws-iam-to-create-a-user-with-permission-for-dynamodb/subtitles

Instructor: [0:00] First, sign in to the AWS console using your Root user. Then, you can either search or navigate to IAM to manage your user accounts and resources. Next, click on Users, and click Add user. You can name this user whatever you want, but let's call this one DynamoDB.

[0:30] Then, we're going to select Programmatic access, which will give us an access key and a secret. Let's click on Next permissions, and we can either create a user group if we want to reuse this across users, or we can attach existing policies directly to this user. Let's do that.

[0:50] Search for Dynamo. We'll want DynamoDB full access giving this user the correct permissions to invoke commands. Then, we also need CloudFormation full access to allow the AWS CDK to scaffold our infrastructure.

[1:10] With these two policies selected, we can hit next. Feel free to add tags if you would like. These are optional that will allow you to organize your users. Then finally, review the new user that we want to add and the two policies that we've selected.

[1:27] Finally, create our user, and save the access key ID, as well as clicking Show and saving your secret access key, so that we can configure the CLI to communicate with AWS.

https://app.egghead.io/api/v1/lessons/aws-use-aws-iam-to-create-a-user-with-permission-for-dynamodb/transcript

https://app.egghead.io/api/v1/lessons/aws-configure-your-local-environment-for-communicating-with-aws/subtitles

Lee Robinson: [0:00] Using the link in the description, download and install the AWS CLI. Then, in your terminal, run aws --version to confirm that it was installed correctly. Repeat these steps for the AWS CDK and run cdk --version to confirm that it was installed correctly.

[0:22] Finally, navigate back to your IAM console, and in the terminal run aws configure where you will be prompted to enter in your Access Key Id, your Secret Access Key, as well as defaulting your region name by pressing Enter and the output format. Now, your AWS CLI is configured to use the CDK.

https://app.egghead.io/api/v1/lessons/aws-configure-your-local-environment-for-communicating-with-aws/transcript

https://app.egghead.io/api/v1/lessons/aws-use-aws-cdk-to-deploy-a-dynamodb-table/subtitles

Lecturer: [0:00] With the CDK CLI installed, let's make a new directory for our DynamoDB project. Then, let's cd into that directory. Now, we can use the CDK CLI to initialize a new application in JavaScript. It's going to apply a project template for JavaScript and run us through this interactive prompt, where it will install everything we need, to hit the ground running.

[0:35] You'll see it also outputs a few useful commands for us -- cdk deploy that will allow you to deploy this stack, cdk diff which will show what has changed, and then cdk synth if you want to see the actual underlying cloud formation template.

[0:53] Next, let's open up our newly created project inside of VS Code and take a look at the CDK stack.

[1:01] Now there's nothing here yet. Let's go down to our terminal and install a new package for DynamoDB that will allow us to setup resources inside of our stack to create a new DynamoDB Table. This installed successfully, so we can now close out our terminal and focus on this stack.

[1:26] First, let's import Dynamo from the package that we just installed. Next, let's go inside of our stack. We can remove this comment and say that we want to create a new DynamoDB Table, and we're going to call these items.

[1:53] This also takes in some optional parameters that we can use to customize our table. One of those options is the billing mode, which we can specify as PAY_PER_REQUEST, which we'll use on-demand billing.

[2:10] The other option we want is the partition key, which is the primary key for our table. We're going to say this is called a name of ID and a type of a string. We can save, and this should be all that we need to set up a new DynamoDB Table named Items that has on-demand billing with a primary key of ID. I just noticed that this should be a capitalized T.

[2:49] We can save and open up our terminal. Now, we should be able to run cdk deploy to deploy our new DynamoDB Table called Items. It's going to create a CloudFormation changeset for us and abstract away us having to manage CloudFormation ourselves. Also, provide a repeatable codified infrastructure, so that we don't have to go into the interface and create this ourselves.

[3:25] This saves a lot of time if you're trying to spin up new environments frequently or if you're pushing this code up and someone else is going to be creating this example themselves or picking up where you left of. Just like that, our DynamoDB stack was successfully created.

[3:46] If we navigate back to our AWS console, we can see that the brand new DynamoDB Table named Items was created. We can click inside here, see our partition key of ID, our on-demand capacity, and this table is now active.

[4:04] Now, you want to take note of this table name because we'll need it as an environment variable in the application that we create here very shortly.

https://app.egghead.io/api/v1/lessons/aws-use-aws-cdk-to-deploy-a-dynamodb-table/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-a-new-next-js-application-with-an-api-route/subtitles

Lee Robinson: [0:00] To create a new Next.js application, we can run npx create-next-app, and then the name of our application. However, since I already have a application created, a folder setup, a git repository setup from the previous lesson, we're going to manually install Next.js rather than using npx. We can run npm i, we'll add react react-dom, as well as Next.

[0:33] Now, we can open up our package.json, and we'll see the new packages installed. Let's add a script, so that we can start up Next.js. Let's call this dev and it will use the Next command. The next step is to make a new top-level folder for pages. Inside of pages, we want to make a new file called Index.js.

[1:04] Now, this file is going to be the entry point into our application. Let's create a new function. That's the default export for this file. We're just going to make this return Hello World. Hit Save. Now, if we go down to our terminal, and we run our server, you'll see that it says it has started and it's available on port 3000.

[1:34] If we open up our browser, and we navigate to localhost:3000, we can see that it successfully worked, and we're able to see the first route in our application. Now, you'll also notice in our folder tree, we see .Next, which is the compiled code. We want to make sure that we add this to our gitignore, so that we don't commit this compiled code to GitHub.

[2:01] Let's also setup an API route. First, let's create a new folder inside pages for API. Then let's create a new API, hello.js. An API route is a straightforward way to create an API inside of Next.js. On your frontend, you have React, and on your backend, you have Node.js as an API route.

[2:26] Inside this file, we're going to export a default function called a handler that is going to take in a request and a response. This is going to allow us to create our API route. If we take the response, and let's do .status of a 200, and we want to return some JSON of name, and my name is Lee.

[2:58] If we save this, and we navigate back to our browser, we go to localhost/api/hello, we will see the JSON response from our API route. If we open up DevTools, and we go to the Network tab, we also see this status come through. It was originally a 200, we're seeing a 304 here for not modified. If I do a hard refresh, I'm able to see that 200.

https://app.egghead.io/api/v1/lessons/next-js-create-a-new-next-js-application-with-an-api-route/transcript

https://app.egghead.io/api/v1/lessons/next-js-connect-to-dynamodb-using-the-aws-node-js-sdk-and-a-next-js-api-route/subtitles

Lecturer: [0:00] To connect to DynamoDB, first we need to install the AWS SDK for Node.js. Next, let's make a new file for .env.local. These will be your local environment variables that you'll use to securely access the Node.js SDK.

[0:25] Let's make sure we also add this to our gitignore file. Inside this file, I'll paste in the environment variables that we'll need, the access key and the secret key, which we fetched in a previous lesson, the region which mine is us-east-1, but change this if yours differs.

[0:46] Then finally, the table name that we also gathered from a previous lesson. Populate these values in your ARM local file before proceeding on. With those values populated, let's go to our lib folder and create a new file, Dynamo.js.

[1:06] First, let's import AWS from the AWS SDK. Let's set up a new client which we can say, a new AWS DynamoDB document client. This is going to take a few different parameters, the first being the access key which we can read from process.env.

[1:31] The second would be the secret access key, which we can also read from process.env, secret key. We have the region. Then finally, we have the name of the table. Now, with these values, we should be able to create a secure connection to our DynamoDB table.

[2:05] Now, let's create a thin wrapper around the AWS SDK and we're going to define a few different functions. We have a GET, and this will take in some parameters. It's going to call our client. It's going to do a GET for those parameters and then return that promise.

[2:29] We can take this and repeat it a few different times for all of the different things that we'll need. We have a GET. We have a PUT. We have a QUERY. We have an UPDATE, and we have a DELETE. A combination of these methods should allow us to do the full set of CRUD operations -- create, read, update, delete -- on our table.

[2:55] Now, if we go back to our API route, which we had titled Hello. What we can do here is rename this guy to Item. The first thing we want to do is the create, a.k.a the PUT. Let's first set up a new item. It's going to have some ID, some content, and let's throw a createdDate on here as well.

[3:23] Now, this ID, obviously, we want to have something that's unique. What we can do is go down to our terminal, and we can run npm iviewid. This small little package is going to allow us to easily add some unique identifiers, so we can do import * as uuid from 'uuid'. Let's swap out that 123 with a UUID, and we'll do a version 4.

[3:55] For the content, we'll just leave this hardcoded as test for now. We'll eventually update this to include what's in the request. We have our item. We need to import our DynamoDB client from the library that we've created.

[4:17] We can say DynamoDB.put to put this new item. This is a promise, so what we want to do is await this, which means that we need to make this handler asynchronous. The format for this PUT is going to be an object. We specify the item, and then this object.

[4:47] The final piece here will be returning the new item that we create from our API route. Then, to be more accurate, we should have a 201 here as we're creating a new item.

[5:01] Let's run our server. We'll open up Chrome and try this out. Inside of our browser, we'll go to localhost:3000/api/item. It looks like something went wrong, so we have an opportunity to debug here. We have an error that says that client was not defined. If we go back to our library, it looks like I have a typo. I can use command D to select all these occurrences, rename that.

[5:35] Let's give this a shot again. Looks like there's still an error, missing region in config. It looks like that needs to be upper case. Third time's the charm, boom. We see our new item that we created. If we go back over to DynamoDB, refresh the page, we should see our new item inside of our table.

https://app.egghead.io/api/v1/lessons/next-js-connect-to-dynamodb-using-the-aws-node-js-sdk-and-a-next-js-api-route/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-a-restful-next-js-api-route-to-modify-your-dynamodb-table/subtitles

Lee Robinson: [0:00] In the previous lesson, we set up a Next.js API route that took an item, and it created it inside of DynamoDB returned into a one and some JSON with the item. This works, but it's looking at a GET request right now, so we access this through localhost:3000/api/item.

[0:22] The method on this HTTP request is a GET, but we want to move this behind a PUT. That's going to be the Create of our create, read, update, delete methods. To do that, we can look at the request object and check the method, and if that method is equal to a PUT, then we can do what we had previously defined inside of this API route.

[0:50] Similarly, if we want to get an item, like we were doing before by directly accessing it in the browser, we can say req.method = GET. This is going to return some item, but it's an object. We want to destructure that object and pull off a capital I item.

[1:15] Let's do that. We're going to await calling DynamoDB. This is a GET instead of a PUT. Just like PUT, it takes some options. Those options are going to be the key. Then, the name of our key which is ID. This ID, we have to retrieve from our requests somehow. We're going to do that via query parameters.

[1:39] If we do req.query.id, we're going to be able to pull the ID key off of this query object, which is just the query parameters from the browser. Then, now that we have this item, we can do res.status of a 200 and return this item. Now that we have this, if we go back to DynamoDB, we had already created an item previously.

[2:09] Let's take this ID. Go over to localhost:3000/api/item. Then, we'll use an ID query parameter. We're able to fetch that item that we created previously. That works for this, but we also want to be able to test creating a new item. Rather than using a content of test, we want to be able to pull something in dynamically and create a new item inside the database.

[2:38] Let's do that now. First, let's remove test and then we can look at req.body.content.

[2:48] In our PUT request, we're going to include a body that's going to have some content. Next.js takes care of parsing this for us. You don't have to do any setup to be able to access these values that you pass in.

[3:02] Now, let's open up a new terminal. We'll pull this up, and I'm just going to paste in a curl that will be a method of PUT at our localhost:3000/api item. Then we're passing along this body with a content of test. Then we're saying, we need to also include a header that says that the content that we're passing is JSON.

[3:28] Let's change this to test 2. You see that it returns the new item that we created, showing test 2, and let's go back in DynamoDB. We see this new row created for our table, and we see test 2. Awesome. We can put this terminal back down. I'm just going to clear this.

[3:51] Let's do the third which will be update. Let's make a new if statement. If req.method = POST, we're going to update this item. In this case, the .update is going to return attributes and we're going to destructure that off the object. Let's say, await dynamodb.update, and this is going to take in a few more parameters.

[4:25] The first one being the key, which is the ID, and instead of doing a query parameter, we're going to have this on the body. The next is an update expression, which allows us to define what values we want to update. Let's say we're going to set content = content. This syntax will be explained shortly when we add the expression attribute values.

[5:05] These are going to be the values that we define. For example, we have this new content value, which takes in the req.body.content. If we want to clear out that content, we can make it null.

[5:21] The final piece is what we want the ReturnValues to be. We want these to be ALL_NEW. When we get back these attributes, we're going to have the newly updated item, so we can say res.status of 200. Then, we want to return a JSON with this new item that we've updated. Perfect.

[5:48] Let's save this and test it. Let's go back to our terminal. I'll make this larger. If I press Up, I can get the last command that I used. We're going to want to change a few things here. Instead of a PUT, we want a POST method, but we're going to the same URL. Let's make the content 3.

[6:13] Then, we also need to specify the ID of what we want to update. We'll say this one that is test 2. Let's grab this ID. We'll go back. We'll go back to the terminal, paste this in here. OK. Then, a header JSON. Hit Enter, and we see that it returns back the newly updated item. We see test 3, and if I refresh in DynamoDB, I see the new value of test 3. That worked.

[6:49] The final piece is deleting an item. Again, an if statement. If the req.method = Delete, then we can do await dynamodb.delete, which takes an object that has a key, and the key is the ID. That will be req.query.id. Obviously, we don't need to return anything here since we deleted the item, so we'll just do a res.status of a 204 for No Content. Then, we'll do some empty JSON.

[7:36] Now, let's go back to our terminal. I already have the ID saved, so what we can do is we don't need this header, and we don't need this body. After api/item, I'll throw an ID on here. Then, the only remaining thing is to change this to a DELETE. If we refresh the page, we see that that row is deleted.

https://app.egghead.io/api/v1/lessons/next-js-create-a-restful-next-js-api-route-to-modify-your-dynamodb-table/transcript

https://app.egghead.io/api/v1/lessons/next-js-use-swr-to-fetch-data-from-a-next-js-api-route/subtitles

Instructor: [0:00] First, navigate to your terminal and install SWR. Then, go to pages/index.js which is the entry point to your Next.js application. We can import this new hook, import useSWR from SWR.

[0:18] Our index function needs to call this React hook, so we'll say useSWR. The first key, which is the cache key, is the API route that we want to call, /api/item given some ID. If we go back over to AWS, I'm going to steal this ID from an object in DynamoDB.

[0:46] The second parameter is a fetcher. This fetcher is a function that we're going to define that tells SWR how to communicate with our API route. Given some URL, we want to use the browser fetch. This is going to return a promise. On the response, we're going to say return JSON.

[1:12] We have our fetcher defined. We have our API route. On this response, which is an object, we can destructure the data and the error. If we go and we look, we can say, "If there's an error, then we want to return some div," and we can say, "It failed to load." If there's no data, that's how that we know that we're in a loading state. We can return a div here as well and just say loading.

[1:46] Finally, we want to return the data that we received. I'm going to put this in a code block. It's going to be a JSON blob, so I can just do JSON.stringify some data. We'll just clean this up, so it looks nicer and save.

[2:11] If we go and we run our code and start our server at localhost:3000, and we go back over, you'll see it refreshes. We saw a loading state. Now, we see the new JSON content from DynamoDB.

[2:29] One interesting feature of SWR is that when you refocus or revalidate on the page, it will call your API and fetch new information. If I were to go to DynamoDB, and go in here and modify this directly and hit Save, when I navigate back to localhost:3000, it goes and refetches the latest information from my API route keeping things up to date.

[2:56] You have full control over this if you'd like. You can dive into the options and configure exactly how you want that to happen, but this abstracts away a lot of the work that you would need to do to fetch data from either local or remote APIs.

https://app.egghead.io/api/v1/lessons/next-js-use-swr-to-fetch-data-from-a-next-js-api-route/transcript

https://app.egghead.io/api/v1/lessons/next-js-deploy-a-next-js-application-to-vercel-with-github/subtitles

Instructor: [0:00] To deploy your Next.js application to production, you'll need to ensure that your package.json scripts has a build, and it starts script to tell Next.js how to prepare a production build. If you use CreateNext app, this is already set up, but if you did the manual installation like we did, previously, you'll need to ensure these are added.

[0:20] After those are added and you've pushed all your changes to GitHub, as you see in my browser on the right, you can simply take this URL and go to Vercel. Vercel is a very easy way to deploy Next.js applications. If I paste in my link here, I can follow a few different steps to set up a project inside of Vercel, and then easily deploy that to production.

[0:44] I have my project name. It automatically detects that it's a Next.js project. I'm going to want to add environment variables for everything that was defined in .env.local.

[0:57] Now that these values have been added and encrypted, we can click Deploy to deploy our application to production. You'll see on the left, it retains all of the project settings that we used, and on the right, we have a live-build output of our application.

[1:16] Just 40 seconds later, our application has been deployed, and we can click visit. You'll see it was initially loading. Then, we see the content coming from DynamoDB. That's all it takes to deploy our application to production.

[1:33] If we go back to our import tab, we can click open dashboard, which will take us to this newly created project inside of Vercel. We can verify inside of our settings that our environment variables were here and added correctly.

[1:49] You also can set up analytics, which will give you more information about the speed and performance of your application, view all your deployments and even more.

[1:59] For example, we can click View domains. We see the alias URL for our project, and that it's assigned to our git branch. If we want it, however, we could add in any domains here, and we can purchase them directly through Vercel. It's very easy to go from development to production.

https://app.egghead.io/api/v1/lessons/next-js-deploy-a-next-js-application-to-vercel-with-github/transcript

Course Content