Table of Contents

1. Choosing the development environment and tools
   • 1.1. PNPM
   • 1.2. Git
   • 1.3. Node.js 20.2+ and npm 9.6+
2. Visual Studio Code
   • 2.1. Pre-configured VSC Setup
   • 2.2. Recommended VSC extensions
3. ESLint
   • 3.1. Customizing ESLint configuration
   • 3.2. Installing additional ESLint plugins
   • 3.3. Editing the .eslintrc.json File
4. TypeScript - How to Configure It?
5. Prettier
   • 5.1. Installing Prettier
   • 5.2. Configuring Prettier
   • 5.3. Automatic formatting
6. Choosing the development environment and tools
7. Summary
   • 7.1. Frequently Asked Questions

In this guide, we will delve into the key aspects of setting up a development environment for Next.js 13. We will show you how to effectively set up tools like PNPM, Git, Node.js, and Visual Studio Code to make your programming as efficient as possible. This is a continuation of our previous guide, where we discussed Introduction to Next.js 13 and its Features. We will focus on practical aspects that will help you start working with Next.js in the most optimal way. Let's get started!

Choosing the development environment and tools

PNPM

In the Node.js environment, there are several package managers, with the most well-known being NPM (installed by default with Node.js), PNPM, and Yarn. Although Yarn was more popular than PNPM until recently, this trend shifted in favor of PNPM in 2023. You might be wondering why we didn't use the default NPM. The answer lies in performance. PNPM is over three times faster than NPM. Moreover, PNPM smartly manages dependencies—the same packages installed in different projects do not take up additional disk space. This is achieved through a content-addressable file system, which creates a central place on the disk for all installed packages. In individual projects, these packages are merely linked (using symlinks or hardlinks) rather than copied each time. But that's not all. PNPM also offers excellent support for monorepos, which is particularly useful in larger projects and development teams. Additionally, PNPM facilitates interactive dependency updates, which is extremely important in the dynamically changing world of technology. This feature allows us to easily and quickly update packages to always use their latest versions. In our project, we particularly appreciate these aspects of PNPM. Their impact on work efficiency and resource optimization is invaluable. Choosing PNPM allows us to save valuable time and ensures greater security and stability for our applications. Installation: https://pnpm.io/installation

Git 2.39+

Git is an essential tool for every programmer. To take advantage of the latest Git features, it's important to have the appropriate version installed. Here's how to do it depending on your operating system.

Installation on different systems:

1. For MacOS users: Git is usually installed by default on MacOS. You can check this and update to the latest version if necessary.
2. For Windows Subsystem for Linux (WSL) users and Debian-based Linux distributions (such as Ubuntu): Enter the following command in the terminal to install Git.

sudo apt install git

Verifying the Git version: After installing Git, it's important to ensure you have the latest version. You can do this by typing in the terminal: bash git --version This command will display the currently installed version of Git on your computer. Make sure it is version 2.39 or newer. For detailed installation instructions for different systems, visit the official Git website: Git - Installing Git. You'll find step-by-step guides for different environments, making it easier for you to install correctly.

Node.js 20.2+ and npm 9.6+

Node.js and NPM are essential tools in the JavaScript programming world. To fully utilize their potential, it's important to install and verify their latest versions.

1. Installing Node.js 20.10+:
   • Node.js is a platform for running JavaScript applications outside the browser.
   • To install Node.js on your computer, visit the official Node.js website and download the appropriate version for your operating system.
2. Installing NPM 10.2+:
   • NPM, or Node Package Manager, is the default package manager for the Node.js environment.
   • Typically, NPM is installed together with Node.js. After installing Node.js, NPM should be available on your computer.
3. Verifying Node.js and NPM versions:
   • After installation, it's important to check if you have the appropriate versions of Node.js and NPM. Open the terminal and type:

node --versionbash npm --version

These commands will display the installed versions of Node.js and NPM. Make sure the Node.js version is 20.10 or newer, and the NPM version is 10.2 or newer. If you need more detailed installation instructions, visit the official Node.js website and NPM documentation. You'll find complete guides and helpful tips that will make it easier for you to install and use the latest versions of these tools.

