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

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.

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.

Course

Using DynamoDB with Next.js

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

Share this video with your friends