Here is (yet another) boilerplate. I'm sure this will change with time, but lately I've been building so many side-projects that it makes sense to get some of my initial setup tracked as an independent repository.
This repository was bootstrapped with npx create-next-app
(docs here) using a Typescript template. Pretty much everything was left as-is, so there should be no surprises from the NextJS perspective.
I have a few preferred lint rules and formatting setup that I use on all of my projects. I installed Prettier and configured it to work in concert with ESLint. Most of the rules should be familiar to anyone wanting to try this boilerplate, I did change a few rules from the Airbnb standard, and added some rules that help keep code a little more organized.
I added Jest for testing individual pieces of logic. I configured it to use SWC instead of Babel to speed up test runs.
To keep code consistently clean as the project evolves, I added a pre-commit hook that will format the code whenever you create a commit. If you need to make a quick commit and bypass this, you can always git commit --no-verify
, but I don't recommend it.
Lately I've been enjoying Chakra UI for building FE UI easily and quickly. It has a bit of a learning curve, but so far I've been impressed with how well their patterns scale in real use cases. I've been using this library in a professional context for a little over half a year at the time of creating this repo and my opinion of Chakra continues to grow more and more positive.
The Chakra setup here is completely standard. There is no custom or bespoke setup to surprise anyone already used to using Chakra.
When you need to share state between multiple components, and also dispatch state changes from multiple levels in the tree, the go-to tool in React is Redux. While it has more or less solved most common state management issues for React, it is a bit verbose and dealing with types can be tricky. For this reason, I added Redux Toolkit to manage Redux. Redux Toolkit is officially supported by the Redux team, so the API is very good and has been around for a while.
The landscape of NextJS is constantly evolving, especially with the release of NextJS 13. When the App Directory feature is out of Beta, I can imagine that the structure of Next may be different enough that using npx create-next-app
would make more sense than using this boilerplate if you are starting a new project.