NextJs + Typescript + Redux Toolkit Boilerplate

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:

• Description
• Requirement
• Development
• Question

---

Description

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.

---

Requirement

NodeJs ^18.17.0
https://nodejs.org/en/download/releases/

Visual Studio Code
https://code.visualstudio.com/

Required Extensions

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

Optional Extensions

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Indent Rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

---

Development

• 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.

---

Question:

If you have question, you can always contact me on Twitter @genesis_neo and of course here in GitHub @genesisneo. Thank you.

---

-=[ ❤️ ]=-