Visual Studio Code

Start by downloading and installing Visual Studio Code: https://code.visualstudio.com/. Visual Studio Code, often shortened to VS Code, is a powerful, versatile, and very popular integrated development environment (IDE) created by Microsoft.

Pre-configured VSC Setup

It's also worth configuring VS Code. I recommend the following configuration, which should be saved in the .vscode/settings.json file:

{
   "typescript.tsdk":"node_modules/typescript/lib",
   "editor.formatOnSave":true,
   "editor.defaultFormatter":"esbenp.prettier-vscode",
   "editor.codeActionsOnSave":{
      "source.fixAll":true
   },
   "graphql-config.dotEnvPath":"./.env",
   "graphql-config.load.configName":"graphql",
   "files.associations":{
      "*.css":"tailwindcss"
   },
   "editor.quickSuggestions":{
      "strings":true
   }
}

Recommended VSC extensions

In the left toolbar, click the icon resembling blocks to open the extensions management panel.

1. Prettier - Code Formatter
   • Description: Prettier is a code formatting extension. It automatically formats code on save, ensuring consistent style and increasing readability.
   • Why use it: It helps maintain a consistent coding style in the project, which is especially important in team work.
   • Link: Prettier - Code Formatter
2. ESLint
   • Description: ESLint is a static code analysis tool for JavaScript/TypeScript that helps detect issues and improve code quality.
   • Why use it: It supports good coding practices and helps avoid common errors, which is crucial for maintaining high code quality.
   • Link: ESLint
3. GraphQL: Language Feature Support
   • Description: This extension provides support for the GraphQL language in VS Code, including syntax, suggestions, and formatting.
   • Why use it: It makes working with GraphQL easier, especially when working on projects using this technology for data management.
   • Link: GraphQL
4. Tailwind CSS IntelliSense
   • Description: Tailwind CSS IntelliSense provides intelligent suggestions for the Tailwind CSS framework, including classes and their attributes.
   • Why use it: It significantly eases working with Tailwind CSS, offering quick suggestions and reducing the risk of errors.
   • Link: Tailwind CSS IntelliSense
5. GitHub Copilot
   • Description: GitHub Copilot is an AI-powered tool that suggests code snippets and entire functions in real-time.
   • Why use it: It can significantly speed up the coding process by offering intelligent suggestions and inspiring new solutions.
   • Link: GitHub Copilot
6. Material Icon Theme
   • Description: This extension provides a set of icons that facilitate navigation in the project structure.
   • Why use it: It improves the user interface aesthetics and makes navigating project files easier.
   • Link: Material Icon Theme
7. Monokai Pro
   • Description: Monokai Pro is a color theme for VS Code that offers a pleasant color palette and icons.
   • Why use it: It provides an aesthetic and readable editor appearance, which can increase work comfort.
   • Link: Monokai Pro

Each of these extensions brings unique features that can enhance productivity and work quality in Visual Studio Code, making the programming process more efficient and enjoyable.

ESLint

ESLint is a highly configurable static code analysis tool that is particularly popular in JavaScript and TypeScript projects. Its primary task is to identify and report patterns in code that are considered errors or bad practices.

Customizing ESLint configuration

Let's start by enhancing our development environment, focusing on ESLint, a static code analysis tool. First, let's modify the default lint command:

next lint --fix --dir src

The --fix option automatically corrects detected errors where possible, and --dir src instructs ESLint to check all files in the src folder.

Installing additional ESLint plugins

Let's install some additional plugins that will strengthen our ESLint tool, especially when working with TypeScript:

pnpm add -D \\@typescript-eslint/eslint-plugin \\@typescript-eslint/parser \\eslint-plugin-import \\eslint-config-prettier

@typescript-eslint/eslint-plugin: This is an ESLint plugin providing a set of rules specific to TypeScript, making it easier to identify and improve issues related to TypeScript-specific syntax and practices. It enables more detailed and effective analysis of TypeScript code. It is crucial for projects using TypeScript to ensure high code quality and adherence to best practices.

