Twitter API Question posted in
The official Twitter API documentation can be found here.

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

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 Router 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:

Pathname renders filename, not words typed in URL

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

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
  }
    Login or Signup to reply.
  4. 0

    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
    Login or Signup to reply.
  5. 0

    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>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search