next-router-segments
v1.0.4
Published
Parsing Next.js pathname to structured segments, which you can use in various ways.
Downloads
28
Maintainers
Readme
Next router segments
About package
I've made this package for parsing Next.js pathname
to structured segments, which you can use in various ways, for
example for creating breadcrumbs for current page.
Installation
PNPM
pnpm add next-router-segments
NPM
npm i next-router-segments
YARN
yarn add next-router-segments
Usage
Next.js (App Router)
"use client";
import usePathname from "next/navigation";
import { getRouteSegments } from 'next-router-segments';
export default function Page() {
const {pathname} = usePathname();
const segments = getRouteSegments(pathname)
return (
<pre>
{JSON.stringify(segments, null, 2)}
</pre>
)
}
Info: pathname is only available in client, so usage for client component and client pages is exacly same.
Next.js (Pages Router)
import useRouter from "next/router";
import { getRouteSegments } from 'next-router-segments';
export default function Page() {
const {pathname} = useRouter();
const segments = getRouteSegments(pathname)
return (
<pre>
{JSON.stringify(segments, null, 2)}
</pre>
)
}