@typescript-eslint/parser: This is a syntax parser for ESLint that allows parsing TypeScript code. This parser is essential for the proper functioning of eslint-plugin rules for TypeScript, as it enables ESLint to understand and analyze TypeScript-specific syntax.

eslint-plugin-import: This plugin provides a set of ESLint rules for verifying the correctness of imports and exports in JavaScript and TypeScript code. It helps maintain order and consistency in imports, preventing issues such as duplicates, missing, or unnecessary imports.

eslint-config-prettier: This is an ESLint configuration that disables rules that might conflict with Prettier, a code formatting tool. It ensures that ESLint and Prettier can work together without conflicts, allowing for the simultaneous use of advanced code analysis and automatic formatting.

Editing the .eslintrc.json file

Now it's time to edit the .eslintrc.json file, where we'll configure our ESLint rules. Below are the ready ESLint settings along with a description of each line.

{
   "plugins":[
      "@typescript-eslint",
      "import"
   ],
   "parserOptions":{
      "project":"tsconfig.json"
   },
   "extends":[
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "prettier",
      "next/core-web-vitals"
   ],
   "rules":{
      "import/order":"error",
      "import/no-mutable-exports":"error",
      "import/no-cycle":"error",
      "import/no-default-export":"error",
      "@typescript-eslint/ban-types":[
         "error",
         {
            "types":{
               "{}":false
            }
         }
      ],
      "@typescript-eslint/consistent-type-imports":[
         "error",
         {
            "prefer":"type-imports",
            "fixStyle":"inline-type-imports",
            "disallowTypeAnnotations":false
         }
      ],
      "import/no-duplicates":[
         "error",
         {
            "prefer-inline":true
         }
      ],
      "import/namespace":[
         "off"
      ],
      "no-empty-pattern":"off",
      "@typescript-eslint/no-empty-interface":"off",
      "@typescript-eslint/no-empty-function":"off",
      "@typescript-eslint/require-await":"off",
      "@typescript-eslint/return-await":[
         "error",
         "in-try-catch"
      ],
      "@typescript-eslint/no-unused-vars":[
         "error",
         {
            "argsIgnorePattern":"^_",
            "varsIgnorePattern":"^_"
         }
      ],
      "@typescript-eslint/restrict-template-expressions":[
         "error",
         {
            "allowNumber":true,
            "allowBoolean":true
         }
      ]
   },
   "overrides":[
      {
         "files":[
            "src/app/**/*.ts?(x)"
         ],
         "rules":{
            "import/no-default-export":"off"
         }
      }
   ],
   "ignorePatterns":[
      "*.js",
      "*.jsx"
   ]
}

Finally, it's worth verifying the configuration to ensure ESLint is working correctly:

pnpm lint

TypeScript - How to configure it?

Configuring TypeScript in the tsconfig.json file is crucial for the proper functioning of the project. It allows you to specify how TypeScript should compile source code to JavaScript and what rules and principles should be applied during code analysis. Below is a ready configuration of the file along with a brief explanation of the most important options in this configuration:

{
   "$schema":"https://json.schemastore.org/tsconfig",
   "compilerOptions":{
      "target":"es2022",
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "strict":true,
      "forceConsistentCasingInFileNames":true,
      "noEmit":true,
      "esModuleInterop":true,
      "module":"esnext",
      "moduleResolution":"node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "jsx":"preserve",
      "incremental":true,
      "plugins":[
         {
            "name":"next"
         }
      ],
      "paths":{
         "@/*":[
            "./src/*"
         ]
      }
   },
   "include":[
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ".next/types/**/*.ts"
   ],
   "exclude":[
      "node_modules"
   ]
}

Prettier

Prettier is a leading tool for automatically formatting source files. Its main advantage is the ability to be slightly customized to your preferences and then automatically format code in the project. This way, you can maintain formatting consistency and increase code readability.

Installing Prettier

To start using Prettier, the first step is to install it in the project along with the necessary dependencies. We can do this using the command:

pnpm add -D \\prettier \\prettier-plugin-tailwindcss

