NEXTjs Boilerplate

screenshot of NEXTjs Boilerplate
nextjs
react
tailwind
daisyui
prisma

NEXTjs Boilerplate

This is a boilerplate for a Next.js 14 app with user management, login, permissions, and more. It uses TypeScript, Tailwind CSS, Shadcn UI, Prisma, Postgres, React Table and React Query. Contributions welcome under the MIT License.

Overview:

The NEXTjs Boilerplate is a project template for building web applications using Next.js 13. It includes several key features such as TypeScript, Tailwind CSS, DaisyUI, Prisma, and Postgres, React Query. It also provides functionality for login, user management, user roles, user permissions, user profile, forgot password, reset password, and nodemailer.

Features:

  • TypeScript: Next.js 13 app using TypeScript for improved static typing and increased code safety.
  • Tailwind CSS: Utilizes Tailwind CSS for quick and easy styling customization.
  • DaisyUI: Includes DaisyUI, a utility-first CSS framework for rapid UI development.
  • Prisma: Uses Prisma, a modern database toolkit, for efficient and type-safe database access.
  • Postgres: Integrates with Postgres as the database management system.
  • React Query: Incorporates React Query for managing asynchronous data fetching and caching.
  • User Management: Provides features for managing user accounts, including login, user roles, and user permissions.
  • Forgot/Reset Password: Includes functionality for users to reset their passwords if they forget them.
  • Nodemailer: Uses Nodemailer for sending emails, such as password reset emails.

Installation:

To use this boilerplate, follow these steps:

  1. Clone the repository to your local machine.
  2. Install the project dependencies by running the command npm install.
  3. Create a .env.local file in the root directory of the project.
  4. In the .env.local file, define the following variables:
DB_USER=your_postgres_user
DB_PASSWORD=your_postgres_password
DB_NAME=your_database_name
SMTP_HOST=your_smtp_host
SMTP_USER=your_smtp_user
SMTP_PASSWORD=your_smtp_password

Make sure to replace the placeholder values with your own Postgres credentials, as well as your SMTP credentials.

  1. Create a migration for the nanoid function by running the command npx prisma migrate create --name nanoid.
  2. Open the file created by the migration and paste the nanoid function into it.
  3. Run the migration by executing npx prisma migrate dev.
  4. Start the development server by running the command npm run dev.

To seed data, make a GET request to http://localhost:3000/api/seeds?secret=ts&option=reset in your browser or using a tool like Postman. This will create default user roles and permissions and create a default admin user with the email info@ahmedibra.com and password 123456.

Summary:

The NEXTjs Boilerplate is a complete project template for building web applications with Next.js 13. It offers a range of features including TypeScript, Tailwind CSS, DaisyUI, Prisma, and Postgres, React Query. Users can easily set up a development environment by cloning the repository and following the installation instructions. The boilerplate provides functionality for user management, password reset, and email sending using Nodemailer. Contributions to the project are also welcome. The boilerplate is licensed under the MIT License.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

Zustand

Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.