https://github.com/akellbl4/enchanted-next-router
🧙♂️ Polished API for Next.js Router
https://github.com/akellbl4/enchanted-next-router
next next-router nextjs router
Last synced: about 1 year ago
JSON representation
🧙♂️ Polished API for Next.js Router
- Host: GitHub
- URL: https://github.com/akellbl4/enchanted-next-router
- Owner: akellbl4
- License: mit
- Created: 2021-06-16T21:26:07.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T14:48:16.000Z (over 3 years ago)
- Last Synced: 2025-04-10T06:17:01.901Z (about 1 year ago)
- Topics: next, next-router, nextjs, router
- Language: TypeScript
- Homepage: https://npmjs.com/enchanted-next-router
- Size: 982 KB
- Stars: 15
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧙♂️ Enchanted Next.js Router • [](https://bundlephobia.com/package/enchanted-next-router) [](https://coveralls.io/github/akellbl4/enchanted-next-router?branch=main)
It re-exports the whole `next/router` with redefined routing functions and extended params.
## Install
With Yarn
```
yarn add enchanted-next-router
```
With npm
```
npm install enchanted-next-router
```
## API
### Functions
#### `push/replace(url, opts)`
`push` and `replace` are redefined. _The redefined fuctions haven't second argument `as` because it's became unnecessary since 10.x_
- `url: string` - The URL to navigate to
- `options` - Optional object with the following configuration options:
- `scroll: boolean` (optional) - controls scrolling to the top of the page after navigation. `true` by default.
- `shallow: boolean` - Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. `false` by default.
- `locale: string` - Optional string, indicates locale of the new page.
#### Example
```js
import Router from 'enchanted-next-router'
export default function MyComponent() {
const { pathname } = useRouter()
function handleClick() {
// your logic
Router.replace({ pathname, query: { id: '123' } }, { shallow: true })
}
return (
<>
>
)
}
```
### `const enchantedCtx = enchanteServerRouter(ctx)`
Clean query object from url dynamic params
- `params` - now params is always exist even if it is empty _params_ will be empty object `{}`
- `query` - clean up query from values from `params`
- `fullQuery` - keeps original object with all of the query params
#### Example
```js
// route: /foo/[fizz]/[buzz]
// url: /foo/bar/boom?id=5431
import { enchanteServerRouter } from 'enchanted-next-router'
function getServerSideProps(c) {
const ctx = enchanteServerRouter(c)
const {
params, // { fizz: 'bar', buzz: 'boom' }
query, // { id: '5431' }
fullQuery // { id: '5431', fizz: 'bar', buzz: 'boom' }
} = ctx
return {
props: {
params,
query,
fullQuery,
},
}
}
```
### Properties
`const { query, params, pathname } = useRouter()`
- `pathname` - Represents current pathname in the URL.
- `params` - Contains params from dynamic params of the URL.
- `query` - Contains only params from query string.
- `fullQuery` - Contains original `query` value before changes.
#### Example
```js
// route: /foo/[fizz]/[buzz]
// url: /foo/bar/boom?id=5431
export default function BuzzPage() {
const {
params, // { fizz: 'bar', buzz: 'boom' }
query, // { id: '5431' }
fullQuery // { id: '5431', fizz: 'bar', buzz: 'boom' }
} = useRouter()
return (
Params
JSON.stringify(params)
Query
JSON.stringify(query)
Full Query
JSON.stringify(fullQuery)
)
}
```
## References
- [Next.js Router Documentation](https://nextjs.org/docs/api-reference/next/router)
- [An Overview on the Current State of Next.js Router](https://pavel.mineev.me/blog/nextjs-router-tips-and-tricks)
## Creds
I 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.