Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.
)
)
){kind=icon}
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-staticfolder; -
To see the result, open
storybook-static/index.htmlfile 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.htmlfile 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
1.9k Dec 26, 2022
8 Oct 24, 2022
2 Sep 21, 2021
36 Dec 26, 2022
21 Nov 15, 2022
16 Dec 13, 2022
4 Nov 28, 2022
16 Dec 27, 2022
2 May 31, 2022
7 Nov 21, 2022
2 Feb 17, 2022
9 Sep 15, 2022
15 Dec 20, 2022
6 Dec 15, 2022
28 Nov 27, 2022
26 Jan 4, 2023
66 Nov 20, 2022
2.5k Dec 26, 2022
9 Dec 8, 2022