Beginner 12 min

Introduction and Project Setup

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

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.

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.

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>;
}

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

Prerequisites

You should know React (components, props, state). Take the React course first if not.

Try it yourself

Add a /contact page with a heading and your email address, and add a link to it in the navigation.

Show solution

// app/contact/page.tsx
export default function Contact() {
  return (
    <main>
      <h1>Contact</h1>
      <p>hello@example.com</p>
    </main>
  );
}
// in layout.tsx nav: <Link href="/contact">Contact</Link>