Next.js Boilerplate

Description

A Typescript boilerplate web project using Next.js (App Router) and Tailwind, and Postgres. User authentication (username/password) has been set up using NextAuth.js.

This boilerplate contains:

• 🔑 User auth and session management using NextAuth.js
• 👪 ORM using Prisma
• 📄 A user signup page, sign in page, and user list page using React, Tailwind, and Daisy UI
• 🌍 State management using Redux RTK query
• ✅ CI/CD using Github Actions
• 💻 E2E testing using Cypress
• 🤡 Unit testing using Jest

Note that SSR is not included in this boilerplate as it is not really applicable user authentication (which uses redux to update state). Feel free to add SSR to your own pages though!

Installation

1. Install Node LTS
2. Install Docker
3. Clone this repo
4. Create the following .env file

# next-auth
SECRET=<anything>

# database
POSTGRES_HOSTNAME=localhost
POSTGRES_PORT=5432
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=postgres
DATABASE_URI=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOSTNAME}:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public

5. Run the following in the root directory

npm run install
npm migrate

6. For automatic tagging, allow read and write permissions for workflows in your github repo's Settings > Actions > General > Workflow permissions section.

Start locally

The following command will containerize, build, and start the database, backend, and frontend

npm run up
npm run dev

Setup user profile image upload Supabase (optional)

1. Sign up and create a project on supabase.
2. Create a public storage bucket and add SUPABASE_BUCKET to the .env above
3. Add a policy to your bucket that allows SELECT, INSERT, UPDATE, and DELETE.
4. From Settings > API, add your URL and anon/public API keys to the .env as SUPABASE_URL and SUPABASE_ANON_KEY.