Skip to main content

Setting up your first Nextjs project

Introduction

Next.js is a powerful framework built over React.js that helps developers create web applications with ease. It comes with features like server-side rendering and static site generation, which makes it a go-to choice for developers worldwide. In this article, we will guide you on setting up your first Next.js project.

Prerequisites​

Before starting, you'll need to have Node.js and NPM (Node Package Manager) installed on your computer. If you haven't installed them yet, you can download them from here.

Step 1: Install Next.js​

Firstly, let's create a new project. Open your terminal and navigate to the directory where you want to create the project. You can create a new Next.js application using create-next-app. Run the following command in your terminal:

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

Here, my-next-app is the name of your app. You can replace it with any name of your choice. This command will create a new directory with your project name (my-next-app, in this case), and it will install all the necessary files and dependencies for a Next.js project.

Step 2: Run the Next.js Server​

Navigate into your project's directory using the following command:

cd my-next-app

Now, let's start the development server. Run the following command:

npm run dev

After running the command, you should see a message saying that your server is running and listening on a local port, usually http://localhost:3000. Open this URL in your browser; you will see your new Next.js application running.

Step 3: Understanding the Project Structure​

Let's take a moment to understand the structure of a Next.js project:

  • pages/: This directory contains your application's pages. Each file corresponds to a route based on its file name.
  • public/: This directory is used to serve static files.
  • styles/: This directory is for your CSS files. Next.js uses CSS Modules by default, which means that styles are scoped to individual components.
  • package.json: This file contains the list of project dependencies and scripts.

Step 4: Create a New Page​

To create a new page in Next.js, all you need to do is create a new .js file in the pages directory.

For example, let's create an about.js file in the pages directory and write the following code:

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page</p>
    </div>
  )
}

Now, if you navigate to http://localhost:3000/about, you will see your new About Us page.

Congratulations! You have set up your first Next.js application. You can now start building more complex applications using this powerful framework. Explore the Next.js documentation for more detailed information and advanced topics. Happy coding!