Next.js from Zero to a Real Company Website

Chapter 01

What is Next.js, and why does it exist?

Goal: be able to explain in one sentence what Next.js is and why a team would choose it over plain HTML files.

Start from what you know

Imagine you build a website the classic way: one HTML file per page. index.html, about.html, contact.html. It works. But three problems appear very quickly:

1. Repetition. Your navigation bar and footer are copied into every single file. Change one menu item and you must edit every page. With 30 pages, you will forget one, and the site becomes inconsistent.
2. No components. You have a nice "card" design used 20 times. In plain HTML, that is 20 copies of the same markup. There is no way to say "here is my Card, reuse it".
3. Data is painful. If your services live in a list somewhere, you cannot loop over that list in HTML. You write each item by hand.

React solves these problems. React is a JavaScript library that lets you build a page out of reusable pieces called components, and lets you generate HTML from data. We will learn just enough React in chapter 3.

So where does Next.js fit?

React alone is only a library. It does not answer questions like: How do URLs work? How do I get more than one page? How do I make the site fast? How do I ship it to a real server? Every team used to answer these questions themselves, differently, and often badly.

Next.js is a framework built on top of React that answers all of those questions for you. It gives you:

"Static" means pre-built

In this course we build a static website. Static means: when you run the build command, Next.js generates finished HTML, CSS, and JavaScript files. A visitor's browser just downloads those files. There is no database and no server code running per visitor. This makes the site extremely fast, very cheap to host, and hard to hack. It is perfect for portfolios, restaurants, agencies, landing pages, and documentation.

Chapter 02

Install your tools

Goal: a working Node.js installation, a code editor, and confidence in the terminal.

1. Node.js

Next.js runs on Node.js, which lets JavaScript run on your computer instead of only inside a browser. Download the LTS version (the stable one, currently 22.x) from nodejs.org and install it with the default options.

Then open a terminal and verify:

$ node --version
v22.11.0
$ npm --version
10.9.0

If you see version numbers (yours may differ slightly), you are ready. npm came along automatically; it is the tool that downloads JavaScript packages, including Next.js itself.

2. A code editor

Use VS Code from code.visualstudio.com unless you already have a favorite. Recommended extensions: ES7+ React snippets and Prettier (auto-formats your code on save, so you never argue about spacing).

3. Terminal survival kit

You only need five commands for this entire course:

Chapter 03

React in 30 minutes

Goal: understand components, JSX, props, state, and rendering lists. This is all the React you need for this course.

Components: functions that return HTML

A React component is simply a JavaScript function whose name starts with a capital letter and which returns something that looks like HTML. That returned syntax is called JSX.

function Welcome() {
  return <h1>Hello, team!</h1>;
}

Once a component exists, you can use it like a custom HTML tag: <Welcome />. This is the superpower plain HTML never had: you invent your own tags.

JSX: five rules that cover 95% of cases

1. Return one single root element. If you need several, wrap them in a <div> or in an empty wrapper <> ... </> (called a fragment).
2. class becomes className, because class is a reserved word in JavaScript. Also for becomes htmlFor.
3. Every tag must close. <img> becomes <img />, <br> becomes <br />.
4. Curly braces { } mean "JavaScript goes here". Inside braces you can put a variable, a calculation, or a function call.
5. Comments inside JSX look like {/* this */}, not <!-- this -->.

function Greeting() {
  const name = "Sara";
  const hour = 14;
  return (
    <div className="greeting">
      {/* braces = escape hatch into JavaScript */}
      <h1>Hello, {name}!</h1>
      <p>{hour < 12 ? "Good morning" : "Good afternoon"}</p>
    </div>
  );
}

Props: passing data into a component

Components become truly reusable when you can pass them data, the same way HTML tags take attributes. These are called props (properties). The component receives them as one object, which we usually unpack directly:

function ProfileCard({ name, job }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{job}</p>
    </div>
  );
}

// Used three times, with different data each time:
function Team() {
  return (
    <section>
      <ProfileCard name="Sara" job="Designer" />
      <ProfileCard name="Ali" job="Developer" />
      <ProfileCard name="Lina" job="Project manager" />
    </section>
  );
}

