{"id":17280298,"url":"https://github.com/akellbl4/enchanted-next-router","last_synced_at":"2025-04-14T09:41:01.786Z","repository":{"id":38046590,"uuid":"377631685","full_name":"akellbl4/enchanted-next-router","owner":"akellbl4","description":"🧙‍♂️ Polished API for Next.js Router","archived":false,"fork":false,"pushed_at":"2023-01-05T14:48:16.000Z","size":1006,"stargazers_count":15,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-10T06:17:01.901Z","etag":null,"topics":["next","next-router","nextjs","router"],"latest_commit_sha":null,"homepage":"https://npmjs.com/enchanted-next-router","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/akellbl4.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-06-16T21:26:07.000Z","updated_at":"2024-08-12T19:09:27.000Z","dependencies_parsed_at":"2023-02-04T06:32:05.504Z","dependency_job_id":null,"html_url":"https://github.com/akellbl4/enchanted-next-router","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akellbl4%2Fenchanted-next-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akellbl4%2Fenchanted-next-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akellbl4%2Fenchanted-next-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akellbl4%2Fenchanted-next-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akellbl4","download_url":"https://codeload.github.com/akellbl4/enchanted-next-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248855692,"owners_count":21172627,"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":["next","next-router","nextjs","router"],"created_at":"2024-10-15T09:19:57.711Z","updated_at":"2025-04-14T09:41:01.761Z","avatar_url":"https://github.com/akellbl4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧙‍♂️ Enchanted Next.js Router \u0026bullet; [![minzipped size](https://badgen.net/bundlephobia/minzip/enchanted-next-router)](https://bundlephobia.com/package/enchanted-next-router) [![Coverage Status](https://coveralls.io/repos/github/akellbl4/enchanted-next-router/badge.svg?branch=main)](https://coveralls.io/github/akellbl4/enchanted-next-router?branch=main)\n\nIt re-exports the whole `next/router` with redefined routing functions and extended params.\n\n## Install\n\nWith Yarn\n\n```\nyarn add enchanted-next-router\n```\n\nWith npm\n\n```\nnpm install enchanted-next-router\n```\n\n\n## API\n\n### Functions\n\n#### `push/replace(url, opts)`\n\n`push` and `replace` are redefined. _The redefined fuctions haven't second argument `as` because it's became unnecessary since 10.x_\n\n- `url: string` - The URL to navigate to\n- `options` - Optional object with the following configuration options:\n  - `scroll: boolean` (optional) - controls scrolling to the top of the page after navigation. `true` by default.\n  - `shallow: boolean` - Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. `false` by default.\n  - `locale: string` - Optional string, indicates locale of the new page.\n\n#### Example\n\n```js\nimport Router from 'enchanted-next-router'\n\nexport default function MyComponent() {\n  const { pathname } = useRouter()\n\n  function handleClick() {\n    // your logic\n    Router.replace({ pathname, query: { id: '123' } }, { shallow: true })\n  }\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={handleClick}\u003e\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### `const enchantedCtx = enchanteServerRouter(ctx)`\n\nClean query object from url dynamic params\n\n- `params` - now params is always exist even if it is empty _params_ will be empty object `{}`\n- `query` - clean up query from values from `params`\n- `fullQuery` - keeps original object with all of the query params\n\n#### Example\n\n```js\n// route: /foo/[fizz]/[buzz]\n//   url: /foo/bar/boom?id=5431\nimport { enchanteServerRouter } from 'enchanted-next-router'\n\nfunction getServerSideProps(c) {\n  const ctx = enchanteServerRouter(c)\n  const {\n    params,    // { fizz: 'bar', buzz: 'boom' }\n    query,     // { id: '5431' }\n    fullQuery  // { id: '5431', fizz: 'bar', buzz: 'boom' }\n  } = ctx\n\n  return {\n    props: {\n      params,\n      query,\n      fullQuery,\n    },\n  }\n}\n```\n\n### Properties\n\n`const { query, params, pathname } = useRouter()`\n\n- `pathname` - Represents current pathname in the URL.\n- `params` - Contains params from dynamic params of the URL.\n- `query` - Contains only params from query string.\n- `fullQuery` - Contains original `query` value before changes.\n\n#### Example\n\n```js\n// route: /foo/[fizz]/[buzz]\n//   url: /foo/bar/boom?id=5431\n\nexport default function BuzzPage() {\n  const {\n    params,    // { fizz: 'bar', buzz: 'boom' }\n    query,     // { id: '5431' }\n    fullQuery  // { id: '5431', fizz: 'bar', buzz: 'boom' }\n  } = useRouter()\n  \n  return (\n    \u003carticle\u003e\n      \u003ch4\u003eParams\u003c/h4\u003e\n      \u003ccode\u003e\u003cpre\u003eJSON.stringify(params)\u003c/pre\u003e\u003c/code\u003e\n      \u003ch4\u003eQuery\u003c/h4\u003e\n      \u003ccode\u003e\u003cpre\u003eJSON.stringify(query)\u003c/pre\u003e\u003c/code\u003e\n      \u003ch4\u003eFull Query\u003c/h4\u003e\n      \u003ccode\u003e\u003cpre\u003eJSON.stringify(fullQuery)\u003c/pre\u003e\u003c/code\u003e\n    \u003c/article\u003e\n  )\n}\n```\n\n## References\n\n- [Next.js Router Documentation](https://nextjs.org/docs/api-reference/next/router)\n- [An Overview on the Current State of Next.js Router](https://pavel.mineev.me/blog/nextjs-router-tips-and-tricks)\n\n## Creds\n\nI want to say thanks to the Next.js team and Vercel. I appreciate their work and the things that they've done. I like using Next.js in my projects but I want to make some parts of it a bit better. As a result, I decided to share my handy enhancement on Next.js Router.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakellbl4%2Fenchanted-next-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakellbl4%2Fenchanted-next-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakellbl4%2Fenchanted-next-router/lists"}