Next.js 14 Tutorial - 20 - Active Links 

Don't use "use client" in layout , all pages inside this layout will be client rendered , its better to create client component contain all your links ,then use pathname inside it ,and let the layout derver rendered

using use client in layout is not recommended

When we give href='/' to the home page, it automatically becomes an active link, how can we prevent this? const navLinks = [ { name: 'Home', href: '/' }, { name: 'About', href: '/about' }, { name: 'Contact', href: '/contact' }, ]

03:10 If you guys will use startsWith and there will be a home page in your with path '/' Than it will set home and other page active at the same time. To avoide this use endsWith instead of startsWith.

i learnt react around 2019 from this channel. now i'm a software architect, what a journey!!

There is nothing wrong with using pathname === link.href instead of Isactive right?

Props to this guy man. Seriously! So easy to understand! Keep up the good work mate! Subbed, Liked and about to recommend this great of a content to everybody looking to learn NextJS.

the startwith approach has some bug for example the home href starts with / and the other href starts with for example /login then at the same time the home link and the login link have the same style

can you talk about how to get the benefits of server side components while still being able to mark the path being visited as active? if we mark the whole layout as "use client" it comes with its drawbacks as layout is a perfect page which can benefit from server side rendering and caching

the most underrated and absolutely godly NEXTJS course on YT ....

You said that all React Components are by default Server Components , but its wrong you have to say all Next Components are by default Server Component

Wouldn't making layout.tsx client component degrade performance?

This solution not work for home , when we have '/' not work and home page always have active style

My rootLayout is also showing here, what should i do for that?

can you please make a video on how to handle responsive images without the height and width set to an specific size??? , i just hate how nextjs handles them , i prefer simple html and "object-fijt"

why does it say module not found can someone explain please?

So in nextjs you need to check manually using pathname. In react router dom I think you don't have to check manually.

I was not intended to subscribe any English channel because I love understand in hindi. But this English channel gives 1 deep understanding of concepts, 2 clear view of code because of good default zoom level for mobiles, 3 when I see it in 360p quality it shows clear, 4 also clear voice, 5 much available tutorials for node concepts with deep logic in this channel 6 to the point lessons, 7 covers each topic, 8 organized in playlist 9 so it makes focus on learning, I watched all playlist videos before it. 10 Now I like it 😁 So this qualities forced me to Subscribe this channel ❤❤😅😅

import Link from "next/link"; const navLinks = [ { name: "Register", href: "/register" }, { name: "Login", href: "/login" }, { name: "Forgot Password", href: "/forgot-password" }, ]; export default function AuthLayout({ children, }: { children: React.ReactNode; }) { return ( {navLinks.map((link) => { return ( {link.name} ); })} {children} ); }

When will this series complete ? How many videos have you planned ?

That means one should avoid using "/" for home route, since the "isActive" logic will always mark it as active

hi, if you're working on an app with a multiple groupe pages such as dasboard section, an admin section and a public section, and so to get access to dashboard pages, you have to navigate to /dashboard, and so the links for the dashboard all starts /dashboard/.... then how would you do ?

I had issues with my map method, didn't show the data even if it show there was something blank there, then I used the way you did it and worked!!, thank you a lot my friend, I hope one day I can post videos like you to help people from my lenguage.

I know there are many people who have thanked you for the work you do on RU-vid but I also want to thank you for so many tutorials like this, they are very helpful to the community.

It is not working for nested route like /about/me etc. paths

thanks bro. your explication is another level .keep going like that bro

This guy teaches so well. Give him his flowers, no diddy!

nice tutorial,its eazy and simple explanation

Thanks for the tuts. Always so helpful.

The important thing with the usepathname is that, it doesn't detect/recognise the hash links.

Your style of asking like/subscribe only in the end is very polite! I like it that very much... Thank you for your educatinal efforts.

GoodJob!

thank you very much! I searched the whole Internet in search of a good solution and found it on your channel

really is was nice sir

Good job mate.

Thanks!🎉

Great Video 👍

goat

Great one