NextJS: dynamic router.pathname does not show path, but filename - how to get words in path?

Question

I'm making this as simple of an example as possible, I can include more code later if it needs more info to be resolved

I'm using dynamic routes in nextJS. My app pulls results from twitter based on the keywords entered into the dynamic route via API using twitter-v2 package

I'm trying to use the words in the route using router.pathname in order to create some attributes on the page, but it uses the filename instead of the words in the url.

NextJS version: Next 9.5.3

Render page path: /pages/[keywords].jsx

Example url:

http://localhost:3000/kpop-heroes

example page function:

import { useRouter } from 'next/router'

export default function Keywords() {
  const router = useRouter();

  const KEYWORDS = router.pathname
    .slice(1)
    .split('-')
    .join(' ');

  return (
   <div>Twitter reactions to <code>{KEYWORDS}</code></div>
  )
};

Renders:

Am I misunderstanding this feature? Is it possible to retrieve the words in the url instead of the filename?

Note: I've been using window.location.href as a workaround, but my understanding is accessing the window object is less than optimal

Christal

Answer 1

Use the asPath property. It returns the path shown in the browser (including the query).

https://nextjs.org/docs/api-reference/next/router#router-object

const router = useRouter();

router.asPath

Tame

This should be the accepted answer, router.asPath will resolve all the dynamic parts of the url – Merciless

In my case I was using router.asPath in a useEffect and it wouldn't resolve the dynamic parts, so I had to add router.isReady in the dependency array and check for it in the useEffect callback. – Piton

Answer 2

To get correct URL for both cases e.g. dynamic ([slug]) and fixed path:

const router = useRouter();

let relativeURL = "";

  const slug = router.query.slug;
  if (slug) {
    relativeURL = router.pathname.replace("[slug]", slug as string);
  } else {
    relativeURL = router.pathname;
  }

Downey

Answer 3

I was just using the wrong method - the correct method is router.query.

Consider the following url:

http://localhost:3000/test-keywords?query=params,%20strings,%20other%20things&anotherLevel=more%20stuff

log the object produced by the method:

  const router = useRouter();
  console.log(router.query);

output:

  {
    anotherLevel: "more stuff"
    keywords: "test-keywords"
    query: "params, strings, other things"
  }

I must've glossed over it, it's clearly in the docs right here: https://nextjs.org/docs/routing/dynamic-routes

Thought I'd leave this up in case someone else confused about it, too

Christal

Answer 4

I think the right way is define the dynamic-routes under a specific path (ex. /twitter).

Render page path:

/pages/twitter/[keywords].jsx

Example url:

http://localhost:3000/twitter/kpop-heroes

It is unreasonable to define the dynamic-route at the first level of the url.

Kaka

I've been using the first level just fine (?). I don't think it matters if it's in a subdir. Under 'caveats' nextjs.org/docs/routing/dynamic-routes says: Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. I personally just have index.jsx in the pages dir, and anything else defaults to [keywords].jsx – Christal

Answer 5

This worked for me

import { useRouter } from "next/router";

...

const router = useRouter();
const path = router.asPath.split("?")[0]; // (remove query string and use asPath since dynamic slug was rendering as "[slug]" using pathname)

...

 const navigationList = (
    <MenuList>
      {links.map((item) => {    
        return (
          <MenuItem
            key={item.id}
            disabled={path == item.href}
            sx={{
              m: 0,
              p: 0,
              ...(path == item.href && {
                borderBottom: `1px solid ${theme.palette.primary.light}`,
                backgroundColor: theme.palette.primary.dark,
              }),
            }}
          >
            <StyledLink href={item.href}>{item.label}</StyledLink>
          </MenuItem>
        );
      })}
    </MenuList>
  );

Hydrometeor