Getting Started
Core Concepts
Troubleshooting
The routing and navigation system allows you to define application pages, create nested layouts, handle route requests, and move between different routes seamlessly. By organizing files and folders in a structured directory, you can build dynamic, multi-page web applications with shared layouts and built-in performance features.
Application pages and layouts are structured using a file-system based routing approach.
(dashboard)) allow you to organize routes logically without affecting the URL path.@ symbol (such as @children) let you render multiple pages simultaneously within the same layout.You can navigate between different routes programmatically using the provided router methods or hooks.
The router instance exposes methods to control client-side navigation and page state:
When calling push or replace, you can pass an options object to customize behavior:
scroll: Set to false to prevent the browser from scrolling to the top of the page upon navigation (defaults to true).transitionTypes: An array of transition type strings passed to view transition APIs for custom animations.You can use built-in hooks within client components to read information about the active route.
useParams(): Reads dynamic route parameters from the current URL (for example, reading team from a dynamic route segment like /dashboard/[team]).usePathname(): Returns the current URL pathname.useSearchParams(): Returns a read-only URLSearchParams object for reading query parameters.useSelectedLayoutSegment(): Returns the active route segment one level below the layout it is called from.useSelectedLayoutSegments(): Returns all active route segments below the layout it is called from.'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button onClick={() => router.push('/dashboard')}>
Go to Dashboard
</button>
)
}'use client'
import { useParams } from 'next/navigation'
export default function TeamPage() {
// On a route like /dashboard/[team] where the URL is /dashboard/nextjs
const { team } = useParams() // team === "nextjs"
return <div>Current Team: {team}</div>
}Tip
Use router.prefetch() or rely on automatic link prefetching to load destination pages before the user clicks, ensuring instant transitions.
Warning
Hooks such as useParams, usePathname, and useSearchParams require your component to be marked with the 'use client' directive at the top of the file.