Next.js 14 Tutorial - 20 - Active Links

📘 Frontend Interview Course - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support Paypal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
Next.js 14
Next.js Tutorial
Next.js 14 Tutorial
Next.js Tutorial for Beginners
Active Links
Styling Active Links

[@darkxhornet2440]

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

[@animatedzombie64]

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

[@panjiprawiro1603]

hy can you explain more what is software architect do? are you still develop website using react in your job?

[@gamingwolf3385]

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

[@C9Sid]

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.

[@oladelejoseph2892]

Thanks so much

[@ken2ker495]

thank you , i meet this problem but don't know how to solve it , thank you bro

[@kimiafarshadnia]

That’s right 🎉

[@LucasFarias-kk6kt]

thank you man!

[@pratishjoshi]

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.

[@yanferaraque1051]

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.

[@yuriyula]

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

[@asfnobambu]

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.

[@makobakaweme2821]

Thanks for the tuts. Always so helpful.

[@SidsAnalysis]

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 ❤❤😅😅

[@JoshuaMusau]

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

[@user-ke8er3yc1s]

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

[@Kelvin_Falah]

nice tutorial,its eazy and simple explanation

[@HadiAriakia]

Good job mate.

[@ahmadullahnikzad2850]

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

[@riyad-appscode]

Great Video 👍

[@MrSandeeparneja]

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

[@faizanahmed9304]

Thanks!🎉

[@CKNMEDIA]

Great one

[@AnoNymous-el6mr]

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 ?

[@kalilinux8682]

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

[@sujonpramanik1151]

really is was nice sir

[@ainmosni4319]

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

[@therodri595]

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"

[@codetechygoon]

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

[@mghendipato]

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

[@codeozz]

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' },
]

[@IsraelWongMX]

I also have that doubt, were you able to solve it yet?

[@BeardedSmellyFox]

const isActive = pathname.startsWith(link.href) && pathname.length == link.href.length;

[@killua8762]

@@BeardedSmellyFox This won't work for nested links.

[@chesterxp508]

GoodJob!

[@ahmedmrsawy9215]

using use client in layout is not recommended

[@esr9749]

Why it is not recommended?

[@user-ww4gz7wx4t]

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

[@jsiqueiraest]

goat

[@marckentevalle7535]

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

[@divyarajsinhrana6045]

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

[@bitslayerscorpion8776]

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

[@theboyIncomfortzone]

I wanna know it too

[@kimiafarshadnia]

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