# Part 1: Building Your First Next.js Project from Scratch

<figure><img src="https://159896965-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3LclXKUpANLoSt8DPdYV%2Fuploads%2FJK8G3Yjm1qHwjGSqwUcV%2F1675674296261.jpeg?alt=media&#x26;token=989182c4-9098-4bba-8dd9-52aeb4b0f941" alt=""><figcaption><p>Getting Started</p></figcaption></figure>

Embarking on your journey with Next.js can be incredibly rewarding, especially when you understand how to set up a project from the ground up. While tools like "create-next-app" simplify the process, manually creating a project provides valuable insights into the structure and workings of a Next.js application. In this guide, we'll walk through the steps to create a Next.js project from scratch.

### Setting Up Your Workspace

First, open your code editor, such as Visual Studio Code. Navigate to your preferred directory, where you keep your projects. Inside this directory, create a new folder named `next-blog`, which will serve as the root of your Next.js project.

### Creating the `package.json` File

The `package.json` file is essential for managing your project's dependencies. Inside the `next-blog` directory, create a file named `package.json` with the following content:

```json
// next-blog/package.json
{
  "name": "next-blog",
  "private": true,
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
```

This setup specifies the project name, marks it as private (indicating it's not meant for publishing), and outlines the required dependencies: `next`, `react`, and `react-dom`.

### Installing Dependencies

Open the terminal in your editor and navigate to the `next-blog` directory. Run the following command to install the necessary packages:

```bash
npm install
```

This command will download and install the dependencies specified in `package.json`, creating a `node_modules` directory to store them.

### Exploring the Next.js Command Line Tool

Next.js comes with a command line tool that simplifies project management. You can access it by running:

```bash
npx next --help
```

This displays various commands like `build`, `start`, `export`, and `dev`. We'll primarily focus on the `dev` command, which launches the development server.

### Starting the Development Server

Before starting the server, Next.js requires a `pages` directory. Create this directory at the root of your project:

```bash
// next-blog/pages/
```

With the `pages` folder in place, you can start the development server using the script defined in your `package.json`. Execute:

```bash
npm run dev
```

This command will start the server, accessible at `http://localhost:3000`. Initially, you'll encounter a "404 not found" message, as no pages have been created yet.

### Creating Your First Page

Within the `pages` directory, create a file named `index.js`. This file represents the homepage of your application. Add the following content:

```jsx
// next-blog/pages/index.js
function HomePage() {
  return (
    <main>
      <h1>My Blog</h1>
    </main>
  );
}

export default HomePage;
```

This simple React component serves as your homepage. Save the file and refresh your browser to see "My Blog" displayed.

### Hot Reloading and Development

Next.js offers hot reloading, automatically updating your application in the browser when code changes are saved. For instance, modifying the heading text in `HomePage` and saving the file will instantly reflect in the browser.

### Managing Temporary Files

Next.js generates a `.next` directory for build artifacts. To keep your version control clean, add `.next` and `node_modules` to your `.gitignore` file:

```
// next-blog/.gitignore
/.next/
/node_modules/
```

This ensures these temporary files are not included in your version control system.

### Conclusion

Congratulations on setting up your first Next.js project from scratch! You've learned how to manually create a project, set up dependencies, and run a development server. Understanding these fundamentals is crucial as it highlights the differences in how Next.js renders pages compared to a typical React app. Stay tuned for more insights into the unique features of Next.js in upcoming guides.
