{"pageProps":{"routes":[{"title":"Documentation","heading":true,"routes":[{"title":"Getting Started","path":"/docs/getting-started.md"},{"title":"Basic Features","open":true,"routes":[{"title":"Pages","path":"/docs/basic-features/pages.md"},{"title":"Data fetching","path":"/docs/basic-features/data-fetching.md"},{"title":"Built-in CSS Support","path":"/docs/basic-features/built-in-css-support.md"},{"title":"Static File Serving","path":"/docs/basic-features/static-file-serving.md"},{"title":"TypeScript","path":"/docs/basic-features/typescript.md"},{"title":"Environment Variables","path":"/docs/basic-features/environment-variables.md"}]},{"title":"Routing","routes":[{"title":"Introduction","path":"/docs/routing/introduction.md"},{"title":"Dynamic Routes","path":"/docs/routing/dynamic-routes.md"},{"title":"Imperatively","path":"/docs/routing/imperatively.md"},{"title":"Shallow Routing","path":"/docs/routing/shallow-routing.md"}]},{"title":"API Routes","routes":[{"title":"Introduction","path":"/docs/api-routes/introduction.md"},{"title":"Dynamic API Routes","path":"/docs/api-routes/dynamic-api-routes.md"},{"title":"API Middlewares","path":"/docs/api-routes/api-middlewares.md"},{"title":"Response Helpers","path":"/docs/api-routes/response-helpers.md"}]},{"title":"Deployment","path":"/docs/deployment.md"},{"title":"Advanced Features","routes":[{"title":"Preview Mode","path":"/docs/advanced-features/preview-mode.md"},{"title":"Dynamic Import","path":"/docs/advanced-features/dynamic-import.md"},{"title":"Automatic Static Optimization","path":"/docs/advanced-features/automatic-static-optimization.md"},{"title":"Static HTML Export","path":"/docs/advanced-features/static-html-export.md"},{"title":"Absolute Imports and Module Path Aliases","path":"/docs/advanced-features/module-path-aliases.md"},{"title":"AMP Support","routes":[{"title":"Introduction","path":"/docs/advanced-features/amp-support/introduction.md"},{"title":"Adding AMP Components","path":"/docs/advanced-features/amp-support/adding-amp-components.md"},{"title":"AMP Validation","path":"/docs/advanced-features/amp-support/amp-validation.md"},{"title":"AMP in Static HTML export","path":"/docs/advanced-features/amp-support/amp-in-static-html-export.md"},{"title":"TypeScript","path":"/docs/advanced-features/amp-support/typescript.md"}]},{"title":"Customizing Babel Config","path":"/docs/advanced-features/customizing-babel-config.md"},{"title":"Customizing PostCSS Config","path":"/docs/advanced-features/customizing-postcss-config.md"},{"title":"Custom Server","path":"/docs/advanced-features/custom-server.md"},{"title":"Custom `App`","path":"/docs/advanced-features/custom-app.md"},{"title":"Custom `Document`","path":"/docs/advanced-features/custom-document.md"},{"title":"Custom Error Page","path":"/docs/advanced-features/custom-error-page.md"},{"title":"`src` Directory","path":"/docs/advanced-features/src-directory.md"},{"title":"Multi Zones","path":"/docs/advanced-features/multi-zones.md"},{"title":"Measuring performance","path":"/docs/advanced-features/measuring-performance.md"}]},{"title":"Upgrade Guide","path":"/docs/upgrading.md"},{"title":"FAQ","path":"/docs/faq.md"}]},{"title":"API Reference","heading":true,"routes":[{"title":"CLI","path":"/docs/api-reference/cli.md"},{"title":"next/router","path":"/docs/api-reference/next/router.md"},{"title":"next/link","path":"/docs/api-reference/next/link.md"},{"title":"next/head","path":"/docs/api-reference/next/head.md"},{"title":"next/amp","path":"/docs/api-reference/next/amp.md"},{"title":"Data Fetching","routes":[{"title":"getInitialProps","path":"/docs/api-reference/data-fetching/getInitialProps.md"}]},{"title":"next.config.js","routes":[{"title":"Introduction","path":"/docs/api-reference/next.config.js/introduction.md"},{"title":"Environment Variables","path":"/docs/api-reference/next.config.js/environment-variables.md"},{"title":"Custom Page Extensions","path":"/docs/api-reference/next.config.js/custom-page-extensions.md"},{"title":"CDN Support with Asset Prefix","path":"/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md"},{"title":"Build Target","path":"/docs/api-reference/next.config.js/build-target.md"},{"title":"Custom Webpack Config","path":"/docs/api-reference/next.config.js/custom-webpack-config.md"},{"title":"Compression","path":"/docs/api-reference/next.config.js/compression.md"},{"title":"Static Optimization Indicator","path":"/docs/api-reference/next.config.js/static-optimization-indicator.md"},{"title":"Runtime Configuration","path":"/docs/api-reference/next.config.js/runtime-configuration.md"},{"title":"Disabling x-powered-by","path":"/docs/api-reference/next.config.js/disabling-x-powered-by.md"},{"title":"Disabling ETag Generation","path":"/docs/api-reference/next.config.js/disabling-etag-generation.md"},{"title":"Setting a custom build directory","path":"/docs/api-reference/next.config.js/setting-a-custom-build-directory.md"},{"title":"Configuring the Build ID","path":"/docs/api-reference/next.config.js/configuring-the-build-id.md"},{"title":"Configuring onDemandEntries","path":"/docs/api-reference/next.config.js/configuring-onDemandEntries.md"},{"title":"Ignoring TypeScript Errors","path":"/docs/api-reference/next.config.js/ignoring-typescript-errors.md"},{"title":"exportPathMap","path":"/docs/api-reference/next.config.js/exportPathMap.md"}]}]}],"data":{"description":"Next.js has a built-in, opinionated, and file-system based Router. You can learn how it works here."},"route":{"title":"Introduction","path":"/docs/routing/introduction.md"},"html":"

Routing

\n

Next.js has a file-system based router built on the concept of pages.

\n

When a file is added to the pages directory it's automatically available as a route.

\n

The files inside the pages directory can be used to define most common patterns.

\n

Index routes\n \n \n \n \n

\n

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

\n\n

Nested routes\n \n \n \n \n

\n

The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.

\n\n

Dynamic route segments\n \n \n \n \n

\n

To match a dynamic segment you can use the bracket syntax. This allows you to match named parameters.

\n\n

Linking between pages\n \n \n \n \n

\n

The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.

\n

A React component called Link is provided to do this client-side route transition.

\n
import Link from 'next/link'\n\nfunction Home() {\n  return (\n    <ul>\n      <li>\n        <Link href=\"/\">\n          <a>Home</a>\n        </Link>\n      </li>\n      <li>\n        <Link href=\"/about\">\n          <a>About Us</a>\n        </Link>\n      </li>\n    </ul>\n  )\n}\n\nexport default Home\n
\n

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.

\n\n
import Link from 'next/link'\n\nfunction Home() {\n  return (\n    <ul>\n      <li>\n        <Link href=\"/blog/[slug]\" as=\"/blog/hello-world\">\n          <a>To Hello World Blog post</a>\n        </Link>\n      </li>\n    </ul>\n  )\n}\n\nexport default Home\n
\n

The as prop can also be generated dynamically. For example, to show a list of posts which have been passed to the page as a prop:

\n
function Home({ posts }) {\n  return (\n    <ul>\n      {posts.map(post => (\n        <li key={post.id}>\n          <Link href=\"/blog/[slug]\" as={`/blog/${post.slug}`}>\n            <a>{post.title}</a>\n          </Link>\n        </li>\n      ))}\n    </ul>\n  )\n}\n
\n

Injecting the router\n \n \n \n \n

\n
\n Examples\n \n
\n

To access the router object in a React component you can use useRouter or withRouter.

\n

In general we recommend using useRouter.

\n

Learn more\n \n \n \n \n

\n

The router is divided in multiple parts:

\n
\n

next/link

Handle client-side navigations.\n
\n
\n

next/router

Leverage the router API in your pages.\n
"},"__N_SSG":true}