Configuring Prettier

Next, to customize Prettier's behavior to our preferences, we create a configuration file prettier.config.js in the main project folder. Below is an example configuration:

{
   "$schema":"https://json.schemastore.org/eslintrc.json",
   "plugins":[
      "@typescript-eslint",
      "import"
   ],
   "parserOptions":{
      "project":"tsconfig.json"
   },
   "extends":[
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "prettier",
      "next/core-web-vitals"
   ],
   "rules":{
      "import/order":"error",
      "import/no-mutable-exports":"error",
      "import/no-cycle":"error",
      "import/no-default-export":"error",
      "@typescript-eslint/ban-types":[
         "error",
         {
            "types":{
               "{}":false
            }
         }
      ],
      "@typescript-eslint/consistent-type-imports":[
         "error",
         {
            "prefer":"type-imports",
            "fixStyle":"inline-type-imports",
            "disallowTypeAnnotations":false
         }
      ],
      "import/no-duplicates":[
         "error",
         {
            "prefer-inline":true
         }
      ],
      "import/namespace":[
         "off"
      ],
      "no-empty-pattern":"off",
      "@typescript-eslint/no-empty-interface":"off",
      "@typescript-eslint/no-empty-function":"off",
      "@typescript-eslint/require-await":"off",
      "@typescript-eslint/return-await":[
         "error",
         "in-try-catch"
      ],
      "@typescript-eslint/no-unused-vars":[
         "error",
         {
            "argsIgnorePattern":"^_",
            "varsIgnorePattern":"^_"
         }
      ],
      "@typescript-eslint/restrict-template-expressions":[
         "error",
         {
            "allowNumber":true,
            "allowBoolean":true
         }
      ]
   },
   "overrides":[
      {
         "files":[
            "src/app/**/*.ts?(x)"
         ],
         "rules":{
            "import/no-default-export":"off"
         }
      }
   ],
   "ignorePatterns":[
      "*.js",
      "*.jsx"
   ]
}

The configuration values can be adjusted according to personal preferences. The configuration allows defining formatting rules that will be applied to the source code.

Automatic formatting

After installing Prettier and customizing the configuration, we can automatically format all files in the project using the command:

pnpm prettier --write

It's worth noting that Prettier will by default also format files in the hidden .next folder. If this folder is not relevant to our project, it can be ignored by creating a .prettierignore file and adding .next to it. This way, the .next folder will be skipped during formatting.

Choosing the development environment and tools

In addition to configuring basic tools, it's also important to understand the role that hosting and runtime environments play in our Next.js projects. In the next article What is Vercel and Is It Worth Choosing? - Expert Insights, we discussed how the Vercel platform, creators of Next.js, integrates perfectly with this framework, offering efficient and flexible solutions for deploying applications. Choosing the right hosting and understanding its capabilities is crucial for optimally leveraging the potential of Next.js.

Summary

In this guide, we presented the key aspects of setting up a development environment for a Next.js 13 project. We started with choosing PNPM, which stands out as an efficient package manager optimized for dependency management. Next, we focused on Visual Studio Code, recommending it as an IDE due to its versatility and availability of useful extensions. We emphasized the importance of tools like ESLint and Prettier in ensuring code quality and consistency in programming style.

Frequently Asked Questions

1. What are the main advantages of using PNPM as a package manager? PNPM offers significant performance benefits through smart dependency management and a content-addressable file system. It saves disk space and offers support for monorepos, which is useful in larger projects.
2. Why use Visual Studio Code? Visual Studio Code is recommended for its versatility, availability of useful extensions, and easy configuration, which increases work efficiency.
3. What are the benefits of integrating ESLint into a Next.js project? ESLint helps identify and report errors and bad practices in JavaScript/TypeScript code, improving code quality and supporting good programming practices.
4. What is the significance of TypeScript in Next.js projects? TypeScript allows for more organized and secure application development, offering strong typing and more precise control over code.
5. Why is Prettier an important tool? Prettier automates the code formatting process, ensuring style consistency and increasing code readability, which is especially important in team work.