Next.js Discord

Discord Forum

How to make layout.tsx dynamic?

Answered
Polish posted this in #help-forum
Open in Discord
PolishOP
I'm using a layout.tsx for my app so that the skeleton layout is consistent. But in it, I have differnet links: /dashboard, /settings, etc.

I want the page that the user is on to have the corresponding item in layout.tsx highlighted.

Code (layout.tsx uses this MainNav component):

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {

  return (
    <nav
      className={cn("flex items-center space-x-4 lg:space-x-6", className)}
      {...props}
    >
      <Link
        href="/"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary"
        )}
      >
        Dashboard
      </Link>
      <Link
        href="/settings"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary"
        )}
      >
        Settings
      </Link>
   
    
    </nav>
  );
}


How do I figure out which page the user is currently on and highlight the corresponding item in MainNav?
Answered by Ray
layout.tsx doesn't re-render on route change.
I think all you need is to turn MainNav to client component and use usePathname() hook to get the current path
'use client'
import { usePathname } from 'next/navigation'

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname()
  return (
    <nav
      className={cn("flex items-center space-x-4 lg:space-x-6", className)}
      {...props}
    >
      <Link
        href="/"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary", pathname === '/' && 'bg-red-500'
        )}
      >
        Dashboard
      </Link>
      <Link
        href="/settings"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary", pathname === '/settings' && 'bg-red-500'
        )}
      >
        Settings
      </Link>
   
    
    </nav>
  );
}
View full answer

2 Replies

@Polish I'm using a layout.tsx for my app so that the skeleton layout is consistent. But in it, I have differnet links: /dashboard, /settings, etc. I want the page that the user is on to have the corresponding item in layout.tsx highlighted. Code (layout.tsx uses this MainNav component): typescript export function MainNav({ className, ...props }: React.HTMLAttributes<HTMLElement>) { return ( <nav className={cn("flex items-center space-x-4 lg:space-x-6", className)} {...props} > <Link href="/" className={cn( "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary" )} > Dashboard </Link> <Link href="/settings" className={cn( "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary" )} > Settings </Link> </nav> ); } How do I figure out which page the user is currently on and highlight the corresponding item in MainNav?
Ray
layout.tsx doesn't re-render on route change.
I think all you need is to turn MainNav to client component and use usePathname() hook to get the current path
'use client'
import { usePathname } from 'next/navigation'

export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname()
  return (
    <nav
      className={cn("flex items-center space-x-4 lg:space-x-6", className)}
      {...props}
    >
      <Link
        href="/"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary", pathname === '/' && 'bg-red-500'
        )}
      >
        Dashboard
      </Link>
      <Link
        href="/settings"
        className={cn(
          "text-sm font-medium transition-colors text-primary text-muted-foreground hover:text-primary", pathname === '/settings' && 'bg-red-500'
        )}
      >
        Settings
      </Link>
   
    
    </nav>
  );
}
Answer
PolishOP
You continue to solidify your legendary status @Ray . Thank you!