/

How to Install Next.js

How to Install Next.js

In this step-by-step guide, you will learn how to install Next.js and get started with your first Next.js project.

To install Next.js, you will need to have Node.js installed on your system. If you don’t have Node.js installed, you can download and install it from here.

Make sure you have the latest version of Node.js installed. To check your Node.js version, open your terminal and run the command node -v. Compare the output with the latest LTS version available at Node.js website.

If you encounter any issues during the installation process, I recommend checking out the following tutorials I have written:

Once you have successfully installed Node.js and ensured you have the latest version, follow the steps below to install Next.js:

  1. Create an empty folder for your Next.js project. You can choose any location, for example, your home folder. Open your terminal and navigate to the folder you created.

    1
    2
    mkdir nextjs
    cd nextjs

  2. Create a new folder for your first Next.js project inside the nextjs folder.

    1
    2
    mkdir firstproject
    cd firstproject

  3. Initialize your project by running the following command:

    1
    npm init -y

    This command will create a sample package.json file with default settings.

    npm init result

  4. Install Next.js, React, and React DOM by running the following command:

    1
    npm install next react react-dom

    This will install the required dependencies for your Next.js project. After the installation is complete, your project folder should contain the following files and folders:

    • package.json (learn more about the package.json file here)
    • package-lock.json (learn more about package-lock.json here)
    • node_modules folder

  5. Open your project folder in your preferred code editor. You can use Visual Studio Code (VS Code), which I recommend. If you have VS Code installed, open your terminal and run the following command to open the project folder in VS Code:

    1
    code .

    If this command doesn’t work for you, refer to the official VS Code documentation for alternative methods.

  6. Open the package.json file in your editor and replace the scripts section with the following code:

    1
    2
    3
    4
    5
    "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start"
    }

    This will add the Next.js build commands that you will use soon.

    the package.json file

  7. Create a pages folder in your project folder, and inside it, create an index.js file.

    In the index.js file, create your first React component. Export the component as the default export.

    1
    2
    3
    4
    5
    6
    7
    const Index = () => (
      <div>
        <h1>Home page</h1>
      </div>
    )

    export default Index

  8. You are now ready to start the Next.js development server. Open your terminal and run the following command:

    1
    npm run dev

    This will start the development server and make your app available on http://localhost:3000. Open this URL in your browser to see your first Next.js app.

    npm run dev

    The first Next.js app screen

Tags: Next.js, Node.js, React, installation, development server