2.5K Views

NEXT102 - Creating a Next.js Project

Learn how to create a new Next.js application using create-next-app, understand the project structure, and run your first Next.js app locally.

Before diving deeper into Next.js concepts, you need a solid development setup.
In this lesson, you will create your first Next.js project and learn how the basic folder structure works.

Prerequisites

To work with Next.js, make sure you have:

  • Node.js (LTS version recommended)
  • npm or yarn
  • A code editor (VS Code recommended)
  • Basic knowledge of React

Next.js runs on top of Node.js during development and build time.

Creating a Next.js App

The recommended way to create a new Next.js project is using create-next-app.

Run the following command in your terminal:

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

During setup, you may be asked several questions:

  • Use TypeScript? (No for now)
  • Use ESLint? (Yes recommended)
  • Use Tailwind CSS? (Optional)
  • Use src/ directory? (Yes recommended)
  • Use App Router? (Yes)

These choices help set up a modern Next.js project.

Navigating Into the Project

After installation completes:

cd my-next-app
npm run dev

This starts the development server.

Open your browser and visit:

http://localhost:3000

You should see the default Next.js welcome page.

Understanding the Project Structure

A typical Next.js project includes:

  • app/ = routing and UI structure
  • public/ = static assets
  • styles/ = global styles (optional)
  • next.config.js = Next.js configuration
  • package.json = dependencies and scripts

Next.js automatically detects routes based on the app directory structure.

The app Directory

The app directory is the core of modern Next.js applications.

Important files include:

  • app/page.js = root page
  • app/layout.js = root layout
  • app/globals.css = global styles

This structure replaces the older pages router approach.

Running the Development Server

To start the dev server:

npm run dev

To stop it:

  • Press Ctrl + C in the terminal

The browser automatically refreshes when files change.

Production Build Basics

To create a production build:

npm run build
npm start

This simulates how your app will behave in production.

Common Beginner Mistakes

Avoid these mistakes:

  • Editing files outside the app directory
  • Forgetting to restart the server after config changes
  • Mixing pages router with app router unintentionally

Sticking to one routing strategy keeps your project clean.

Summary

In this lesson, you learned:

  • How to create a Next.js project
  • How to run the development server
  • Basic Next.js project structure
  • The purpose of the app directory
  • How to build the app for production

In the next lesson, we will explore file-based routing and learn how Next.js handles navigation automatically.