Create a Next.js 16 App Router project

After this lesson you will have a Next.js 16 project with a home page and a journal section that share a layout, built from a reproducible setup.

What Next.js adds to React

First finish the React, TypeScript, Secure APIs, and Testing courses named in the course description. Full stack means connecting the browser interface, server work and data storage. Next.js helps build that connection with React.

Its App Router maps folders to web addresses, called routes. A file named page.tsx creates a page. A layout.tsx wraps the pages beneath it, like a shared frame around several pictures. Start with public placeholder text so you can check routing before adding private data.

Worked example: create the project

Use Node 22 or newer, in a folder outside any other project:

npx create-next-app@16.4.0 journal-practice --ts --eslint --app --src-dir --use-npm --no-tailwind --import-alias "@/*" --yes
cd journal-practice
npm ls next react
npm run dev -- --hostname 127.0.0.1

npm ls should show next@16.4.0 and react@19.3.0. Open http://127.0.0.1:3000.

Open next.config.ts. This template enables cacheComponents: true. Prerendering means preparing page content ahead of a request, often during the build. Next prepares what it can in advance.

Other work needs the current request, such as its cookies, route ID or database reads. Put that work inside <Suspense>. A Suspense boundary shows a fallback, such as "Loading," while that part is being prepared. Streaming means sending ready parts without waiting for every part to finish. You will use this pattern in the next lesson.

Replace src/app/page.tsx:

import Link from 'next/link';

export default function Home() {
  return (
    <main>
      <h1>Journal practice</h1>
      <ul>
        <li><Link href="/journal">Open your journal</Link></li>
        <li><Link href="/examples/n1">Read a public example</Link></li>
      </ul>
    </main>
  );
}

Create src/app/journal/layout.tsx:

import Link from 'next/link';

export default function JournalLayout({ children }: { children: React.ReactNode }) {
  return (
    <main>
      <h1>Learning journal</h1>
      <nav aria-label="Journal">
        <Link href="/">Home</Link>{' '}
        <Link href="/journal">All entries</Link>
      </nav>
      {children}
    </main>
  );
}

And a first src/app/journal/page.tsx:

export default function JournalHome() {
  return <section><h2>Your entries</h2><p>Entries will appear here.</p></section>;
}

Open the home page and follow Open your journal. You should see the shared Learning journal heading, the Home and All entries links, and the page's own Your entries section. The template's src/app/layout.tsx already provides <html> and <body>; never repeat those in a nested layout.

How routes map to files

A folder without a page.tsx has no URL of its own.

Practice

1. Add an /about page with a heading and a link back home.
2. Rename src/app/journal/page.tsx to pages.tsx. Visit /journal: you get a 404, because only page.tsx creates a route. Rename it back.
3. Commit the project and push it to a new private GitHub repository. Write the setup commands and versions in the README.

Check yourself

1. Does every folder under app create a page?
2. Why keep the root layout?
3. What must wrap a component that reads cookies when Cache Components is on?

Answers

1. No. Only a folder containing page.tsx does.
2. It provides the document's <html> and <body>, which every page needs.
3. A <Suspense> boundary.

Next, you will add dynamic routes for public example entries.

Sources: Next.js installation, Layouts and pages.