A must-have VSCode feature for Next.js developers

[@vladislavnovoselov3699]

Nice feauture, thanks for sharing
can you help me to make that work for dynamic folders too
If I have " app/landlords/[id]/{layout,page}.tsx " then the label output is [id] page
I tried to make dirname(2) - so it takes landlords folder name - but it conflicts with folders that doesnt have dynamic routing

[@nikolovlazar]

I got you! So VS Code uses a special glob syntax that doesn't work exactly like regex. I managed to make it work for both cases when there's a dynamic segment and not.
You'd need to add multiple patterns to match the different cases, depending on the position of the dynamic segment in the path. Let's say the dynamic segment is the direct parent of the file. You'd need two patterns - one for the regular files, and one for the dynamic one:
// Regular - prefixed with src/app so it doesn't affect files outside of the app dir
src/app/**/{layout,page}.tsx - ${dirname} ${filename}
// Dynamic - the dynamic segment is the direct parent
src/app/**/[[]*[]]/{layout,page}.tsx - ${dirname(1)}${dirname} ${filename}
Play around with this and see what value works for you. This dynamic pattern will produce this: "landlords[id] page".
I hope this helps you.

[@magiczz420]

I knew immediately what this would be about and it's actually really useful. I used to click the file to see in the file explorer where it was located to know what was in it. This will save me so much time. Great video!

[@nikolovlazar]

Yes! This is one of those "simple but delightful" features that improve the QoL. I'm glad you found it useful.

[@0xtz_]

thats sooooooo cool man thanks

[@nikolovlazar]

Glad you liked it!

[@blaizeW]

woah. thats brilliant, thank you!!!

[@nikolovlazar]

Glad you like it!

[@blaizeW]

@@nikolovlazar btw, what’s the theme and icons you use?

[@nikolovlazar]

@@blaizeW Here's my setup:
- Color Theme: marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme
- Icon Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.moxer-icons
- Font: Dank Mono

[@blaizeW]

@@nikolovlazar Tysm.

[@quantumrim3805]

thank you, it helped me a lot

[@LukasSmith827]

this video has saved my life, so much better than messing with custom css

[@nikolovlazar]

Easy peasy! 😁

[@eclipse-224]

Amazing tip, thanks a lot!

[@adrian34234]

thanks and appreciate it!

[@ViktorStevanovic-qf2dm]

Great! Can i ask you what theme are you using? Love the setup!

[@nikolovlazar]

Thanks Viktor! Here's my setup:
- Color Theme: marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme
- Icon Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.moxer-icons
- Font: Dank Mono

[@harshalkudale4877]

Finally. I am now free of frustration. Thanks.

[@nikolovlazar]

Glad I could help!

[@NikolaiLehbrink-tj4di]

That's a cool tip, thank you!

[@nikolovlazar]

Glad you found it useful, Nikolai!

[@DjokoB]

Ok this was helpfull, thanks 👌

[@nikolovlazar]

Glad to hear that man! Long time no talk.

[@ryostyles9904]

Cooool

[@bleakCode]

Noice!

[@thaian3272]

noice!

[@TalkMalk]

good

[@sivaganesh4489]

Are you able to use partytown with nextJS 13 approuter ?

[@nikolovlazar]

Haven’t worked with Partytown so far, but I’ll let you know. What’s the problem with partytown and app router?

[@sivaganesh7727]

Nextjs script worker strategy is not supported in partytown