Quick and easy Next.js boilerplate to jumpstart your new project

When you want to start a new project, the speed at which you go past the "hello world" matters the most.

Content

---

When starting a new project, I want to get working on the features as soon as possible. The last thing I want to do is to spend time configuring the tools. This is the reason why I decided to create a Next.js boilerplate with TypeScript, Styled Components, ESlint, Prettier and Jest.

Prerequisites

When I started making this boilerplate, there were a few things I wanted to make sure I have.

The first thing was that I wanted to work with a React framework that can do SSR (Server Side Rendering). The choice easily came down to Next.js, as I worked with it before and I liked it very much.

Of course, the next thing would be to make sure I use TypeScript. So, I quickly added TypeScript to the setup. I don't want to write any JavaScript anymore without TypeScript.

The next thing were the styles. I knew I wanted a CSS-in-JS solution for that. As I worked with styled components before, the choice was once again, very easy to make.

I knew I wanted to have unit testing capabilities right at the start. That is why I went for Jest.

To complete the initial setup, I went for ESlint and Prettier for linting and code formating, respectively.

The Repo

I packed this up in a GitHub repo here. It has several different NPM scripts that I setup. But, before running the project you have to install the dependencies of course.

npm i

As a standard in any JavaScript (and TypeScript) repo these days, you have:

npm run dev // runs development environment npm run lint // runs the linter npm run test // runs the tests

Of course, apart from these, there are a few more. Things like, running the tests with the coverage flag, as well as, building and starting the Next.js project. Finally, there is a npm run start:prod script, which builds and starts the project in a single command. This is handy to execute in CI/CD context.

Next steps

This is what is needed for me as a bare bones project to start working on new ideas quickly and easily. You are up and running in about a minute (depends on the npm i command).

As I continue using this boilerplate to start off my next projects I will be improving it. The things that come to my mind right now are: React Testing library for Integration and component testing as well as Cypress for End to End (E2E) testing.

Conclusion

I really like these kinds of projects. They are lightweight, and remove a lot of the hassle around tooling. The boilerplate I created is meant to be used as a "install and start coding right away" thingy.

What do you think? Would you add something else to this boilerplate?