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

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

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