damla / nextjs-w-app-router-starter

NextJS app with App Router, Supabase, Prisma, NextAuth, SwaggerUI, TypeScript, ESLint, Prettier, Husky and Tailwind CSS

NextJS Application Using App Router

⚠️ In Progress

• If you want to follow up on the updates and contribute, please check the project board.

Installation Settings

✔ What is your project named? … nextjs-w-app-router-starter

✔ Would you like to use TypeScript with this project? … No / Yes

✔ Would you like to use ESLint with this project? … No / Yes

✔ Would you like to use Tailwind CSS with this project? … No / Yes

✔ Would you like to use src/ directory with this project? … No / Yes

✔ Use App Router (recommended)? … No / Yes

✔ Would you like to customize the default import alias? … No / Yes

✔ What import alias would you like configured? … @/*

Getting Started

⚠️ For this project, the default package manager utilized is pnpm. If you would like to use a different one, you can modify the .lintstagedrc.js and husky files accordingly.

First, run the development server:

pnpm dev
# or
yarn dev
# or
npm run dev

Run the PostgreSQL database locally on the docker container:

docker compose up

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

⚠️ SwaggerUI does not support cookie authentication out of the box therefore, authentication need to be done on the UI manually. See:

• https://swagger.io/docs/specification/authentication/cookie-authentication/

• swagger-api/swagger-js#1163

nextjs-w-app-router-starter's Issues

Refactor the Application

Create SwaggerUI

Is your feature request related to a problem? Please describe.

• Implement SwaggerUI to test the API properly.

Add Supabase

Is your feature request related to a problem? Please describe.

Add Supabase to utilize PostgreSQL as a database.

Describe the solution you'd like
To improve the scalability of your project, Supabase is an excellent solution to consider.

Create a LICENSE, PR and Issue Templates

Utilizing the project with Prettier, Husky, and Lint Staged

Is your feature request related to a problem? Please describe.

Create a starter using husky, prettier, and lint staged.

Describe the solution you'd like

The starter should have these packages to be more developer friendly and robust.

Additional context

A list of resources that may be helpful:

• https://amanhimself.dev/blog/setup-nextjs-project-with-eslint-prettier-husky-lint-staged/#setting-up-lint-staged

• https://nextjs.org/docs/app/building-your-application/configuring/eslint

Create Posts

Is your feature request related to a problem? Please describe.

• Convert the Users endpoint to the Posts (maybe something else) endpoint and edit everything according to it.

Dockerize the project

Is your feature request related to a problem? Please describe.

• Dockerize the project to deploy other platforms easily and run Postgres locally.

Add Auth

Is your feature request related to a problem? Please describe.
It is necessary to include authentication to safeguard the endpoints.

Describe the solution you'd like
Planning to add authentication by using NextAuth.

Additional context

• To modify the data, users must have the admin role. If not, they can only view the data.

JWT Implementation

Is your feature request related to a problem? Please describe.

• Implement JWT in the right way.

• Use token to pass user information to the session.

Implement the Design

Description

• Implement NextUI as a UI Library.

• Follow this guide for installation since the types give errors in the global loading.

• Use together with TailwindCSS.

• Implement a design by utilizing TailwindCSS.

Resources

• https://nextui.org/docs/frameworks/nextjs#app-directory-setup

Add Prisma

Is your feature request related to a problem? Please describe.

• Add a Prisma ORM.

Describe the solution you'd like

• Prisma ORM will be implemented with an example User model.

model User {
  id        String   @id @default(uuid())
  name      String
  email     String   @unique
  role      String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

These are the commands to initialize Prisma ORM.

	pnpm add @prisma/client && pnpm add -D prisma
	pnpm prisma init --datasource-provider sqlite
	pnpm prisma migrate dev --name init
	pnpm add -D ts-node
	pnpm prisma db seed