Creating a New Project

Introduction

Next.js is a powerful React framework that enables server-side rendering and generating static websites for React applications. This tutorial will walk you through the process of creating a new project using Next.js, from setting up your environment to initializing your first application.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

• Node.js: Version 12.22.0 or later is recommended.
• npm (Node Package Manager): Comes bundled with Node.js installation.
• Git: For version control and collaboration.

You can verify if these are installed by running the following commands in your terminal:

node -v
npm -v
git --version

Setting Up Your Environment

Install Create Next App

Next.js provides a command-line tool called create-next-app to quickly set up new projects. It's the easiest way to get started with Next.js.

To install create-next-app, run the following command:

npx create-next-app@latest

This command uses npm to download and execute create-next-app from the latest version available on npm.

Create a New Project

Once create-next-app is installed, you can create a new Next.js project by running:

npx create-next-app my-nextjs-project

Replace my-nextjs-project with your desired project name. This command will create a directory named my-nextjs-project and set up all the necessary files and dependencies.

Navigate to Your Project Directory

After the setup is complete, navigate into your project directory:

cd my-nextjs-project

Understanding the Project Structure

A typical Next.js project has the following structure:

my-nextjs-project/
├── node_modules/
├── public/
│   └── favicon.ico
├── styles/
│   └── globals.css
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── _app.js
│   ├── _document.js
│   └── index.js
├── .gitignore
├── next.config.js
├── package.json
└── README.md

• node_modules/: Contains all the project dependencies.
• public/: Static assets like images and favicon.
• styles/: Global CSS files.
• pages/: React components that correspond to routes. For example, index.js maps to the root URL (/).
• api/: API routes for server-side code.
• _app.js and _document.js: Special Next.js files for customizing the app and document respectively.
• .gitignore: Specifies which files should be ignored by Git.
• next.config.js: Configuration file for Next.js.
• package.json: Contains project metadata and dependencies.
• README.md: Project documentation.

Running Your Application

To start your Next.js application, run the following command:

npm run dev

This will start a development server on http://localhost:3000. You should see the default Next.js welcome page in your browser.

Hot Reloading

One of the great features of Next.js is hot reloading. This means that any changes you make to your code will be reflected immediately in the browser without needing to restart the server.

Creating a New Page

Next.js uses file-based routing, where each file inside the pages directory corresponds to a route. For example, creating a new file about.js inside the pages directory will create a new route /about.

Example: Adding an About Page

1. Create a new file named about.js in the pages directory:

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

2. Save the file and navigate to http://localhost:3000/about in your browser. You should see "About Us" displayed.

Adding CSS

Next.js supports CSS out of the box. You can add styles directly to your components or use global styles.

Example: Adding Global Styles

1. Open styles/globals.css and add some basic styling:

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
}

2. Save the file and refresh your browser to see the updated styles.

Conclusion

In this tutorial, you learned how to create a new Next.js project, understand its directory structure, run your application, and add pages and styles. These foundational skills will help you build more complex applications using Next.js in the future.

Next steps include exploring API routes, dynamic routing, and deploying your application to production. Keep experimenting with different features of Next.js to enhance your development workflow.