/next-js-boilerplate

A personal Next JS 14+ boilerplate: Typescript + Chakra UI + Prettier + ESLint + Pre-commit (Husky + Lint-staged) + Cypress (e2e + component)

Primary LanguageTypeScriptISC LicenseISC


Boilerplate Next JS + Typescript + Chakra UI + Prettier + ESLint + Pre-commit (Husky + Lint-staged) + Cypress (e2e + component)

NEXT JS 14+ BOILERPLATE

This is a Next.js Boilerplate set up with Typescript, Chakra UI, Eslint, Prettier, Pre-commit (Husky + lint-staged) and Cypress.

Get this starter project and maximize your experience like DEVELOPER!!!


Buy Me A Coffee

Old Versions


System Requirements

  • Node.js 18.12.0 or later;
  • macOS, Windows (including WSL), and Linux are supported.

💻 Programming languages and technologies

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;
  • 🚀 All productivity to your project.

Automatic Installation

  • Install the create-next-js-boilerplate

$ yarn create next-js-boilerplate OR $ npx create-next-js-boilerplate

  • Put the Husky to work

$ yarn husky-install OR $ npm run husky-install

  • Run the development server

$ yarn dev OR $ npm run dev

  • and... ENJOY 🛠️🚧⚙️
    1. Open (http://localhost:3000) with your browser to see the result.
    2. You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

Manual Installation

  • Clone repository

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

  • Install dependencies

$ yarn OR $ npm i

  • Put the Husky to work

$ yarn husky-install OR $ npm run husky-install

  • Run the development server

$ yarn dev OR $ npm run dev

  • and... ENJOY 🛠️🚧⚙️
    1. Open (http://localhost:3000) with your browser to see the result.
    2. You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

Terminal commands

  • 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 the project files;
  • husky-install: initialize the husky;
  • type-check: runs the linter in all components and pages;
  • cypress:open: runs cypress on browser to check e2e and components tests;
  • cypress:run: runs cypress on terminal to check e2e and components tests.


Thanks for stopping by! 😁