Welcome to the Next.js Boilerplate, an open-source template for all your nextjs projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! ๐
Inspired by Next enterprise
You can test the demo here.
email:
test@mail.com
password:Azerty123!
With this template, you get all the awesomeness you need:
- ๐๏ธ Next.js - Fast by default, with config optimized for performance
- ๐ Tailwind CSS - A utility-first CSS framework for rapid UI development
- โจ ESlint and Prettier - For clean, consistent, and error-free code
- ๐ซ Dev Container - For a consistent development environment
- ๐ณ Docker - For easy deployment
- ๐ PostgreSQL - A powerful, open-source relational database system
- ๐๏ธ Prisma - Next-generation ORM for Node.js and TypeScript
- โก Redis - An in-memory data structure store, used as a database, cache, and message broker
- ๐ Auth.js - A simple, lightweight authentication library
- ๐ ๏ธ Extremely strict TypeScript - With
ts-reset
library for ultimate type safety - ๐ Bundle analyzer plugin - Keep an eye on your bundle size
- ๐งช Jest and React Testing Library - For rock-solid unit and integration tests
- ๐ Conventional commits git hook - Keep your commit history neat and tidy
- ๐ฏ Absolute imports - No more spaghetti imports
- โ๏ธ Health checks - Kubernetes-compatible for robust deployments
- ๐งฉ Radix UI - Headless UI components for endless customization
- ๐ CVA - Create a consistent, reusable, and atomic design system
- ๐ค Renovate BOT - Auto-updating dependencies, so you can focus on coding
- ๐ฉน Patch-package - Fix external dependencies without losing your mind
- ๐ GitHub Actions - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
- ๐ฏ Perfect Lighthouse score - Because performance matters
- ๐ข Semantic Release - for automatic changelog
- ๐ป T3 Env - Manage your environment variables with ease
- ๐ฆ Unused dependencies checker - Keep your dependencies clean
- โ๏ธ Nodemailer - Send emails with ease from any smtp server
- ๐ Trpc - Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
- ๐จ Shadcn - Beautifully designed components
- Next.js Enterprise Boilerplate
If you want to use the dev container, please follow the container stack instructions.
To get started with this boilerplate, follow these steps:
- Fork & clone repository:
## Don't forget to โญ star and fork it first :)
git clone https://github.com/rharkor/next-boilerplate
- Create a
.env
file and add the following environment variables:
cp .env.example .env
- Initialize the project:
npm run init
- Install the dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 with your browser to see the result.
Easily deploy your Next.js app with Vercel by clicking the button below:
The following scripts are available in the package.json
:
init
: Initializes the project by setting up your informationdev
: Starts the development server with colorized outputbuild
: Builds the app for productionstart
: Starts the production serverlint
: Lints the code using ESLintlint:fix
: Automatically fixes linting errorsprettier
: Checks the code for proper formattingprettier:fix
: Automatically fixes formatting issuesanalyze
: Analyzes the bundle sizes for Client, Server and Edge environmentstest
: Runs unit and integration testse2e:headless
: Runs end-to-end tests in headless modee2e:ui
: Runs end-to-end tests with UIformat
: Formats the code with Prettierpostinstall
: Applies patches to external dependenciespreinstall
: Ensures the project is installed with Npmseed
: Seeds the database with test datadepcheck
: Checks for unused dependencies
The boilerplate comes with a pre-configured Docker container stack and a dev container. The stack includes the following services:
- Next.js - A React framework for building fast and scalable web applications
- PostgreSQL - A powerful, open-source relational database system
- Redis - An in-memory data structure store, used as a database, cache, and message broker
To start the development container in vsCode see. You can also use devPod to easily start the development container.
Ports:
- Next.js: 3000
- PostgreSQL: 5432
- Redis: 6379
- Desktop (password: vscode): 6080
This boilerplate comes with various testing setups to ensure your application's reliability and robustness.
- Unit and integration tests: Run Jest tests using
npm run test
This boilerplate uses Tailwind CSS for styling and CVA for creating a powerful, easy-to-use design system. If you want to learn more about the setup, check out this fantastic video by Vercel:
While CSS-in-TS libraries such as Stitches and Vanilla Extract are great for building type-safe UI components, they might not be the perfect fit for everyone. You may prefer more control over your stylesheets, need to use a framework like Tailwind CSS, or simply enjoy writing your own CSS.
Creating variants using traditional CSS can be a tedious task, requiring you to manually match classes to props and add types. CVA is here to take that pain away, allowing you to focus on the enjoyable aspects of UI development. By providing an easy and type-safe way to create variants, CVA simplifies the process and helps you create powerful design systems without compromising on the flexibility and control of CSS.
While this boilerplate doesn't include a specific state management library, we believe it's essential for you to choose the one that best suits your project's needs. Here are some libraries we recommend for state management:
Tanstack query is a powerful, fast, and lightweight data fetching and caching library. It provides a concise, declarative API for fetching data that integrates seamlessly with React.
T3 Env is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. Youโll never again struggle with runtime errors caused by incorrect environment variable usage.
Config file is located at env.mjs
. Simply set your client and server variables and import env
from any file in your project.
export const env = createEnv({
server: {
// Server variables
SECRET_KEY: z.string(),
},
client: {
// Client variables
API_URL: z.string().url(),
},
runtimeEnv: {
// Assign runtime variables
SECRET_KEY: process.env.SECRET_KEY,
API_URL: process.env.NEXT_PUBLIC_API_URL,
},
})
If the required environment variables are not set, you'll get an error message:
โ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }
Contributions are always welcome! To contribute, please follow these steps:
- Fork the repository.
- Create a new branch with a descriptive name.
- Make your changes, and commit them using the Conventional Commits format.
- Push your changes to the forked repository.
- Create a pull request, and we'll review your changes.
For support, contact me on discord at ryzer
or by email at louis@huort.com
.
This project is licensed under the MIT License. For more information, see the LICENSE file.
Bart Stefanski ๐ป |
Jakub Jabลoลski ๐ |
Louis Huort ๐ป |