Recipe to create stunning boilerplate Nextjs
Tags: tutorial, react, webdev, nextjs
Published: 2023-07-11 14:07:17

Revolutionize your Front-End Workflow: A Guide to crafting Beautiful Boilerplate Code Nextjs

Here is my recipe for creating your my boilerplate. Recently, my job has involved creating front-end projects from scratch, which can be inefficient with repetitive tasks. With my experience, I hope to provide insight for everyone to create their own boilerplate with their own style. Feel free to add, use or comment.

**Tech Stack**

I choose the most common tech stack that popular in this year to setup my boilerplate bellow are the details: 

- Next.js v12 for fast and reliable performance
- Tailwind CSS for styling, with many pre-built components
- Jest for high-quality code testing
- Tanstack/React-Query for managing and caching data in React applications
- Axios for HTTP requests
- Day.js for easy-to-use date and time formatting
The app is also set up as PWA, which means that users can access it offline and enjoy a seamless mobile user experience.

**Unit Test/Coverage**

To ensure good code quality, it is important to prepare unit tests for each component and function, and to cover them thoroughly. Setting up these tests should be one of the initial steps when creating a repository. I use instanbul-badges-readme to generate a report that shows the percentage of code coverage for the repository automatically. 

How to install https://www.npmjs.com/package/istanbul-badges-readme

add on our script package.json

```markdown
script: {
	"test:coverage-badge": "istanbul-badges-readme"
}
```

feel free to custom script name `test:coverage-badge` 

here’s the result on my README.md
```
## uTests Coverage Status

| Statements                                                                         | Branches                                                                       | Functions                                                                           | Lines                                                                       |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-77.12%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-54.23%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-87.09%25-yellow.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-81.11%25-yellow.svg?style=flat) |
```

**Lighthouse Performance**
make sure all things keep performance as long the code changes frequently merged onto main branch. We need to identify the root cause of the issue in order to fix it in small parts. I have chosen Google Lighthouse to measure the performance of my app and also create automatically generate a report.

let’s add custom script to generate report

```markdown
script: {
	"lighthouse-report": "npx lighthouse-badges --urls https://localhost:3000 -o lighouse"
}
```

before you run the script make sure you have been run the app on `https://localhost:3000` if not you can customize the script

then run the script `lighthouse-report` 

wait few seconds let’s see the magic. all file needed generate on lighthouse directory then readme updated as well

here’s the result
```
### Lighthouse

![Lighthouse Accessibility Badge](./lighthouse/lighthouse_accessibility.svg) ![Lighthouse Best Practices Badge](./lighthouse/lighthouse_best-practices.svg) ![Lighthouse Performance Badge](./lighthouse/lighthouse_performance.svg) ![Lighthouse PWA Badge](./lighthouse/lighthouse_pwa.svg) ![Lighthouse SEO Badge](./lighthouse/lighthouse_seo.svg)
```

**Setup Commit, Eslint, Prettier**
The detail of cool setup like a pro https://dev.to/tomibudis/setup-repository-nextjs-app-like-a-pro-1lij

**Publish NPM Registry**
If you have a large organization that intends to utilize this boilerplate, it would be beneficial to publish it on a public or private registry. In my case, I have published it on the npm public scope. The advantage of doing so is that it allows for easy installation and communication with other teams.

https://docs.npmjs.com/creating-and-publishing-scoped-public-packages

in my case I just add on my script
```
script: {
	"publish": "npm public --access public"
}
```

**Script to install own boilerplate with CLI**

here the cool thing we can install our boilerplate in our terminal directly using bin script
```
const { execSync } = require("child_process");

const runCommand = (command) => {
  try {
    execSync(`${command}`, { stdio: "inherit" });
  } catch (err) {
    console.error(err);
    return false;
  }
  return true;
};

const repoName = process.argv[2];
const gitCheckoutCommand = `git clone https://github.com/tomibudis/codelabs-next-pwa.git ${repoName}`;
const installDepsCommand = `cd ${repoName} && npm install`;

console.log(`Init project ${repoName}`);
const checkedOut = runCommand(gitCheckoutCommand);
if (!checkedOut) process.exit(-1);

console.log("Installing dependencies...");
const installDeps = runCommand(installDepsCommand);
if (!installDeps) process.exit(-1);

console.log(
  "Init project successfully! follow the following command script to start."
);
```
Let's put this file in the `bin` directory and name it `cli.js`. You can customize this script to execute any command you want. Then, you can run the following command to install your boilerplate:

`npx tomibudis/codelabs-next-pwa testing-clone-repo`

**Documentation**

In order to make the boilerplate easy to maintain in the future, it is important to put proper documentation in place. This documentation should explain each section of the boilerplate, including the prerequisites, how to install it, and how to run it locally.

The documentation should be clear and concise, and it should be written in a way that is easy to understand. It should also be up-to-date, so that it reflects the latest changes to the boilerplate.

By putting proper documentation in place, you can make it easier for yourself and others to maintain the boilerplate in the future.

Here are some specific things that you should include in the documentation:

- The prerequisites for installing and running the boilerplate.
- The steps involved in installing and running the boilerplate.
- A description of each section of the boilerplate.
- Any troubleshooting tips that you have found to be helpful.

**Conclusion**

the result of my exploration as linked bellow, please feel free to suggest other things that would make the boilerplate better. Thank you!

github: https://github.com/tomibudis/codelabs-next-pwa
npm: https://www.npmjs.com/package/codelabs-next-pwa
preview: https://codelabs-next-pwa.hellotoms.com