Vercel’s Post

Vercel reposted this

View profile for Lee Robinson, graphic

VP of Product at Vercel

Next.js Tip: Active state for navigation links When you change routes, update the background color of a navbar item by looking at the current URL. Server components 🤝 client components.

Rudolf Kovalov

Senior Software Engineer 10+ years | Frontend | Typescript | React | Fullstack | Web3

1mo

the main challenge arises when we encounter deeper nested routing

Filipe Braga

Software Developer | 2x AWS certified | Node | .NET | Solutions Architect

1mo

Interesting! Do you have projects examples?

Sleman Safiah

Senior Full-Stack Software Engineer @ Sotheby's DIR | expertise in JavaScript , Typescript , ReactJs , NextJs and NodeJs

1mo

Or we can have everything as a server component except the navitem itself as a Client component with same logic I found it easier than having client component within server component within server component and so on

Like
Reply
Onur Çağan

Software Engineer II @ TicketNetwork

1mo

Yep this is a classic usecase for this hook. However my eyes bled when I saw those copy pasted NavItems and Packages, wish you mapped those 😄 It must’ve been some unpolished boilerplate I’m guessing.

Bilal Shahid

React Js | Next Js Developer

1mo

This is really disappointing to see such a big framework not having a built in way to check for an active route. And this is so messed up when you want to match some deep route.

Like
Reply
Rafin Rahman

Software Engineer | Next.js | React | JavaScript • Turn ideas into a great software 🚀

1mo

Faced quite a bit of challenges moving out from Next.js 12, but as you dive into Next.js 14 you will discover lots of new handy tools 🛠️

Abed Al Ghani Shaaban

Full Stack Developer at Poyesis with expertise in software development

1mo

Really insightful 💡 video to learn from regarding active routes in a layout.

Like
Reply
Chukwu Smart

Software Developer • Electronics Engineering Major

1mo

Yeah, my classic use case - setting a nav state based on pathName. For deep rooted routes, conditionals with ".startwith()" JS function came in handy.

Like
Reply
Bakare Habeeb

Student at UNIVERSITY OF LAGOS

1mo

Very helpful!

Like
Reply
See more comments

To view or add a comment, sign in

Explore topics