One card design, written once, filled with different data. This is the "no more copy-paste" promise from chapter 1, delivered.

Rendering a list with .map()

When your data lives in an array, you turn each item into JSX with the array method .map(). Each generated element needs a key prop with a unique value, so React can track the items.

const team = [
  { name: "Sara", job: "Designer" },
  { name: "Ali", job: "Developer" },
  { name: "Lina", job: "Project manager" },
];

function Team() {
  return (
    <section>
      {team.map((person) => (
        <ProfileCard key={person.name} name={person.name} job={person.job} />
      ))}
    </section>
  );
}

Now adding a team member means adding one line of data, not copying a block of HTML. Read that code slowly until it makes sense; it is the pattern you will use most in real work.

State: values that change when the user interacts

Props flow in from outside and do not change. When a component needs its own changing value (a counter, an open/closed menu, an input's text), it uses state via the useState function:

"use client"; // required in Next.js, explained in chapter 10
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Read it as: "give me a value count starting at 0, and a function setCount to change it." When setCount runs, React re-renders the component with the new value. You never touch the DOM yourself; you change the data and React updates the screen.

function MenuItem({ name, price }) {
  return (
    <li>
      {name} · {price} €
    </li>
  );
}

const items = [
  { name: "Espresso", price: 2.5 },
  { name: "Cappuccino", price: 3.5 },
  { name: "Croissant", price: 2.0 },
];

function Menu() {
  return (
    <ul>
      {items.map((item) => (
        <MenuItem key={item.name} name={item.name} price={item.price} />
      ))}
    </ul>
  );
}

Chapter 04

Create the project, and a tour of every file

Goal: a running Next.js project on your machine, and you know what each file in it is for.

One command creates everything

$ npx create-next-app@latest my-first-site

The installer asks a few questions. Exact wording changes between versions; answer with this table and you will match this course:

Then start the development server:

$ cd my-first-site
$ npm run dev

  ▲ Next.js
  - Local:  http://localhost:3000

Open http://localhost:3000 in your browser. You should see the Next.js welcome page. localhost:3000 means "a website served by my own computer, on port 3000". Only you can see it. Keep this terminal running while you work; press Ctrl + C when you want to stop it.

Tour of the project

Two files matter today. First, app/page.js is your homepage. A page is just a React component that is default exported:

export default function Home() {
  return (
    <main>
      <h1>My first Next.js site</h1>
      <p>It is alive!</p>
    </main>
  );
}

Save the file and look at the browser: it updates instantly, without you refreshing. This is called hot reload, and it is why the dev server stays running.

Second, app/layout.js is the frame around every page. Notice it renders {children}; that placeholder is where each page's content appears. We work with it properly in chapter 7.

Chapter 05

Pages and routing: folders become URLs

Goal: create new pages and predict exactly which URL any file will get.

The rule

Remember the hero diagram at the top of this course. Here is the complete rule:

So to create an About page at /about, you create a folder app/about/ containing a file page.js:

export default function AboutPage() {
  return (
    <main>
      <h1>About us</h1>
      <p>We are a small team that loves the web.</p>
    </main>
  );
}

Save, then visit localhost:3000/about. That is all. No configuration file, no route registration. The folder structure is the configuration.

Folders nest, and so do URLs: app/services/design/page.js is served at /services/design.

Special file names inside app/

Next.js reserves a few file names. Each has one job:

Others exist (loading.js, error.js...), but these three are all you need for this course. Any file with a different name (like hero.js or data.js) is ignored by the router: no risk of creating a URL by accident.

Chapter 06

Navigation with <Link>

Goal: connect your pages with fast, app-like navigation.

You could connect pages with a normal <a href="/about"> tag, and it would work. But a plain <a> makes the browser throw away the whole page and download the next one from scratch: you see a white flash, and it is slow.

Next.js provides a <Link> component instead. It looks and behaves like a link (visitors can right-click it, open in a new tab, and search engines follow it), but Next.js swaps the page content without a full reload, and even pre-loads pages the visitor is likely to click. Same HTML underneath, much faster experience.

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <h1>My first Next.js site</h1>
      <p>
        Read more <Link href="/about">about us</Link>.
      </p>
    </main>
  );
}

