{"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":"Enable client-side transitions between routes with the built-in Link component."},"route":{"title":"next/link","path":"/docs/api-reference/next/link.md"},"html":"

next/link

\n
\n Examples\n \n
\n
\n

Before moving forward, we recommend you to read Routing Introduction first.

\n
\n

Client-side transitions between routes can be enabled via the Link component exported by next/link.

\n

An example of linking to / and /about:

\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

Link accepts the following props:

\n\n

External URLs, and any links that don't require a route navigation using /pages, don't need to be handled with Link; use the anchor tag for such cases instead.

\n

Dynamic routes\n \n \n \n \n

\n

A Link to a dynamic route is a combination of the href and as props. A link to the page pages/post/[pid].js will look like this:

\n
<Link href=\"/post/[pid]\" as=\"/post/abc\">\n  <a>First Post</a>\n</Link>\n
\n

href is a file system path used by the page and it shouldn't change at runtime. as on the other hand, will be dynamic most of the time according to your needs. Here's an example of how to create a list of links:

\n
const pids = ['id1', 'id2', 'id3']\n{\n  pids.map(pid => (\n    <Link href=\"/post/[pid]\" as={`/post/${pid}`}>\n      <a>Post {pid}</a>\n    </Link>\n  ))\n}\n
\n

If the child is a custom component that wraps an <a> tag\n \n \n \n \n

\n

If the child of Link is a custom component that wraps an <a> tag, you must add passHref to Link. This is necessary if you’re using libraries like styled-components. Without this, the <a> tag will not have the href attribute, which might hurt your site’s SEO.

\n
import Link from 'next/link'\nimport styled from 'styled-components'\n\n// This creates a custom component that wraps an <a> tag\nconst RedLink = styled.a`\n  color: red;\n`\n\nfunction NavLink({ href, name }) {\n  // Must add passHref to Link\n  return (\n    <Link href={href} passHref>\n      <RedLink>{name}</RedLink>\n    </Link>\n  )\n}\n\nexport default NavLink\n
\n
\n

Note: If you’re using emotion’s JSX pragma feature (@jsx jsx), you must use passHref even if you use an <a> tag directly.

\n
\n

If the child is a function component\n \n \n \n \n

\n

If the child of Link is a function component, in addition to using passHref, you must wrap the component in React.forwardRef:

\n
import Link from 'next/link'\n\n// `onClick`, `href`, and `ref` need to be passed to the DOM element\n// for proper handling\nconst MyButton = React.forwardRef(({ onClick, href }, ref) => {\n  return (\n    <a href={href} onClick={onClick} ref={ref}>\n      Click Me\n    </a>\n  )\n})\n\nfunction Home() {\n  return (\n    <Link href=\"/about\" passHref>\n      <MyButton />\n    </Link>\n  )\n}\n\nexport default Home\n
\n

With URL Object\n \n \n \n \n

\n

Link can also receive an URL object and it will automatically format it to create the URL string. Here's how to do it:

\n
import Link from 'next/link'\n\nfunction Home() {\n  return (\n    <div>\n      <Link href={{ pathname: '/about', query: { name: 'test' } }}>\n        <a>About us</a>\n      </Link>\n    </div>\n  )\n}\n\nexport default Home\n
\n

The above example will be a link to /about?name=test. You can use every property as defined in the Node.js URL module documentation.

\n

Replace the URL instead of push\n \n \n \n \n

\n

The default behavior of the Link component is to push a new URL into the history stack. You can use the replace prop to prevent adding a new entry, as in the following example:

\n
<Link href=\"/about\" replace>\n  <a>About us</a>\n</Link>\n
\n

Using a component that supports onClick\n \n \n \n \n

\n

Link supports any component that supports the onClick event, in the case you don't provide an <a> tag, consider the following example:

\n
<Link href=\"/about\">\n  <img src=\"/static/image.png\" alt=\"image\" />\n</Link>\n
\n

The child of Link is <img> instead of <a>. Link will send the onClick property to <img> but won't pass the href property.

\n

Disable scrolling to the top of the page\n \n \n \n \n

\n

The default behavior of Link is to scroll to the top of the page. When there is a hash defined it will scroll to the specific id, like a normal <a> tag. To prevent scrolling to the top / hash scroll={false} can be added to Link:

\n
<Link href=\"/?counter=10\" scroll={false}>\n  <a>Disables scrolling to the top</a>\n</Link>\n
"},"__N_SSG":true}