description |
---|
Next.js has a built-in, opinionated, and file-system based Router. You can learn how it works here. |
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages
directory it's automatically available as a route.
The files inside the pages
directory can be used to define most common patterns.
The router will automatically route files named index
to the root of the directory.
pages/index.js
→/
pages/blog/index.js
→/blog
The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.
pages/blog/first-post.js
→/blog/first-post
pages/dashboard/settings/username.js
→/dashboard/settings/username
To match a dynamic segment you can use the bracket syntax. This allows you to match named parameters.
pages/blog/[slug].js
→/blog/:slug
(/blog/hello-world
)pages/[username]/settings.js
→/:username/settings
(/foo/settings
)pages/post/[...all].js
→/post/*
(/post/2020/id/title
)
The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.
A special React component called Link
is provided to do this client-side route transition.
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
</ul>
)
}
export default Home
When linking to a route with dynamic path segments you have to provide href
and as
to make sure the router knows which JavaScript file to load.
href
- The name of the page in thepages
directory. For example/blog/[slug]
.as
- The url that will be shown in the browser. For example/blog/hello-world
.
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/blog/[slug]" as="/blog/hello-world">
<a>To Hello World Blog post</a>
</Link>
</li>
</ul>
)
}
export default Home
Examples
To access the router
object in a React component you can use useRouter
or withRouter
.
In general we recommend using useRouter
.
The router is divided in multiple parts: