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 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-13-boilerplate
$ yarn create next-13-boilerplate
OR $ npx create-next-13-boilerplate
$ 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
$ git clone https://github.com/AstrOOnauta/next-13-boilerplate.git
$ yarn
OR $ npm i
$ 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! ๐