Getting Started with Next.js: Part 1 - Setting Up Your Project
Tags: javascript, beginners, nextjs, learning
Published: 2024-04-27 11:53:26

## 🚀 Check Out My YouTube Channel! 🚀
Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak). I post practical full-stack development videos that complement my blog posts. Your support means a lot!

## Introduction
Welcome to our Next.js series, where we will explore how to build scalable and performant applications using Next.js. In this first part, we will guide you through setting up your initial Next.js project. This post is designed for developers who are already familiar with JavaScript and React but new to Next.js.

## Prerequisites
Before we start, ensure that you have Node.js installed on your computer. This is necessary because we will use Node's package manager (npm) to create our Next.js project. If you need to install Node.js, you can download it from the official [Node.js website](https://nodejs.org/).

## Step 1: Create a New Next.js Application
Creating a new project is straightforward with the Next.js command-line interface. Here’s how:

1. **Open your terminal**: This can be Terminal on macOS, Command Prompt on Windows, or any other terminal application you prefer.
2. **Run the creation command**: Type the following command and press Enter:
    ```bash
    npx create-next-app my-nextjs-app
    ```
    This command uses `npx`, which is a package runner tool that comes with npm 5.2+.
3. **Wait for the setup to complete**: The command will create a new folder named `my-nextjs-app` containing all the necessary files and dependencies for your Next.js application.

## Step 2: Project Structure Overview
After creating your project, navigate to the project directory:
```bash
cd my-nextjs-app
```
Take a moment to explore the initial structure created by Next.js:
- **pages/**: This directory contains your application's page files. Each file within this directory correlates directly to a route. For example, `pages/index.js` is the root of your site.
- **public/**: Here, you can place static assets such as images, fonts, and other files that you want to serve directly.
- **styles/**: It contains CSS files for your application. Next.js supports CSS Modules out of the box, allowing you to import CSS files directly in your components.

## Step 3: Run Your Next.js Application
Running your Next.js application locally helps you see your progress in real-time. Here’s how to start your application:

1. **Start the development server**: In your terminal, run:
    ```bash
    npm run dev
    ```
    This command starts a development server at `http://localhost:3000`, enabling hot reloading, which automatically updates your application as you edit files.
2. **View your application**: Open a web browser and go to [http://localhost:3000](http://localhost:3000) to view your new Next.js application. You should see a welcome page.

## Conclusion
Congratulations! You've successfully set up your first Next.js application and explored its basic structure. You now have a solid foundation to build upon in our upcoming posts. In Part 2, we will dive deeper into creating and managing pages and navigating the powerful routing features of Next.js.

Stay tuned for more detailed insights, and feel free to experiment with what you've learned today.