Skip to main content
Alvin QuachFull Stack Developer
HomeProjectsExperienceBlog
HomeProjectsExperienceBlog
alvinquach

Full Stack Developer building systems that respect complexity.

Open to opportunities

AQ

Projects

  • All Projects
  • Hoparc Physical Therapy
  • OpportunIQ
  • Hoop Almanac
  • SculptQL

Knowledge

  • Blog
  • Experience
  • Interview Prep

Connect

  • Contact
  • LinkedIn
  • GitHub
  • X

Resources

  • Resume
© 2026All rights reserved.
Back to Blogs
Tutorial
Depth: ●●●○○

Next.js Navigation Functions: redirect, notFound, useRouter, and URL State Management

Master Next.js navigation with redirect(), permanentRedirect(), notFound(), useRouter(), usePathname(), and useSearchParams(). Real examples of building shareable filter URLs and handling 404s gracefully.

Published September 10, 20251 min readImportance: ★★★★☆
Share:

Next.js App Router Navigation Cheat Sheet

Below is a condensed reference based on your examples, keeping your patterns and mental models intact.

Server-Side Navigation

notFound() – 404 for Missing Content

Use when: Dynamic content doesn’t exist.

Rules:

Only in Server Components / Route Handlers.

Throws an error internally and renders the nearest not-found.tsx.

Always check for null / undefined before rendering.

Pattern:

```ts

import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {

const { slug } = await params;

const data = await getData(slug);

if (!data) {

notFound();

}

return

{data.title};

}