Sample: Next.js + SWR + Tailwind + Amplify

Simple sample project exploring the use of Next.js, SWR, Tailwind CSS, and AWS Amplify.

In addition to learning more about Next and Tailwind, this project implements a basic approach to querying and mutating data in an AWS AppSync API using Vercel's SWR package (paging not implemented yet). This approach does not use AppSync Subscription capabilities.

Getting Started

First, clone this repository:

amplify init --app https://github.com/jkahn117/next-to-do

Use Amplify Mocking to test the AWS AppSync API locally (no resources will be deployed to your AWS account):

cd next-to-do

amplify mock

Once the mock server is running, start the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 to view the application:

Future Work

Ran into issues including createdAt as a sort key for items in the list as this values is required by the mutation even though it is set in the AppSync Resolver. There is a fix in the works via the Amplify CLI. An alternative is an Amplify Plugin, graphql-auto-transformer.

Authors

• Josh Kahn - Initial work