# next-router-component

> Component-based routing with `Next.js`.

Latest version **0.1.2** (published 2021-10-08) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-10-08 |
| First published | 2021-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DuGlaser |
| Maintainers | duglaser |
| Keywords | next.js, react, node, router, routes, routing |

## Links

- npm: https://www.npmjs.com/package/next-router-component
- npm.io page: https://npm.io/package/next-router-component

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.1.2 (latest) — 2021-10-08
- 0.1.1 — 2021-10-08

## README

# next-router-component

Component-based routing with `Next.js`.

## Install

```bash
npm install next-router-component
```

## Example

```tsx
const Sample = () => {
  return (
    <div>
      {/* The following two are just different ways of writing */}
      <Route<{ id: string | string[] }>
        path={'/catch-all/[id]'}
        render={({ id }) => <h1>This page is {`/catch-all/${id}`}</h1>}
      />
      <Route<{ id: string | string[] }> path={'/catch-all/[id]'}>
        {({ id }) => <h1>This page is {`/catch-all/${id}`}</h1>}
      </Route>
    </div>
  );
};
```

## LICENSE

[MIT](https://github.com/DuGlaser/next-router-component/blob/master/LICENSE)

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