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.

Using DynamoDB with Next.js

Lee Robinson

Course Content