Next.js Installation

Before using Next.js, you need to set up your development environment and create a new Next.js project. This chapter will guide you through these preparations.

Environment Requirements

Make sure you have the following software installed on your computer:

• Node.js: Next.js requires Node.js 12.22.0 or higher. You can download and install it from the Node.js official website.
• npm or yarn: Node.js comes with npm (Node Package Manager), and you can also choose to use yarn as your package manager.

You can check the versions of Node.js and npm with the following commands:

node -v
npm -v

Creating a Next.js Project

The easiest way to create a Next.js project is to use the official scaffolding tool create-next-app.

Open your terminal and execute the following command:

npx create-next-app@latest my-next-app

• npx is a tool that comes with npm 5.2+ and can execute npm packages without first installing them globally.
• create-next-app@latest will use the latest version of the scaffolding tool.
• my-next-app is your project name, which you can replace with your preferred name.

During the installation process, the scaffolding will ask you some configuration options, such as:

• Would you like to use TypeScript with this project? (Whether to use TypeScript?)
• Would you like to use ESLint with this project? (Whether to use ESLint?)
• Would you like to use Tailwind CSS with this project? (Whether to use Tailwind CSS?)
• Would you like to use the src/ directory with this project? (Whether to use the src/ directory?)
• Would you like to use the App Router (recommended)? (Whether to use App Router?)
• Would you like to customize the default import alias? (Whether to customize the default import alias?)

You can choose Yes or No based on your needs. For beginners, it's recommended to select the default options.

Starting the Development Server

After the project is created, enter the project directory and start the development server:

cd my-next-app
npm run dev

If everything goes well, you will see output similar to the following in the terminal:

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 2.3s (235 modules)

Now, open http://localhost:3000 in your browser, and you will see the Next.js application welcome page.

Manual Installation

Besides using create-next-app, you can also manually install Next.js.

1. Initialize the Project

   mkdir my-next-app
   cd my-next-app
   npm init -y

2. Install Dependencies

   npm install next react react-dom

3. Configure package.json

   Open the package.json file and add the following scripts:

   {
     "scripts": {
       "dev": "next dev",
       "build": "next build",
       "start": "next start",
       "lint": "next lint"
     }
   }

4. Create the pages Directory

   Next.js uses the pages directory to define routes. Create an index.js file in this directory:

   mkdir pages

   Add the following code to pages/index.js:

   function HomePage() {
     return <div>Welcome to Next.js!</div>;
   }
   
   export default HomePage;

5. Start the Development Server

   npm run dev

Now, you have successfully set up a manual Next.js project.

Summary

This chapter covered how to install and create a Next.js project. We recommend using create-next-app because it can quickly configure a modern Next.js application. In the next chapter, we will detail the Next.js project structure.

Previous Chapter: Next.js Introduction | Next Chapter: Next.js Project Structure