Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.
Table of Contents
π
Features
Build with
- ReactJS - A JavaScript library for building user interfaces.
- Typescript - TypeScript is an open-source language which builds on JavaScript, one of the worldβs most used tools, by adding static type definitions.
- NextJS - Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
- Next PWA - Zero config PWA plugin for Next.js, with workbox
π§°
- Next PWA - Zero config PWA plugin for Next.js, with workbox
- Storybook - Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
- React Testing Library - Simple and complete testing utilities that encourage good testing practices.
- Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
- ESLint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
- Editor Config - EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
- Husky - Husky improves your commits and more
πΆ woof! - Lint Staged - Run linters against staged git files and don't let
π© slip into your code base!
β
Next Step Challenges
- Dockerize the project;
- Configure Deploy on Vercel;
- Configure CI/CD to GCP;
- Create branches to configure aditional features like:
- Styled Components
- Tailwind CSS
- GraphQL
- Some CMS
- Fix Lint Staged error with CSS files
π
Getting Started
Prerequisites
-
To run any ReactJS application you need to configure the environment on your machine.
-
Setting the environment is a simple process, so it's recommended to follow the NodeJS documentation, and if you want, install Yarn as Package Manager instead of NPM.
Clone
- Clone this repo to your local machine using:
git clone https://github.com/csorlandi/next-boilerplate.git
Setup
-
Install project dependencies;
yarn install // or npm install
Run Development Mode
-
Run project in development mode;
yarn dev // or npm run dev
-
Open a new tab on your browser and access
http://localhost:3000
; -
Be Happy!
π
Run Production Mode
-
Build the project in production mode;
yarn build // or npm run build
-
Run builded project;
yarn start // or npm run start
-
Open a new tab on your browser and access
http://localhost:3000
; -
Be Happy!
π
Run Storybook in Development Mode
-
Run storybook in development mode;
yarn storybook // or npm run storybook
-
Open a new tab on your browser and access
http://localhost:6006
; -
Be Happy!
π
Run Storybook in Production Mode
-
Run storybook in production mode;
yarn build-storybook // or npm run build-storybook
-
The command above create
storybook-static
folder; -
To see the result, open
storybook-static/index.html
file on your browser; -
Be Happy!
π
Run Project Tests
-
Run project tests watching all changes;
yarn test:watch // or npm run test:watch
-
The command above show on terminal the tests results and code coverage;
-
To see code coverage static page, open
coverage/lcov-report/index.html
file on your browser; -
Be Happy!
π
π€
Contributing
To get started...
Step 1
-
π΄ Fork this repo!
Step 2
-
π― Clone this repo to your local machine usinggit clone https://github.com/csorlandi/next-boilerplate.git
Step 3
-
π Create your feature branch usinggit checkout -b my-feature
Step 4
-
β Commit your changes usinggit commit -m 'feat: My new feature'
;
Step 5
-
π Push to the branch usinggit push origin my-feature
;
Step 6
-
π Create a new pull request
After your Pull Request is merged, can you delete your feature branch.
π
Support
Reach out to me at one of the following places!
- Linktree at @csorlandi
- Linkedin at Claudio Orlandi
- Youtube at Claudio Orlandi
π
License
This project is licensed under the MIT License - see the LICENSE file for details.
Made with