Skip to main content
Next.js Fundamentals·Lesson 2 of 5

Project Setup

Creating a Next.js Project

The fastest way to start a new Next.js project is with create-next-app:

npx create-next-app@latest my-app

You'll be asked a few questions:

  • TypeScript? — Yes (always recommended)
  • ESLint? — Yes
  • Tailwind CSS? — Yes (optional, but great for styling)
  • src/ directory? — No (simpler without it)
  • App Router? — Yes (the modern approach)
  • Import alias? — Default @/* is fine

Project Structure

After setup, your project looks like this:

my-app/
├── app/
│   ├── layout.tsx      # Root layout (wraps all pages)
│   ├── page.tsx        # Home page (/)
│   └── globals.css     # Global styles
├── public/             # Static files (images, fonts)
├── next.config.js      # Next.js configuration
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
└── tailwind.config.ts  # Tailwind configuration

Key Files Explained

app/layout.tsx

The root layout wraps every page in your app. It's where you put your <html> and <body> tags, shared navigation, and global providers.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/page.tsx

This is your home page. Any page.tsx file inside app/ becomes a route.

next.config.js

Configuration for Next.js — redirects, rewrites, image domains, and more.

Running the Dev Server

npm run dev

Open http://localhost:3000 and you'll see your app running with hot reload enabled.