Routing

Goal

This snapshot advances Meridian Notes by teaching you to add pages and navigation with file-system routes.

Every numbered folder is a complete application. Run this stage on its own, then compare it with the previous snapshot to isolate the new responsibility.

Prerequisites

Use Node.js 20 or newer, npm, and a terminal. You should be comfortable with JavaScript functions, objects, modules, and basic HTML forms.

The development server uses port 3000. Data-backed snapshots use PostgreSQL on host port 5433 and keep their data in a database unique to that folder.

• Node.js and npm installed
• A code editor and terminal
• Docker from part 4 onward

Concepts

Folders below app define route segments. Next.js Link performs accessible client-side navigation while preserving App Router behavior.

Keep the server boundary visible: Server Components may read trusted data directly, while Server Actions and route handlers must validate all incoming values and re-check authorization.

Walkthrough

Add an About route, link it from the shared navigation, and verify an unknown URL reaches Next.js not-found handling.

Trace the example from request to rendered result, then inspect the matching snapshot for its surrounding types, validation, error handling, and configuration.

import Link from "next/link";
<Link href="/about">About</Link>

Run and verify

Enter 02-Routing, install its dependencies, and copy .env.example when the snapshot includes one.

Open http://localhost:3000. Keep the terminal visible so framework, Prisma, and authentication errors can be matched to the browser action that caused them.

git clone https://github.com/michaeldunga1/fcc-nextjs-blog.git
cd fcc-nextjs-blog/02-Routing
npm install
npm run dev

Troubleshooting

Route names are case-sensitive on Linux. Check that every page exports a default React component and that links begin with a slash.

A missing-module error usually means npm ran in another snapshot. Database errors often mean Docker is stopped, the environment file is missing, or this folder points at the wrong numbered database.

• Read the first error first
• Restart after environment changes
• Never commit .env or node_modules

Try this

Add a /guidelines page and link it from the header.

Test one expected path and one invalid or unauthorized path. A production-minded app gives useful feedback without exposing secrets or stack traces.

• Make one focused change
• Verify it in the browser
• Continue only after this snapshot works