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

[Page] Getting Started

Getting Started

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:

// 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:

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:

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:

// next-blog/pages/

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

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:

// 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.