A photo by me on Unsplash
Time to Read: 3 mins
When you want to start a new project, the speed at which you go past the "hello world" matters the most.
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.
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.
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.
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 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.
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.
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?
Share this article:on Facebookon Twitteron Linkedin
I am a self-taught Web Developer. My mission is to explain things in a simple but understandable way. During the years, I have helped several Junior Developers kick start their careers, land an internship or a job or just in general get over the coding hurdle that they have encountered.