The idea behind this project is to provide a ready-to-use structure for production-ready serverless Next.js applications hosted in AWS. Let's start with some backstory..
Several months ago AWS announced Next.js SSR apps support for AWS Amplify which made it really easy to deploy a Next.js application to AWS - you could always go with Vercel, but as you may have found out their plans are more expensive and restrictive. On the other hand, AWS has been around a lot longer so it is generally more mature and, if you search for the current top serverless platforms, AWS Lambda ranks as first.
Following the AWS Amplify Next.js docs, you will see that you get the support for both SSG/SSR apps, CI/CD out of the box, connection to a domain with just a few clicks with the proper certificates etc. and your API routes are getting mapped to Lambda functions.. Pretty neat!
About the technologies we've chosen:
- NextAuth - Authentication for Next.js apps that gives us a lot of social providers and various authentication mechanisms out of the box to make our lives easier (the reason we have decided not to use Cognito is because it supports just a few federated providers like Facebook, Google, Apple, but lacks support for a giant like Twitter)
- Prisma - Prisma is a next-generation Node.js and TypeScript ORM that provides type-safe database access. It currently supports PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (we have chosen to use a PostgreSQL database). Prisma regards the
schema.prismafile as a single source of truth and generates its database client based on that schema, along with all the defined models (so you don't have to write boilerplate types)
- GraphQL - GraphQL is a query language developed by Facebook that has different principles than REST with the main ideas being the transporting of just the necessary data over the network to save traffic and having a single endpoint
- GraphQL Nexus - GraphQL Nexus provides us with a type-safe code-first approach to build GraphQL schemas that is scalable and improves the overall developer experience. Combined with Prisma, it is so type-safe that if you have a non-nullable field in some of your models defined in your
schema.prismaand you have forgotten to describe to Nexus that the field is indeed non-nullable you will get an indication of that, which is incredible
In order to scaffold this project we have gone over the following steps:
- we have created a Next.js application using
npx [email protected] --ts
- we have initialized AWS Amplify using
npx amplify initand we have followed the AWS Amplify Next.js tutorial for SSG apps
- we have initialized Prisma using
npx prisma initand we have added
binaryTargets = ["native", "rhel-openssl-1.0.x"]under
provider = "prisma-client-js"
- we have initialized NextAuth following the NextAuth Prisma tutorial with the corresponding environment variables in the
.envfile (notice that this file is not present in our repository as it is intended to contain sensitive secrets)
- we have added our environment variables in our AWS account > AWS Amplify > our app > Environment variables
- we have modified our
amplify.ymlfile found in our AWS account > AWS Amplify > our app > Build settings by adding
- echo "VARIABLE=$VARIABLE" >> .envunder
for each environment variable that we have in order for our environment variables to become accessible to our API routes (Lambdas)
- we have added GraphQL Nexus following this tutorial
There is also a YouTube video recording of the setup from scratch minus the GraphQL / GraphQL Nexus part. If you are going to watch the video, make sure to read the description as well.