# enchanted-next-router

> ✨ Polished API for Next.js Router

Latest version **0.0.6-beta.22** (published 2021-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install enchanted-next-router
pnpm add enchanted-next-router
yarn add enchanted-next-router
bun add enchanted-next-router
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6-beta.22 |
| Published | 2021-11-30 |
| First published | 2021-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Pavel Mineev |
| Maintainers | akellbl4 |
| Keywords | next, nextjs, router, next/router, next-router, router, enchanced-router, enhanced-router |

## Links

- npm: https://www.npmjs.com/package/enchanted-next-router
- Repository: git@github.com:akellbl4/enchanted-next-router
- npm.io page: https://npm.io/package/enchanted-next-router

## Recent versions

- 0.0.6-beta.22 (latest) — 2021-11-30
- 0.0.6-beta.2 (beta) — 2021-07-15
- 0.0.6-beta.21 — 2021-11-30
- 0.0.6-beta.20 — 2021-11-30
- 0.0.6-beta.19 — 2021-11-29
- 0.0.6-beta.18 — 2021-11-29
- 0.0.6-beta.17 — 2021-11-29
- 0.0.6-beta.16 — 2021-10-21
- 0.0.6-beta.15 — 2021-10-21
- 0.0.6-beta.14 — 2021-10-21
- 0.0.6-beta.13 — 2021-10-21
- 0.0.6-beta.11 — 2021-10-21
- 0.0.6-beta.12 — 2021-10-14
- 0.0.6-beta.10 — 2021-10-14
- 0.0.6-beta.9 — 2021-09-17
- … 12 more at https://npm.io/package/enchanted-next-router/versions

## README

# 🧙‍♂️ Enchanted Next.js Router • [![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)

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 (
    <>
      <button onClick={handleClick}></button>
    </>
  )
}
```

### `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 (
    <article>
      <h4>Params</h4>
      <code><pre>JSON.stringify(params)</pre></code>
      <h4>Query</h4>
      <code><pre>JSON.stringify(query)</pre></code>
      <h4>Full Query</h4>
      <code><pre>JSON.stringify(fullQuery)</pre></code>
    </article>
  )
}
```

## 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.

---
_Source: https://npm.io/package/enchanted-next-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._