Links Based on Routes in Next JS | Mastering Next JS | Next JS Tutorials
Summary
This video explains how to create active and inactive links in Next.js based on the current route. The speaker demonstrates how to achieve this by using a custom function that dynamically adds CSS classes based on the URL path.
Highlights
💻 Dynamically change link styles based on URL route: By leveraging the `usePathname` hook, the speaker dynamically determines the current URL path and applies the corresponding class to the links.
🎨 Creating active and inactive CSS classes: The speaker demonstrates how to define distinct CSS classes for active and inactive links, ensuring clear visual distinction.
🧭 Accessing URL information: The `usePathname` hook provides a way to easily retrieve the URL path without including the domain name.
💡 Client-side component implementation: The speaker highlights the importance of using the `use client` directive to enable the use of Next.js's client-side hooks, including `usePathname`.
🔗 Applying styles through class names: The speaker illustrates how to use the `className` attribute to apply dynamic styles to links, effectively managing their appearance based on the URL.
Github link:
https://github.com/saikorthivada/next...
Telegram Link
https://t.me/techshareskk
Instagram
/ tech.share.skk
Playlist links
Angular Project
• User & Notes Management | Angular Project
Angular Tutorials Zero to Hero
• Angular Tutorials
Angular Unit Testing
• Angular Unit Testing
For Angular Reactive forms
• Angular Reactive forms
For Javascript Objects Series
• Javascript Objects
For Concepts of JavaScript
• Concepts of JavaScript
For Projects and POC
• Innovative Projects & Proof of Concepts
#webdevelopment #html #css #javascript