Git Product home page Git Product logo

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

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:

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

Contributors

damla avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

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

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.

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.

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

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:

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.

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.

Create SwaggerUI

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

  • Implement SwaggerUI to test the API properly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.