The rule of thumb: use <Link> for pages inside your site, and a normal <a> for external websites (like a link to Instagram).

A navigation component

A nav bar is the perfect first custom component. Create a components/ folder at the project root (next to app/, not inside it) to hold reusable pieces:

import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

And use it in a page. Because Nav.js is our own file (not a package), the import path starts with dots that describe where the file is relative to the current one:

import Nav from "../components/Nav";

export default function Home() {
  return (
    <main>
      <Nav />
      <h1>My first Next.js site</h1>
    </main>
  );
}

../ means "go up one folder": from app/ up to the project root, then into components/. Getting import paths wrong is the number one beginner error; when it happens, the error message names the path it could not find, so check the dots first.

But wait: must we now import <Nav /> into every single page? That would be the copy-paste problem again. No. The next chapter fixes it properly.

Chapter 07

Layouts: build the frame once

Goal: a shared header and footer on every page, written exactly once.

Open app/layout.js. Simplified, it looks like this:

import "./globals.css";

export const metadata = {
  title: "My first site",
  description: "Built while learning Next.js",
};

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

Here is the mental model. The layout is a picture frame; each page is the picture. When someone visits /about, Next.js takes the layout and inserts the About page exactly where {children} is. Visit /contact, and the same frame gets the Contact page instead.

children is a prop that React fills automatically with whatever is nested inside. You never call it manually; you just mark where it belongs.

Put the nav and footer in the frame

import "./globals.css";
import Nav from "../components/Nav";

export const metadata = {
  title: "My first site",
  description: "Built while learning Next.js",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Nav />
        {children}
        <footer>© 2026 My first site</footer>
      </body>
    </html>
  );
}

Now delete <Nav /> (and its import) from your homepage: it would appear twice otherwise. Click through the site. Every page has the nav and the footer, and none of the page files mention them. This is the fix for the copy-paste problem from chapter 1. The 25-page footer update that took an hour is now a one-line edit.

One last fact to remember: the root layout is the only place in the whole app with <html> and <body> tags. Pages never include them.

Chapter 08

Styling: global CSS and CSS Modules

Goal: know where site-wide styles go, where component styles go, and why the two are separate.

Global CSS: the site-wide rules

app/globals.css is already imported by your root layout, so anything in it applies everywhere. This is the right place for foundations: fonts, background color, link colors, resets. Replace its content with something small and readable:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background: #ffffff;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

CSS Modules: styles that cannot leak

Here is a classic team accident: you write .card { padding: 20px } for the services page, and a month later a teammate names something else .card on the contact page. The styles collide and one page breaks mysteriously.

CSS Modules prevent this. Name a file Something.module.css and Next.js makes every class in it private to the component that imports it, by renaming classes behind the scenes to something unique like Nav_card__x7Kd2. Two files can both use .card and never collide.

