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.
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};
}