jsdude0220 / next-13-boilerplate

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

NEXT 13 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!!!

System Requirements

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

💻 Programming languages and technologies

• NextJS
• TypeScript
• Chakra UI
• Eslint
• Prettier
• Husky
• Lint-staged
• Cypress

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-13-boilerplate

$ yarn create next-13-boilerplate OR $ npx create-next-13-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-13-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! 😁