.nav {
  display: flex;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.nav a {
  text-decoration: none;
  color: #1f2933;
  font-weight: 600;
}

.nav a:hover {
  color: #0e7c5b;
}

import Link from "next/link";
import styles from "./Nav.module.css";

export default function Nav() {
  return (
    <nav className={styles.nav}>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

Read the pattern: import the stylesheet as an object called styles, then use className={styles.nav}. The class name comes from JavaScript (that is why it sits in curly braces), and it maps to the .nav rule in the module file.

Chapter 09

Images and the public/ folder

Goal: add images to the site the correct Next.js way.

The public/ folder

Anything you put in public/ is served from the root of your site, exactly as-is. A file at public/logo.png is available in the browser at /logo.png. Note that the URL does not include the word "public".

The <Image> component

You could use a plain <img> tag, but Next.js ships an upgraded <Image> component that lazy-loads images (they only download when scrolled into view) and prevents the page from jumping around while images load. That jump is a real ranking and usability problem called layout shift, and it is why width and height are required: they reserve the space in advance.

import Image from "next/image";

export default function AboutPage() {
  return (
    <main>
      <h1>About us</h1>
      <Image
        src="/images/team.jpg"
        alt="Our team standing in front of the office"
        width={720}
        height={480}
      />
    </main>
  );
}

• src starts with / and is the path inside public/.
• alt describes the image for blind visitors and for search engines. Write it like you are describing the photo on the phone to someone. Purely decorative image? Use alt="".
• width and height are numbers in curly braces (they are JavaScript numbers, not strings). Use the image's real proportions.

Chapter 10

Server vs Client Components

Goal: know when a file needs "use client" at the top, and why most files do not.

Every component in the app/ folder is, by default, a Server Component: Next.js renders it to finished HTML ahead of time. That HTML is small and instant for the visitor. All the pages you have built so far are Server Components, and that is exactly right for a static site.

But some things can only happen in the visitor's browser: reacting to clicks, remembering state, reading the window size. A component that does these things must be a Client Component, and you mark it by writing one line at the very top of the file:

"use client";

import { useState } from "react";

export default function FaqItem({ question, answer }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>{question}</button>
      {open && <p>{answer}</p>}
    </div>
  );
}

Two new things in that code: setOpen(!open) flips the value between true and false, and {open && <p>...</p>} means "render this paragraph only when open is true".

The decision is mechanical

In practice you do not even need to memorize this: if you use useState in a file without the marker, Next.js stops with an error that literally tells you to add "use client". Read errors; they are usually instructions.

And yes, Client Components still work in our static export. Their HTML is pre-built like everything else, and their JavaScript runs in the visitor's browser to make them interactive.

<button onClick={() => setOpen(!open)}>
  {open ? "-" : "+"} {question}
</button>

Chapter 11

From data to UI

Goal: keep content in one data file and render it with components, the way real sites are built.

Real websites separate content from presentation. The menu prices live in a data file; the components decide how they look. When the client says "the cappuccino is 4 euros now", you change one number, not any markup.

Create a data folder at the project root:

export const menuItems = [
  { id: 1, name: "Espresso", price: 2.5, desc: "Short and strong." },
  { id: 2, name: "Cappuccino", price: 3.5, desc: "Creamy classic." },
  { id: 3, name: "Flat White", price: 3.8, desc: "Silky and smooth." },
  { id: 4, name: "Croissant", price: 2.0, desc: "Baked every morning." },
];

Note this is a named export (no default). A file can have many named exports, and you import them with curly braces matching the exact name.

Now a card component and a page that combines everything you have learned:

import styles from "./MenuCard.module.css";

export default function MenuCard({ name, price, desc }) {
  return (
    <article className={styles.card}>
      <div className={styles.top}>
        <h3>{name}</h3>
        <span className={styles.price}>{price.toFixed(2)} €</span>
      </div>
      <p>{desc}</p>
    </article>
  );
}

import { menuItems } from "../../data/menu";
import MenuCard from "../../components/MenuCard";

export default function MenuPage() {
  return (
    <main>
      <h1>Our menu</h1>
      {menuItems.map((item) => (
        <MenuCard
          key={item.id}
          name={item.name}
          price={item.price}
          desc={item.desc}
        />
      ))}
    </main>
  );
}

Trace the flow out loud, it is the core loop of modern frontend work: data file → import the array → .map() over it → one component per item → props fill the component. Every product grid, team page, and pricing table you will ever build is this same pattern with different CSS.

Chapter 12

Metadata: titles, descriptions, and the browser tab

Goal: give every page its own title and description, which Google and social networks read.

Metadata is information about the page: the title in the browser tab, the description Google shows under a search result. In Next.js you never write <head> tags by hand; you export a metadata object and Next.js generates the tags.

You already have site-wide metadata in app/layout.js. Any page can export its own, which overrides the layout's for that page:

export const metadata = {
  title: "Our menu | The Little Café",
  description: "Espresso, cappuccino and fresh pastries in the heart of town.",
};

export default function MenuPage() {
  // ...same as before
}

Rules of thumb your future SEO colleagues will thank you for:

• Every page gets a unique title, formatted like Page name | Site name.
• The description is one honest, specific sentence. It is your ad in the search results.

Chapter 13

Static export: turn your project into a folder of files

Goal: build the site into plain HTML/CSS/JS files that can be hosted anywhere.

One config change

Tell Next.js you want a static export. Open next.config.mjs and add two settings:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

export default nextConfig;

• output: "export" means: at build time, generate a folder of finished static files.
• images: { unoptimized: true } is the promise from chapter 9: on-the-fly image resizing needs a server, and a static site has none, so we switch that single feature off.

Build it

$ npm run build

Route (app)
┌ ○ /
├ ○ /about
├ ○ /contact
└ ○ /menu

○  (Static)  prerendered as static content

Every ○ (Static) circle is a page that was pre-built into HTML. The result lands in a new folder called out/:

Open out/about.html in your editor and look at it. It is real, finished HTML containing your text. This is what "static" meant in chapter 1: the work happened on your machine at build time, so the visitor's browser gets instant files.

Preview and host it

To preview the built site locally:

$ npx serve out

To put it on the internet, upload the contents of out/ to any static host. Free options: drag the folder onto netlify.com/drop, or push the project to GitHub and import it into Vercel or Cloudflare Pages (they run npm run build for you on every push). No servers to manage, nothing to keep updated, nothing that can be hacked at 3 a.m.

Chapter 14 · The real project

Build a real company's website

Goal: deliver a complete static site for a real client, alone, from empty folder to exported build. This is your end-of-training deliverable.

This is no longer practice. Your trainer hands you the brief of a real company: its name, its business, its texts, its logo and its photos. Your job for days 7 to 12 is to turn that content into a finished website, applying exactly what you learned. Build it from scratch in a new project (do not reuse the practice project; starting from a blank folder is part of the job). Try to work without rereading the chapters, and treat them as your documentation when you get stuck.

The expected pages

The exact content comes from your trainer's brief, but a company site almost always follows this plan. Adapt the names if the brief asks for it:

Site-wide requirements (this is what you will be evaluated on):

• Nav and footer on every page, via the root layout, never repeated in a page file.
• Every component styled with its own CSS Module; only foundations in globals.css.
• Every image through <Image> with real alt text.
• Unique metadata on every page.
• Exactly one file in the whole project says "use client" (the FAQ item).
• It builds with npm run build and works when served from out/.

Suggested project structure

One milestone per day

Professionals do not build everything at once. One milestone per day, verified in the browser before moving to the next. If a milestone is done early, get ahead on the next one. Check them off as you go:

Bonus goals, only if you finish early

• Add a custom 404 page with app/not-found.js.
• Group the services by category - hint: two arrays, or .filter() before .map().

Appendix A

Cheat sheet

Appendix B

Common errors, decoded

General debugging method: read the first error (later ones are usually echoes of it), note the file name and line number it mentions, and re-read that exact line. Nine times out of ten it is a typo, a missing import, or a missing closing tag.

Appendix C

Glossary

Component

A capitalized JavaScript function that returns JSX. The reusable building block of React.

JSX

The HTML-like syntax inside components. Curly braces embed JavaScript.

Props

Data passed into a component like HTML attributes, making it reusable with different content.

State

A component's own changing value, created with useState. Changing it re-renders the component.

App Router

Next.js's routing system where folders in app/ define URLs.

Layout

A shared frame around pages. Renders each page where it says {children}.

Server Component

The default. Rendered to HTML ahead of time; no interactivity of its own.

Client Component

A component marked "use client" whose JavaScript runs in the browser for interactivity.

CSS Module

A .module.css file whose class names are private to the component importing it.

Hot reload

The dev server updating the browser instantly when you save a file.

Static export

Building the whole site into plain files in out/, hostable on any static host.

Build

The process (npm run build) that turns your source code into optimized production files.

localhost:3000

Your own computer serving the site during development. Only visible to you.

npm

The package manager that installs libraries and runs project scripts.