Luis Alvarez D d1fdd2bbf8 Add descriptions to documentation pages (#9901 )

* Added descriptions

* Added descriptions to API Reference

* Added descriptions to API Routes

* Added descriptions to basic features

* Added descriptions to the routing docs

* Update exportPathMap.md

Co-authored-by: Joe Haddad <timer150@gmail.com>

2020-01-03 13:16:51 -05:00

3.1 KiB

Raw Blame History

description
Next.js has a built-in, opinionated, and file-system based Router. You can learn how it works here.

Routing

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.

Index routes

The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

Nested routes

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

Dynamic route segments

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)

Linking between pages

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 the pages 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