Navigation Demo

{/* Link Component - Soft Navigation */}

Soft Navigation with Link

These links use next/link for client-side transitions. Notice how the page does not fully reload.

{/* Hard Navigation Comparison */}

Hard Navigation (Avoid)

Plain anchor tags cause full page reloads. Notice the browser refresh indicator.

{/* Programmatic Navigation with useRouter */}

Programmatic Navigation

useRouter enables navigation from event handlers and conditional logic.

{/* State Preservation Demo */}

State Preservation

Navigate to child pages and back. The layout state is preserved during soft navigation.

Current timestamp: {Date.now()}

(This updates on hard navigation but not soft navigation from child pages back)

{/* Key concepts summary */}

Key Concepts

Soft navigation: Client-side transitions, preserves state
Hard navigation: Full page reload, clears state
Link component: Declarative soft navigation
useRouter: Programmatic client-side navigation
redirect(): Server-side navigation (see below)

Page A

You navigated here via soft navigation. The layout was preserved.

Page B

You navigated here via soft navigation. The layout was preserved.

Protected Content

Welcome, {session.user.name}!

Create New Post

Title

Content

</div>

<button
          type="submit"
          className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
        >
          Create Post
        </button>
      </form>
    </main>
  );
}
```

### Step 6: Conditional Redirect Based on Data

```tsx title="apps/web/src/app/users/[id]/page.tsx"
import { redirect } from "next/navigation";
import { notFound } from "next/navigation";

async function fetchUser(id: string) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) return null;
  return res.json();
}

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function UserPage({ params }: PageProps) {
  const { id } = await params;
  const user = await fetchUser(id);

// Redirect to login if user not found (auth scenario)
  if (!user) {
    redirect("/login");
  }

// Alternative: show 404 for missing resources
  // if (!user) {
  //   notFound();
  // }

return (
    <main className="mx-auto max-w-2xl p-8">
      <h1 className="mb-4 font-bold text-2xl">{user.name}</h1>
      <p>{user.email}</p>
    </main>
  );
}
```

### Key Decisions Explained

1. **Link over anchor tags**: `<Link>` provides soft navigation (client-side transitions) that preserves state, enables prefetching, and feels faster. Plain `<a>` tags trigger hard navigation with full page reloads.

2. **useRouter for programmatic navigation**: When you need to navigate based on events or conditions (button clicks, form submissions, conditional logic), use `useRouter` in a Client Component.

3. **redirect() for server-side navigation**: Use `redirect()` in Server Components, Server Actions, and Route Handlers. Common uses include authentication checks and redirecting after mutations.

4. **type="button" on all buttons**: Biome requires explicit `type` attributes on buttons. Without it, buttons default to `type="submit"` which can cause unintended form submissions.

5. **router.replace vs router.push**: Use `replace` when you don't want users to navigate back (e.g., after login redirect). Use `push` for normal navigation where back button should work.

6. **revalidatePath before redirect**: When redirecting after a mutation, call `revalidatePath()` first to ensure the destination page shows fresh data.

\*\*Side Quest: Build a Breadcrumb Generator\*\*

## References

- <https://nextjs.org/docs/app/getting-started/linking-and-navigating>
- <https://nextjs.org/docs/app/api-reference/components/link>

---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)