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.jsfile 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.jsis accessible at the/dashboard/settingsURL 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.
"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.