---
title: "Routing and Navigation"
description: "The routing and navigation system determines how users move through your application and how URLs map to your user interface. Next.js uses a file-system based router where folders and special files..."
last_updated: "2026-10-12T06:40:49.088149+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/routing-and-navigation"
---

## Overview

The routing and navigation system determines how users move through your application and how URLs map to your user interface. Next.js uses a file-system based router where folders and special files define your pages, shared layouts, dynamic path segments, and navigation behaviors.

---

## Creating Pages and Shared Layouts

### Understanding Pages and Layouts

To build your application, you organize folders and special files to establish pages and common wrappers. A page is a unique UI screen served at a specific path, created by adding a file named `page.js` or `page.tsx` inside a folder. A layout is UI that is shared across multiple pages, created by adding a `layout.js` or `layout.tsx` file.

### Structuring Folders and Files

* **Home page:** Place a `page.js` file at the root of your application folder to serve the main entry point (`/`).
* **Nested pages:** Create subfolders to automatically generate corresponding URL paths. For example, a file located at `app/dashboard/settings/page.js` is accessible at the `/dashboard/settings` URL path.
* **Layout persistence:** Layouts wrap child pages and child layouts automatically. When navigating between pages that share a layout, the layout component persists while only the nested page content updates.

---

## Dynamic Paths

### Understanding Dynamic Segments

When you do not know exact segment names ahead of time — such as when displaying a specific user profile or blog post — you can use dynamic paths. Wrap a folder name in square brackets, such as `[id]` or `[team]`, to match any value in that part of the URL.

### Reading Route Parameters

In your components, you can read these dynamic values using the `useParams` hook. For example, visiting `/dashboard/nextjs` on a route like `dashboard/[team]` makes `team` available as `"nextjs"`.

> [!TIP]
> You can also access current route information using client hooks like `usePathname()` to read the current URL pathname or `useSearchParams()` to read URL search parameters.

---

## Linking Between Pages

### Programmatic Navigation Overview

To allow users to navigate smoothly between pages, Next.js provides programmatic navigation tools. Inside client components, you can use the `useRouter` hook to change routes programmatically in response to user actions or events.

```tsx
"use client"
import { useRouter } from 'next/navigation'

export default function Page() {
 const router = useRouter()
 
 function handleClick() {
  router.push('/dashboard') // Navigate to /dashboard
 }

 return <button onClick={handleClick}>Go to Dashboard</button>
}
```

### Available Navigation Methods

The router instance returned by `useRouter()` provides several methods for controlling navigation flow:

| Method | Description |
| :--- | :--- |
| `router.push(href, options)` | Navigates to a new URL by pushing a new history entry onto the stack. |
| `router.replace(href, options)` | Replaces the current URL in the history stack without adding a new entry. |
| `router.refresh()` | Refreshes the current route, fetching fresh data from the server without losing client-side state. |
| `router.back()` | Moves back one step in the browser history stack. |
| `router.forward()` | Moves forward one step in the browser history stack. |
| `router.prefetch(href)` | Prefetches the specified page in the background for instant navigation. |

> [!WARNING]
> Always make sure to include the `"use client"` directive at the top of any component file that uses `useRouter`, `usePathname`, `useParams`, or `useSearchParams`.

## Related

- [Server and Client](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-features/server-and-client)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.