Use AWS IAM to Create a User with Permission for DynamoDB

Configure Your Local Environment for Communicating with AWS

Use AWS CDK to Deploy a DynamoDB Table

Create a New Next.js Application with an API Route

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

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

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

Deploy a Next.js Application to Vercel with GitHub

Using DynamoDB with Next.js

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.

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.

Course

Using DynamoDB with Next.js

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

Share this video with your friends