Next Js Boilerplate

Overview

This Next.js Boilerplate is a starter project that is set up with various technologies to enhance the development experience. It includes features such as Typescript, Chakra UI, Eslint, Prettier, Pre-commit (Husky + lint-staged), and Cypress. The boilerplate provides advantages offered by Next.js, supports styling with Chakra UI, and has a dark/light theme setup. It also includes type support through Typescript, code check and formatting through ESLint and Prettier, pre-commit checks through Husky and Lint-staged, and E2E and component testing with Cypress. With a minimal folder structure and SEO-friendly setup, this boilerplate offers productivity to your projects.

Features

• All of Next's advantages (Live reload, SSR, SSG, native API...)
• Styling with Chakra UI
• Setup with dark/light theme support
• Types support by Typescript
• Code check and formatter by ESLint and Prettier
• Pre-commit check by Husky and Lint-staged
• E2E and Component testing with Cypress
• Absolute imports (~)
• Minimal folder structure
• SEO friendly

Automatic Installation

1. Install the create-next-js-boilerplate package:

   $ yarn create next-js-boilerplate
   

   or

   $ npx create-next-js-boilerplate
   

2. Put Husky to work by running the following command:

   $ yarn husky-install
   

   or

   $ npm run husky-install
   

3. Run the development server:

   $ yarn dev
   

   or

   $ npm run dev
   

Manual Installation

1. Clone the repository:

   $ git clone https://github.com/AstrOOnauta/next-js-boilerplate.git
   

2. Install the project dependencies:

   $ yarn
   

   or

   $ npm install
   

3. Put Husky to work by running the following command:

   $ yarn husky-install
   

   or

   $ npm run husky-install
   

4. Run the development server:

   $ yarn dev
   

   or

   $ npm run dev
   

Terminal Commands

Here are some useful terminal commands provided by the Next.js boilerplate:

• dev: runs your application on localhost:3000
• build: creates the production build version
• start: starts a simple server with the build production code
• prettier: runs the prettier commands in all components and pages
• lint: runs the lintering commands in all components and pages
• lint-staged: runs the linting & prettier commands to those files which are changed, not all project files
• husky-install: initialize Husky
• type-check: runs the linter in all components and pages
• cypress:open: runs Cypress on a browser to check E2E and component tests
• cypress:run: runs Cypress on a terminal to check E2E and component tests

Summary

The Next.js Boilerplate is a comprehensive starter project for developers. It comes with various features and technologies such as Typescript, Chakra UI, ESLint, Prettier, Husky, Lint-staged, and Cypress. The boilerplate offers advantages provided by Next.js and supports efficient styling with Chakra UI. With an easy installation process and useful terminal commands, this boilerplate enhances productivity and provides a solid foundation for developing Next.js applications.