Why put menu links inside settings custom page? How can I style the active link?

Developing with Prismic
1

Hello, community,
I have a settings page, who contains links for the menu bar.
In my <Navigation />, I pulled down the links by using async...await function, and ` is a server side component :

Navigation.tsx

import { createClient } from "@/prismicio";
import { PrismicNextLink } from "@prismicio/next";

type NavigationProps = {
  className?:string;
}
export default async function Navigation({className}:NavigationProps){
  const client = createClient();
  const settings = await client.getSingle('settings'); 
  const segment = useSelectedLayoutSegment();
  const navigation = settings.data.navigation.map(
    ({link, label})=>(
        <li key={label} className="group">
                <PrismicNextLink field={link} 
                className={className}>
                  {label}
                </PrismicNextLink>
            </li>
    )
  )
  return (
       <>{navigation}</>
  )
}

This is a menu bar with 4 links (without sub menus). I want to style the active link basing on it's url using `

'use client' 
import { usePathname } from "next/navigation";

export default async function Navigation({className}:NavigationProps, {href}:{href:string}){
  const currentPath = usePathname();`
...
return ...
// it the currentPath === 'item1' => set the link active
}

But this will turn <Navigation /> into a client comp and isn't compatible with the async...await . I'm wandering, does it make sense putting the links of menu inside the settings and fetch it into the app ? Isn't it more simple to use <Link> of next.js and explicitly define the href ?

settingspage
settingspage1890×1304 153 KB

nextjs #activeLink

2

Hey @elegant-type,

You can use the Next.js <Link> component and define the links explicitly, but I don't recommend it, as it will make it harder to update your website later.

I would recommend creating a <NavLink> component with "use client" and usePathname(), and then import that component to your Navigation.tsx component. Does that make sense?

Sam