NOA Labs

Next.js Introduction

What Next.js adds over plain React, installing it, and the App Router's app/ directory convention.

What Next.js adds on top of React

React (covered in its own track) is a UI library — it renders components, but it has no built-in opinion about routing, data fetching, or how your app is bundled and served. Next.js is a full framework built on React that fills in exactly those gaps:

Concern Plain React (e.g. via Vite) Next.js
Routing Add a router library yourself (React Router) File-based, built in — a file's path is its route
Rendering Client-side only by default Server-rendered, statically generated, or a mix — chosen per route
Data fetching useEffect + fetch, or a data-fetching library Fetch directly inside async Server Components, no client-side loading boilerplate
Backend endpoints A separate server needed Route Handlers and Server Actions, in the same project
Bundling/optimization Configure a bundler yourself Zero-config — code splitting, image/font optimization, and more, out of the box

None of this makes Next.js strictly better than React alone — a component library, a browser extension, or an app with no server at all may not need any of it. Next.js earns its place in production web apps that care about initial page load, SEO, and having a single codebase cover both frontend and lightweight backend needs.

Installing Next.js

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

The CLI walks you through several prompts — TypeScript (recommended, and used throughout this track), ESLint, and whether to use the app/ directory. The App Router is the default and recommended choice for all new projects.

Bash
cd my-app
npm run dev

The app is now running at http://localhost:3000.

The App Router's app/ directory

Since Next.js 13, routing lives in an app/ directory, where the folder structure itself defines the URL structure, and specific filenames carry special meaning:

Plaintext
app/
├── layout.tsx     # shared UI wrapping every page below it
├── page.tsx       # the UI for the "/" route
├── about/
│   └── page.tsx   # the UI for the "/about" route
└── blog/
    └── [slug]/
        └── page.tsx   # a dynamic route: "/blog/hello-world", "/blog/anything"

A folder only becomes a reachable route once it contains a page.tsx — a folder with no page.tsx can still exist purely for organization (colocating components, tests, or utilities) without adding a URL.

You'll sometimes see an older Next.js project use a pages/ directory instead (the Pages Router) — that was the only routing model before Next.js 13, and it's still supported for backward compatibility, but the App Router is the modern default this track uses throughout, and is where new features (Server Components, streaming, Server Actions) land first.

Common mistakes

  • Assuming Next.js is React with extra syntax — the App Router's default rendering behavior (Server Components, no client-side JS by default) is different enough from plain React that code copied from a plain React tutorial often needs adjusting.
  • Mixing app/ and pages/ conventions in the same route — pick the App Router for new projects and stay consistent.
  • Forgetting that every route folder needs its own page.tsx to actually be reachable — a folder alone renders nothing.