Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-next-js-boilerplate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

Old Versions

Version 13.x

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! 😁