It Doesn't Get Faster Than This: Launching a Next.js Project with a Professional Boilerplate

In the world of software development, starting a new project can be time-consuming and repetitive, especially if you have to create the folder structure, initial settings, tool configuration, and coding standards from scratch every time. Boilerplates can help you solve this problem.

Boilerplate is a basic project that includes the initial structure, settings, and tools ready to start development quickly. Instead of spending time on repetitive tasks, by cloning a Boilerplate, you can jump straight into developing the main logic of your project.

In this article, we are going to review and set up one of the ready-made Boilerplates for the popular Next.js framework:

🔗 Repo used: Nextjs-Frontend-Boilerplate

Why did I choose this repo? Of course! Because it's mine😂

Just kidding,I always wanted my project to be of the highest quality from the very beginning, and I couldn't find a good front-end boilerplate on the internet. Some either didn't have the necessary tools or others, under the influence of sponsors, used technologies that were not suitable for enterprise and advanced projects and created dependencies on external resources. As a result, I took action myself and was able to create one of the most complete boilerplates in the field of front-end development (although it still has some shortcomings...).

To get fully acquainted with this Boilerplate, you can read the article My Ultimate Next.js Frontend Starter Kit — Clean, Fast, Typed. If you are short on time, reading the desired sections is also sufficient

This guide is suitable for those who:

• Are new to Next.js and are looking for a quick start


• Want to start a clean and organized project without getting involved in complex configurations.


• Developers looking to build an MVP quickly


• Those who want to build a scalable site with powerful tools

Next, we'll walk you through how to clone, install, and run this Boilerplate step by step.

Prerequisites

Before you start setting up your project, make sure you have the following basic tools installed on your system. These tools are essential for Boilerplate to run properly:

✅ 1. Node.js

Next.js-based projects require Node.js to run.

Recommended version: Node.js 20.x

🔗 Download Node.js

Note: I highly recommend using a Node version management tool like NVM or FNM instead of manually installing it. It's not hard to set up at all

To check if Node.js is installed, run the following command in the terminal:

node -v

✅ 2. Git

You need Git to clone the repository from GitHub, so you need to install it

🔗 Download Git

Check if Git is installed:

git --version

✅ 3. VS Code Code Editor

Having an advanced code editor helps you write code, manage files, and use extensions more easily. To use all the power of this boilerplate, you should use vscode because part of this project is integrated with it, which provides a much better development experience.

🔗 Download Visual Studio Code

✅ 4. Installing VS Code extensions

As I said in the previous section, part of this project is integrated with vscode, such as internationalization, user interface, code formatter, etc.

To use the full power, you need to install the following extensions:

• 🧹 dbaeumer.vscode-eslint
  


• 🎨 PKief.material-icon-theme
  


• 🎭 ms-playwright.playwright
  


• 🧪 vunguyentuan.vscode-postcss
  


• 💥 YoavBls.pretty-ts-errors
  


• 💨 bradlc.vscode-tailwindcss
  


• ⚗️ vitest.explorer
  


• 🔐 mikestead.dotenv
  


• 🌍 lokalise.i18n-ally
  


• 🧬 vunguyentuan.vscode-css-variables
  


• 🔁 formulahendry.auto-rename-tag
  


• 🔚 formulahendry.auto-close-tag
  


• 📝 streetsidesoftware.code-spell-checker
  


• 📁 SeanGilbertson.auto-collapse-folders
  

✅ 5. Install Fira Code Font (Optional)

The Fira Code font is one of the most popular fonts for programming.

Its distinctive feature is its support for Code Ligatures such as =>, ===, != and ..., which greatly increases the readability of the code.

🔗 Download Fira Code

Now that we have prepared the necessary tools, in the next section we will enter the cloning stage of the project.

Cloning the project

To set up the project, you must first download (or clone) the source code from GitHub to your system. You can do this in two ways (I recommend the second method):

🔹 Method 1: Using the Terminal

The simplest way to clone the project is to use the Terminal (Command Line). Just enter the following command:

git clone https://github.com/shaadcode/Nextjs-Frontend-Boilerplate.git

Then enter the project folder:

cd Nextjs-Frontend-Boilerplate

Now you are ready to continue the installation steps.

🔹 Method 2: Using Source Control in VS Code

💡 Note: If the Git extension is not installed on VS Code, install it from the Extensions section to benefit from the Source Control features.

If you're not comfortable with the terminal, you can use Visual Studio Code's built-in cloning capabilities:

1. Open VS Code.


2. In the left sidebar, click the Source Control icon (the Git branch symbol).


3. Click the Clone Repository option.


4. Enter the repo address:
   

https://github.com/shaadcode/Nextjs-Frontend-Boilerplate.git

1. Choose a path to save the project on your system.


2. After the clone is complete, VS Code will ask you if you want to open the project; click Open.

Now that you've cloned the project, the next section will install the project's dependencies.

Installing Dependencies

After cloning the project, we need to install its dependencies so that the project is ready to run and develop. These dependencies include libraries and tools defined in the package.json file.

In this project, using pnpm is recommended as the package management tool. pnpm is a very suitable option for modern projects due to its more optimized structure, higher speed, and lower disk space consumption compared to other tools (such as npm and yarn).

⚡️ Installation using pnpm (recommended)

If you haven't installed pnpm yet, install it first with the following command:

npm install -g pnpm

Then run the following command to install the project dependencies:

pnpm i

This command will install all the required packages and prepare the project for execution.

📦 Installation using npm (optional)

If you don't want to use pnpm, you can also use npm (the default Node.js tool):

npm install

💡 Note: Using pnpm in projects that have a large number of dependencies or where you are working on several similar projects will save you a lot of time and storage space.

In the next step, we will run the project in development mode to see the result in the browser.

Running the project in development mode

After installing the dependencies, it is time to run the project in development mode. To do this, run the following command in the terminal:

pnpm dev

This command will create a Next.js server at http://localhost:3000.

Since this project uses Next-Intl, the default language key (currently either en or fa) is placed at the end of the address bar

After opening the page http://localhost:3000, you will see a button in the middle of the page with the content Hello world!

💡 Note: If port 3000 is already in use on your system, Next.js will automatically use an alternative port (e.g. 3001). The new address will be displayed in the terminal.

Congratulations, you can now start developing🤠

If you want to delve deeper into the capabilities of this Boilerplate, I will introduce some useful resources later in the article.

Conclusion

In this guide, we went through the step-by-step process of setting up a new project using the ready-made Boilerplate for Next.js. From cloning the GitHub repo to installing dependencies and running the project in development mode, you now have a working project ready for development.

Using this Boilerplate has many advantages, including:

• Saving time on initial project setup


• Pre-configured professional file structure and settings


• Using modern and powerful technologies


• Excellent compatibility with Rapid Prototyping and MVP creation

This template is especially suitable for developers who want to focus on the main logic of the project, without wasting time on initial settings.

🔗 Useful Links

• 📚 To learn about the technologies used, folder structure and other features of this boilerplate
  
  My Ultimate Next.js Frontend Starter Kit — Clean, Fast, Typed




• 📁 Project repo on GitHub:
  
  https://github.com/shaadcode/Nextjs-Frontend-Boilerplate




• 📘 Official Next.js documentation:
  
  https://nextjs.org/docs