Next.js Boilerplate

Overview
Requirements
Getting Started
Project Structure
Add Prisma (optional)

Overview

This is a comprehensive Next.js boilerplate that provides a solid foundation for starting your web development projects. It includes essential configurations, tools, and libraries to streamline the development process.

Next.js - A React framework for building production grade applications that scale.
TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
React Hook Form - A performant and flexible library for building forms.
Zod - A TypeScript-first schema validation library.
ESLint - A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
Prettier - An opinionated code formatter.
Husky - A tool that makes it easy to use githooks as if they are npm scripts.
React-use - A collection of essential hooks for React.
clsx - A tiny utility for constructing className strings conditionally.

Requirements

Node.js (18.x or later)
npm (9.x or later)

Getting Started

Clone the repository and navigate to the project folder:

git clone git@github.com:josserden/nextjs-boilerplate.git

Install the dependencies:

npm install

Create new directory for your project:

mkdir my-project

Removing the git history:

cd my-project
rm -rf .git

Install the dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result. Congratulations! You've successfully started your Next.js project.

Project Structure

Description of object structure

Structure:

├── .husky -> folder with githooks
|-- app -> folder with the main code of the project (pages, layout, etc.)
|-- components -> folder with reusable components
    |-- button -> folder with buttons components
    |-- form -> folder with form components
    |-- navigation -> folder with navigation components
    |-- ui -> folder with ui components
|-- public -> folder with static files (images, fonts, etc.)
<!-- You can create these folders already in work -->
|-- data -> data for the project ( from graphql, json, etc.)
|-- utils -> helpers, functions, etc.

Create a components folder for each module

Example:

# ✅ Good

├── components
    ├── layout
        ├── Header
            ├── index.ts -> file for re->export
            ├── Header.tsx -> main component
            ├── Logo -> folder with component for this module
                ├── index.ts
                ├── Logo.tsx
        ├── Footer
            ├── index.ts
            ├── Footer.tsx

Global and reusable css classes should be placed in the globals.css.

Example:

/*globals.css */
@layer base {
  html {
    @apply scroll-smooth;
  }
}

@layer components {
  .your-class {
    @apply ...;
  }
}

Common components

This project has a folder with common components that are used in more than one module. You can use them in your project or update them if you don't need them.

Add Prisma

If you want to add Prisma to your project, you can use this guide or official documentation.

josserden/nextjs-boilerplate