A photo by me on <a href="https://unsplash.com/photos/RyFLGHPQbwY" target="_blank">Unsplash</a>

A photo by me on Unsplash

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

📅 28 Dec 2022 | 📖 3 min read

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

Content

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?

Dejan Kostevski

My mission is to empower aspiring developers by making complex web development concepts simple and accessible. Coming from a non-traditional background, I know how challenging it can be to grasp complex topics without formal training. I am dedicated to helping others overcome challenges, launch their careers, and achieve their professional goals in tech.

Join My Newsletter

Reach out via email

© 2020 – 2025 Dejan Kostevski. All rights reserved.