Next.js · Lesson 1 of 5

Introduction and Project Setup

Create a Next.js app and understand the app directory.

Beginner
12 min read
3 objectives

What you will learn

Create a Next.js project
Explain file-based routing
Add layouts

Next.js is a full-stack framework built on React. React alone only handles the UI in the browser; Next.js adds the rest of what real sites need: routing, server-side rendering, data fetching, API endpoints, image optimization and easy deployment. It is widely used for marketing sites, dashboards and SaaS products.

Why not just React?

Routing comes from your folder structure, with no router library to configure.
Server rendering sends ready-made HTML, which loads faster and is easier for search engines to read.
Backend code lives in the same project: fetch from a database directly in a component, or write API endpoints.

Create a project

npx create-next-app@latest my-site
cd my-site
npm run dev

Accept the defaults (TypeScript, ESLint, the App Router). Visit http://localhost:3000.

The app directory

app/
  layout.tsx        # shared wrapper for every page (html, body, nav)
  page.tsx          # the home page at /
  about/
    page.tsx        # /about
  blog/
    page.tsx        # /blog
    [slug]/
      page.tsx      # /blog/anything
public/             # static files served at the root
next.config.ts

A folder becomes a URL segment, and a page.tsx inside makes it reachable. That is file-based routing.

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to my site</h1>
      <p>Built with Next.js</p>
    </main>
  );
}

// app/about/page.tsx
export default function About() {
  return <h1>About</h1>;
}

The root layout

// app/layout.tsx
import Link from "next/link";
import "./globals.css";

export const metadata = { title: "My Site", description: "A Next.js site" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> <Link href="/about">About</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

The layout wraps every page and is preserved when you navigate, so it does not re-render. Use <Link> for internal links: it prefetches pages and navigates without a full reload.

// Write your solution here

Up next · Lesson 2Routing, Layouts and NavigationDynamic routes, nested layouts, Link and loading states.