Next.js Discord

Discord Forum

App Router Internationalization

Answered
Red-necked Phalarope posted this in #help-forum
Open in Discord
Red-necked PhalaropeOP
Hi guys! I'm finishing the migration from the Pages Router to the App Router in my app and I had to make a few changes involving the logic for checking the pathname all around the code.

I'm using the new usePathname hook, which is useful but I noticed that the output it returns is different than the previous const { pathname } = useRouter().

I'm using next-intl with prefix-based routing, which means that my pages are my-app.com/en/dashboard or my-app.com/es/dashboard and this is what is giving me a hard time when I want to check for the pathname in the code, because the current usePathname seems to be unable to acknowledge that /es is not just another random route but the locale value.

Any ideas on how to check the pathname using some hook from Next or what may be wrong in my setup? Thanks!
Answered by not-milo.tsx
With the new app router that specific use case is achieved with the useSelectedLayoutSegment hook provided by next/navigation.

There's an example of this in the docs here: https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment#creating-an-active-link-component
View full answer

6 Replies

not-milo.tsx
We need a bit more information to be able to help you. Can you show some of your code, specifically the part that's giving you a hard time. And also what are you trying to do exactly?
Red-necked PhalaropeOP
Sure. I have this Sidebar component that is checking which link is active by using that isActive function that expects an href string (for example /dashboard) and it should return either true or false.

The problem I have with this new usePathname is that when my site is using the 'es' locale, usePathname returns /es/dashboard and the condition is always false.

Even though is easy to solve this with a conditional approach, I'm looking for a solid solution.
Note that this didn't happen when I was getting the pathname from useRouter before the migration

 const pathname = usePathname();

 const isActive = (href: string) => pathname === href;

  return (
    <SidebarContainer>
      <Link href={DASHBOARD_URL}>
        <ButtonLink
          isActive={isActive(DASHBOARD_URL)}
          svgIcon={<DashboardSvg />}
          buttonText={t('dashboard')}
        />
      </Link>
      <Link href={TIME_OFF_URL}>
        <ButtonLink
          isActive={isActive(TIME_OFF_URL)}
          svgIcon={<CalendarSvg />}
          buttonText={t('timeOffLink')}
        />
      </Link>

      <Link href={TEAM_URL}>
        <ButtonLink
          svgIcon={<HomeSvg />}
          buttonText={t('teamLink')}
          isActive={isActive(TEAM_URL)}
        />
      </Link>
    </SidebarContainer>
not-milo.tsx
With the new app router that specific use case is achieved with the useSelectedLayoutSegment hook provided by next/navigation.

There's an example of this in the docs here: https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment#creating-an-active-link-component
Answer
not-milo.tsx
In your case useSelectedLayoutSegment will return only the last segment in the URL. So /en/about returns about and you can use that to check which is the active link.

If you need more than just the last segment there's also the [useSelectedLayoutSegments hook](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments).
Red-necked PhalaropeOP
Thank you very much Milo! It works as I expected!
@Red-necked Phalarope Thank you very much Milo! It works as I expected!
Param san
@Red-necked Phalarope Another small suggestion would be to use use slice function.