A simple and minimum boilerplate as possible for NextJs with TypeScript and Redux Toolkit. This boilerplate is using SASS as a CSS interpreter, ESLint, Stylelint, Prettier, and Husky. You are free to choose your preferred CSS frameworks or utility since this boilerplate doesn't have any.
Table of Contents:
This boilerplate is based on create-next-app@latest --typescript and follow the NextJs Redux sample. By default, the boilerplate is designed for NextJs Server-Side Rendering (SSR), but can easily changed to NextJs Client-Side (CSR). For linting, instead of using next lint, this boilerplate use ESLint, Stylelint, and Prettier. Feel free to update the linting rules to your liking. Husky is added to do linting before committing developers changes. The boilerplate also includes a Visual Studio Code settings and can be found in .vscode/settings.json.
NodeJs ^18.17.0
https://nodejs.org/en/download/releases/
Visual Studio Code
https://code.visualstudio.com/
ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Stylelint
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Indent Rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
- Download, Fork, or Clone this repo
- Download and install node.js ^18.17.0. If you need multiple version you can use nvm for Linux or nvm-windows for Windows
- Open your preferred shell.
If your using PowerShell on Windows as Administrator, you need to execute this command
# windows powershell
$ Set-ExecutionPolicy RemoteSigned- Navigate to this repo and run
npm run init:all
# install dependencies, prepare prettier and husky
npm run init:all- Once dependencies are installed, you can run the following:
# run development
npm run dev
# run build
npm run build
# run build server
npm run start
# run format check
npm run check:format
# run lint check
npm run check:lint
# run types check
npm run check:types
# run check format, lint, types, and build
npm run check:all- You can check http://localhost:3000/ on your browser.
- The boilerplate is designed for NextJs Server-Side Rendering, but can easily changed to [NextJs Client Side](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive.
If you have question, you can always contact me on Twitter @genesis_neo and of course here in GitHub @genesisneo. Thank you.
-=[ ❤️ ]=-