{"id":16738073,"url":"https://github.com/dc7290/next-router-prefetch","last_synced_at":"2025-06-20T06:36:53.457Z","repository":{"id":47710949,"uuid":"346034495","full_name":"dc7290/next-router-prefetch","owner":"dc7290","description":"next-router-prefetch is a custom hook that wraps useRouter.Apply prefetch to links that do not use the Link component.","archived":false,"fork":false,"pushed_at":"2021-08-21T01:52:52.000Z","size":1390,"stargazers_count":3,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T19:53:38.896Z","etag":null,"topics":["nextjs","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dc7290.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-09T14:30:19.000Z","updated_at":"2025-02-26T11:03:18.000Z","dependencies_parsed_at":"2022-08-21T02:31:07.111Z","dependency_job_id":null,"html_url":"https://github.com/dc7290/next-router-prefetch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dc7290/next-router-prefetch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fnext-router-prefetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fnext-router-prefetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fnext-router-prefetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fnext-router-prefetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dc7290","download_url":"https://codeload.github.com/dc7290/next-router-prefetch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dc7290%2Fnext-router-prefetch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260897454,"owners_count":23079220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","react-hooks","typescript"],"created_at":"2024-10-13T00:29:09.666Z","updated_at":"2025-06-20T06:36:48.440Z","avatar_url":"https://github.com/dc7290.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-router-prefetch\n\n[![npm version](https://img.shields.io/npm/v/@dc7290/next-router-prefetch)](https://www.npmjs.com/package/@dc7290/next-router-prefetch) [![license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/cyrilwanner/@dc7290/next-router-prefetch/blob/master/LICENSE) [![downloads](https://img.shields.io/npm/dt/@dc7290/next-router-prefetch)](https://www.npmjs.com/package/@dc7290/next-router-prefetch)\n\n✋ This version uses Next.js 11.\nFor earlier versions, please use this [one](https://www.npmjs.com/package/@dc7290/next-router-prefetch/v/2.2.2).\n\n---\n\n`next-router-prefetch` is a custom hook that wraps useRouter.\u003cbr\u003e\nApply prefetch to links that do not use the Link component.\n\n[日本語](https://github.com/dc7290/next-router-prefetch/blob/main/docs/README-ja.md)\n\n## Features\n\nUsually,\n\n```typescript\nconst router = useRouter();\nrouter.push(\"/about\");\n```\n\nIf you try to transition pages in this way, it will take some time to load before you can transition.\u003cbr\u003e\nIf this is a page transition with the `next/link`(Link) component, it will automatically prefetch the link destination when the link enters the viewport.\u003cbr\u003e（Unless you have set `prefetch={false}`.）\u003cbr\u003e\nHowever, if you use `router.push`, the page will not be moved immediately because automatic prefetch is not performed.\u003cbr\u003e\u003cbr\u003e\nThe solution to this is `next-router-prefetch`!\n\n## Installation\n\n```bash\nyarn add @dc7290/next-router-prefetch@2.2.2 # npm i @dc7290/next-router-prefetch@2.2.2\n```\n\n## Usage\n\n```js\nuseRouterPrefetch(url, observe, nextRouterOptions);\n```\n\nUse the first argument to enter the link destination.\u003cbr\u003e\nThis link can be the same as the one used in `router.push`, so it can be a `UrlObject` as well as a string.\u003cbr\u003e\nThe `UrlObject` received internally is converted to a string so that it can be applied to `router.prefetch`, so there is no need to pass a string for prefetch.\u003cbr\u003e\u003cbr\u003e\nRunning `useRouterPrefetch()` will return `handleRouterPush` and (if observe is `true`) `prefetchTarget`.\u003cbr\u003e\u003cbr\u003e\n`handleRouterPush`, as the name suggests, is a function that transitions to the passed link destination.\u003cbr\u003e\nUse this in the event you want to trigger, or in useEffect, etc.\u003cbr\u003e\u003cbr\u003e\n`prefetchTarget` is a ref object that is supposed to be observed by `IntersectionObserver`.\u003cbr\u003e\nSet this to the ref of the element you want prefetched when it enters the viewport.\n\n#### Example of use in JavaScript\n\n```js\nimport React, { useEffect } from \"react\";\nimport { useRouterPrefetch } from \"@dc7290/next-router-prefetch\";\n\nconst FooComponent = () =\u003e {\n  const { handleRouterPush, prefetchTarget } = useRouterPrefetch(\"/foo\");\n  // You can also give it to them in the following ways\n  // const { handleRouterPush, prefetchTarget } = useRouterPrefetch({\n  //   pathname: \"/posts/[postId]\";\n  //   query: {\n  //       postId: 1;\n  //   };\n  //   hash: \"title\";\n  // });\n\n  return (\n    \u003cdiv ref={prefetchTarget} onClick={handleRouterPush}\u003e\n      Link to 'foo' page.\n    \u003c/div\u003e\n  );\n};\n\n// Use with observe = false\nconst BarComponent = () =\u003e {\n  const { handleRouterPush } = useRouterPrefetch(\"/bar\", false);\n  useEffect(() =\u003e {\n    if (login) {\n      handleRouterPush();\n    }\n  });\n\n  return \u003cdiv\u003eExample login page.\u003c/div\u003e;\n};\n```\n\n#### Example of use in TypeScript\n\n```ts\nimport React, { useEffect } from \"react\";\nimport { useRouterPrefetch } from \"@dc7290/next-router-prefetch\";\n\nconst FooComponent: React.VFC = () =\u003e {\n  const { handleRouterPush, prefetchTarget } =\n    useRouterPrefetch\u003cHTMLDivElement\u003e(\"/foo\");\n  // You can also give it to them in the following ways\n  // const { handleRouterPush, prefetchTarget } = useRouterPrefetch\u003cHTMLDivElement\u003e({\n  //   pathname: \"/posts/[postId]\";\n  //   query: {\n  //       postId: 1;\n  //   };\n  //   hash: \"title\";\n  // });\n\n  return (\n    \u003cdiv ref={prefetchTarget} onClick={handleRouterPush}\u003e\n      Link to 'foo' page.\n    \u003c/div\u003e\n  );\n};\n\n// Use with observe = false\nconst BarComponent: React.VFC = () =\u003e {\n  const { handleRouterPush } = useRouterPrefetch(\"/bar\", false);\n  useEffect(() =\u003e {\n    if (login) {\n      handleRouterPush();\n    }\n  });\n\n  return \u003cdiv\u003eExample login page.\u003c/div\u003e;\n};\n```\n\n## Options\n\n#### url\n\n| value               | description                                                                                         |\n| ------------------- | --------------------------------------------------------------------------------------------------- |\n| string or UrlObject | Specifies the transition destination.\u003cbr\u003eIt takes on the same type as when passed to router.push(). |\n\n#### observe\n\n| value   | description                                                                                                                                                  |\n| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| boolean | Use `IntersectionObserver` to decide whether to prefetch or not.\u003cbr\u003eThe default is true, and if set to `false` it will prefetch immediately after rendering. |\n\n#### nextRouterOptions\n\nThis is the same as the default optins for router.push.\n\n| key                         | value                    | description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| --------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| intersectionObserverOptions | IntersectionObserverInit | Specify the options to be passed to IntersectionObserver when observe is set to true.[reference(MDN)](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters)                                                                                                                                                                                                                                                                               |\n| as                          | string or UrlObject      | Optional decorator for the path that will be shown in the browser URL bar.\u003cbr\u003eBefore Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked.                                                                                                                                                                                                                            |\n| options                     | object                   | Optional object with the following configuration options:\u003cbr\u003escroll: Scroll to the top of the page after a navigation. Defaults to `true`\u003cbr\u003eshallow: Update the path of the current page without rerunning `getStaticProps`, `getServerSideProps` or `getInitialProps`. Defaults to `false`\u003cbr\u003elocale: The active `locale` is automatically prepended. locale allows for providing a different locale. When `false` `href` has to include the locale as the default behavior is disabled. |\n\n## Tips\n\nHere are some useful ways to use it.\n\n#### Linking with pathpida\n\n```typescript\nimport { pagesPath } from \"~/utils/$path\";\n\n// ~~~~ abbreviation\n\nconst { handleRouterPush, prefetchTarget } = useRouterPrefetch\u003cHTMLElement\u003e(\n  pagesPath.posts._postId(props.url).$url()\n);\n\n// ~~~~ abbreviation\n```\n\nIt is also possible to work with [pathpida](https://github.com/aspida/pathpida), a library that makes links type-safe, in this way.\nAnd you don't need to pass `pagesPath.posts._postId(props.url)`. You don't even need to pass `$url().pathname` as a string to make pathpida even more useful!\n\n## Author\n\ndc7290\ndhkh.cba0927@gmail.com\n\n## License\n\n\"next-router-prefetch\" is under [MIT license](https://en.wikipedia.org/wiki/MIT_License).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Fnext-router-prefetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdc7290%2Fnext-router-prefetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdc7290%2Fnext-router-prefetch/lists"}