https://github.com/astroonauta/next-js-boilerplate

A personal Next JS 14+ boilerplate: Typescript + Chakra UI + Prettier + ESLint + Pre-commit (Husky + Lint-staged) + Cypress (e2e + component)
https://github.com/astroonauta/next-js-boilerplate

boilerplate chakraui cypress eslint frontend husky lintstaged next nextjs precommit prettier typescript

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/astroonauta/next-js-boilerplate
• Owner: AstrOOnauta
• License: isc
• Created: 2023-05-06T16:30:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-19T21:01:43.000Z (about 1 year ago)
• Last Synced: 2023-12-20T13:31:09.643Z (about 1 year ago)
• Topics: boilerplate, chakraui, cypress, eslint, frontend, husky, lintstaged, next, nextjs, precommit, prettier, typescript
• Language: TypeScript
• Homepage: https://next-js--boilerplate.vercel.app
• Size: 1.42 MB
• Stars: 67
• Watchers: 2
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        





    



NEXT JS 14+ BOILERPLATE




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



This is a [Next.js](https://nextjs.org/) 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](https://github.com/AstrOOnauta/next-js-boilerplate/tree/v13.x)




## System Requirements

- Node.js 18.12.0 or later;

- macOS, Windows (including WSL), and Linux are supported.

## 💻 Programming languages and technologies

- [NextJS](https://nextjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Chakra UI](https://chakra-ui.com/)

- [Eslint](https://eslint.org/)

- [Prettier](https://prettier.io/)

- [Husky](https://typicode.github.io/husky/#/)

- [Lint-staged](https://github.com/okonet/lint-staged)

- [Cypress](https://www.cypress.io/)

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