How to properly start a NextJS project

Introduction

When it comes to start a new project you definitly don’t know how long it will be and how many people will works on. It’s why starting with a strong base project has it’s importance.

In this article I will give you some tools I’m using daily, why you should use it and how they works.

You can jump to the most intersting if you know others but I strongly suggest you to read all. Here a the list :

Introduction: Setup NextJS project
Eslint
Prettier
Husky
nvmrc
npmrc

You can found the boilerplate of this article about the NextJS project added the tools listed here :

https://github.com/Timsht/NextJS-boilerplate-team-start

Let’s start

To properly start a Next.js project (replace « my-app » with the name of your project):

1. First, you’ll need to make sure you have Node.js and npm or yarn installed on your computer.

2. Next, create a new directory for your project and navigate into it in your terminal.

3. Run the command

npx create-next-app my-app

yarn create next-app my-app

4. Once the project is created, navigate into the new directory by running

cd my-app

5. You can start the development server by running

npm run dev

yarn dev

6. You should now be able to see your Next.js app running at http://localhost:3000

Once the project is created, it’s good practice to check the folder’s structure and see the basic pages and components :

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock

and also the

package.json

file which contain all the dependencies that the project needs.

You can also add some custom configuration to your

next.config.js

file, like setting up environment variables, custom webpack rules, and more.

It’s also a good idea to use a CSS preprocessor like SASS, LESS, or postCSS and set up a CSS architecture such as BEM, SMACSS, or OOCSS, to make your styles more maintainable and scalable.

You can also add a testing framework like Jest, Mocha or Cypress for integration tests, and also a code coverage tool like Istanbul. I will talk more about it in next articles.

Another good practice is to set up linting and formatting for your project, such as ESLint and Prettier, to help maintain a consistent code style throughout the project.

ESLint

ESLint is a popular tool for linting JavaScript code. Linting is the process of automatically checking code for potential errors, such as syntax mistakes, style issues, and logical bugs. ESLint uses a set of rules to analyze your code and identify any issues. These rules can be configured to match your project’s specific coding conventions and best practices.

To use ESLint in your Next.js project, you first need to install it by running

npm install eslint --save-dev

yarn add eslint --dev

in your project’s directory.

Once ESLint is installed, you’ll need to set up a configuration file. The most common configuration file is called

.eslintrc

and it should be placed in the root of your project. You can either create this file manually or use the command

npx eslint --init

to generate a basic configuration file.

In the .eslintrc file, you can specify the rules that ESLint should use, along with any additional plugins you want to use. For example, you can enable the react and react-hooks plugins to lint React code, or the import plugin to lint your imports.

Once your configuration is set, you can run ESLint on your code by running

npx eslint .

yarn eslint

I share you my config :

// .elsintrc.json
{
  "extends": ["next", "next/core-web-vitals", "eslint:recommended"],
  "globals": {
    "React": "readonly",
    "JSX": "readonly"
  },
  "rules": {
    "no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_" }]
  }
}

You can also set up your editor or IDE to use ESLint, so that it can show you the issues in your code as you write it. This can be very helpful because it allows you to fix the issues immediately and avoid committing or pushing the wrong code.

ESLint is widely used in the JavaScript community, and it’s a very powerful tool that can help you to improve the quality of your code and to have a more consistent codebase. It’s important to use it wisely and to not overuse it, in order to avoid slowing down the development process.

Prettier

Prettier is a code formatter that automatically formats your code according to a set of predefined rules. It’s designed to make your code look consistent and clean, by removing unnecessary whitespace, reordering properties in objects, and so on. Prettier can be used with a variety of different programming languages including JavaScript, TypeScript, CSS, HTML, and others.

One of the main benefits of Prettier is that it removes the need for developers to spend time on code formatting and instead allows them to focus on the logic of the code. It also helps to reduce the number of code review comments related to formatting and helps to ensure that the codebase is consistent and readable.

To use Prettier in your Next.js project, you first need to install it by running

npm install --save-dev prettier

yarn add prettier --dev

in your project’s directory.

Once Prettier is installed, you can configure it to match your project’s coding conventions by creating a .prettierrc file in the root of your project. This file can include configuration options such as the type of quotes to use, the number of spaces to use for indentation, and so on. You can also configure it to match the eslint configuration, by adding a .prettierrc.js file.

