Styling active links in next.js is tricker than you think

Published: 22 February 2024
on channel: Colby Fayock

3,499

130

How to style active links in Next.js App Router using the current page's pathname.

We'll walk through seeing how we can get the current page's path on the server by using Next.js middleware and setting a custom header, why that's probably not what you want to do in the first place, and how we can embed a client component in the page's server rendered layout to avoid opting an entire tree into client components.

🧰 Resources

Tutorial: https://spacejelly.dev/posts/how-to-s...
Code: https://github.com/colbyfayock/my-sid...
Demo: https://my-sidebar-links.vercel.app/w...

📺 YouTube: https://youtube.com/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: https://www.colbyfayock.com/newsletter/

🎥 What I Use: https://www.colbyfayock.com/uses

#colbyfayock #nextjs #webdevelopment

Watch video Styling active links in next.js is tricker than you think online, duration hours minute second in high quality that is uploaded to the channel Colby Fayock 22 February 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 3,499 times and liked it 130 visitors.

3,605

128