You can then use Prettier to format your code by running

npx prettier --write "src/**/*.{js,jsx,ts,tsx}"

yarn prettier --write "src/**/*.{js,jsx,ts,tsx}"

This command will format all JavaScript and TypeScript files in the src directory and its subdirectories.

It’s also a good practice, as ESlint, to set up your editor or IDE to use Prettier, so that it can automatically format your code as you write it. This way, you don’t have to worry about formatting your code before committing it.

Prettier is widely used in the JavaScript community, and it’s a very powerful tool that can help you to improve the quality and readability of your code. It can be used along with other tools like ESLint and Husky to have a consistent and efficient development process.

I share you my config :

// .prettierc
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 100
}

Husky

Husky is a tool that can be used to set up pre-commit and pre-push hooks in a Git repository. These hooks allow you to automatically run tasks, such as linting or formatting your code, before committing or pushing your changes. This can be useful for enforcing a consistent code style and preventing common mistakes, like committing code that doesn’t pass the tests, or that doesn’t conform to the code style.

To use Husky in your Next.js project, you first need to install it by running

npm install husky --save-dev

yarn add husky --dev

in your project’s directory.

Once Husky is installed, you can configure it in your package.json file. For example, you can set up a pre-commit hook to run ESLint and Prettier on your code before committing by adding the following to your package.json:

"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
        "eslint --fix",
        "prettier --write"
    ]
}

You can also add a dedicated directory like this :

.husky
├── _
│   └── husky.sh
├── commit-msg
├── pre-commit
└── pre-push

with pre-commit :

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint

and pre-push :

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn build

This will run ESLint and Prettier on all JavaScript and TypeScript files that are staged for commit, and automatically fix any issues that it finds.

You can also set up a pre-push hook to run test with Jest or Cypress.

Keep in mind that Husky is just one tool that you can use to set up pre-commit and pre-push hooks, and there are many other alternatives available, such as lint-staged, pre-commit, or pre-push-hook.

Husky is a powerful tool and it can help you to automate your development process and to have a more efficient and consistent workflow, but it’s important to use it with moderation and to not overuse it.

nvmrc

nvmrc (Node Version Manager) and .npmrc (npm) are configuration files that can be used to specify the version of Node.js and the version of npm that should be used for a particular project.

nvmrc is used in conjunction with nvm (Node Version Manager) to specify the version of Node.js that should be used for a particular project. nvm is a tool that allows you to easily switch between different versions of Node.js. By creating an .nvmrc file in the root of your project and specifying a version of Node.js, you can ensure that all developers working on the project are using the same version of Node.js.

You can create at the root directory a .nvmrc file :

lts/*

npmrc

.npmrc is used to configure settings for npm, the package manager for Node.js. It contains a list of properties, such as registry url, user name, email, and more. By creating an .npmrc file in the root of your project, you can ensure that all developers working on the project are using the same settings for npm.

For example, you can use .npmrc to configure the registry, you can use registry=http://my-custom-registry.com/ to set the custom registry instead of the default npm registry.

You can also use .npmrc to set the package-lock to false, to avoid installing a package-lock.json file in your project, or to set the save-exact to true to always save the exact version of a package.

It’s also important to note that these files are optional, but they can be very useful to ensure that all developers working on the project are using the same version of Node.js and the same npm settings, this will avoid issues when different versions of Node.js or npm are used.

Add the .npmrc also at the root directory :

engine-strict=true

And in your package.json :

{
  ...
  "engines": {
    "node": ">=14.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },
  ...
}

Conclusion

Here are some tools that I invite you to use. As you have seen it’s really handy and once you have done your config you figure out all of possibly future issues.

You can also add your personal experience in using these tools and strategies, and how they helped you in your work.

If you have some tips that you think could be useful for other, feel free to write it in comments, I would love to find other tools like those.

How to properly start a NextJS project

Introduction

Let’s start

ESLint

Prettier

Husky

nvmrc

npmrc

Conclusion

Laisser un commentaireAnnuler la réponse

The Cost of a Website

How to properly start a NextJS project

How to Use Docker Volumes to Start Development Projects

My new open source npm Package: ThreeD Cloud

How to Choose the Right Web Hosting Provider