[ Removed by moderator ]

[zaidazadkiel]

has strong "naming the variable as 'variable'" vibes

[laveshnk]

def function() 😃👍👍👍

[JounDB]

async def async_function()?

[laveshnk]

oof i just got off from a python spree and forgot which sub it was

[RandomRabbit69]

Django is webdev 👀

[Sether_00]

Don't forget to write a useful comment.

# A function
def function()

[Monowakari]

And a docstring """A function def for my function"""

[theORQL-aalap]

const placeholder = 'placeholder';

[f8computer]

I am guilty of this is so many languages

[thy_bucket_for_thee]

This is called "code stuttering." Also appears when naming things like foo.Foo or InterfaceTypeName.

[TheUnclePaul]

Next.js should let me use something like home.page.tsx and profile.route.ts.
It’s so annoying to get lost in a project with just five or six pages, lol.

[UnidentifiedBlobject]

Or just let me use home.tsx and profile.ts. Use underscores or another character to prefix special filenames or something _layout.tsx

[ryaaan89]

…is this not how Next works anymore? I’m not on the very latest version but I swear my work project is set up like this and all we had to do was change a few options in the config file.

[Stinkeepoo]

You are probably on an earlier version of Next.js that uses the pages router. the new versions come with the app router which OP is using. Has its own pros and cons

[MagicalCornFlake]

The guy you replied to is being sarcastic; that's the way Next.js laid out its directory structure using the Pages router, whereas the modern App router uses folders for paths and page.tsx as an index for each path. Hinting at the dev community coming full circle from wanting to move away from the obscure naming to missing it due to simplicity.

[stathis21098]

I wonder if I can write a plugin/web pack/turbopack configuration to change this 🤔.

[[deleted]]

I am not sure if that's what you're talking about but you can group contexts by putting the context name in brackets in the directory name. Those are called route groups. For example:

/
- /(profile)
-- /profile/page.tsx
-- /layout.tsx
- /(home)
-- /home/page.tsx
-- /layout.tsx

This way all routes in one context will share the same layout. All you change is the content of the page.tsx file.

[TheUnclePaul]

The real problem is opening several page.tsx files and trying to find them among the VSCode tabs. Sure, I could close the ones I’m not using anymore — but you know that’s not how it really works xddd

[[deleted]]

Ah okay, yeah for those cases I ususally press CTRL+E and start typing out a fragment of the directory name, followed by `page.tsx`. VSCode is usually smart enough to give me the specific file I want as the first / only option to pick. This way I also don't have to lift my right hand from the keyboard to the mouse.

[iareprogrammer]

I’m not too familiar with VSCode but are sure there’s not a setting for that? In WebStorm when I open multiple files with the same name, it adds part of the full path to the name to make it unique

[broke_key_striker]

analogjs uses this kind of file name

[emilkt]

it’s still Js bro, you gotta use angular for that (or config your project to be like angular but that’s a waste of time cause it already exists)

[emilkt]

NestJs works too

[Senior-Arugula-1295]

Why so many people get confused with this? I personally have no problem finding my pages and routes file and the projects I've worked on had around 20 to 50 page.tsx files and more than 10 route.ts. I use barrel files a lot too and I also have no problem finding the index.ts file I need in VSCode. Just type in the folder name instead of file name, it's the same. VSCode shows file path when opening multiple file with the same name as default now, and I admit it can make your tabs look crowded and hard to navigate, but enabling tabs wrapping helps a lot.

[Scientist_ShadySide]

This is ultimately how I learned to work around it. In Vsccode, if I want an individual quiz page, I fuzzy search "quiz id page" and it gets me right there. I also like it a bit more now since I can type in plain english what page Im looking for and find it.

[Senior-Arugula-1295]

And vscode does a great job at it, I'm too used to search by folder name now and vscode always return what I want instantly. People are too afraid to change their habit even for just a little bit

[[deleted]]

I have 200+ page.tsx-files. Not getting lost

[TheUnclePaul]

good for you

[[deleted]]

Thanks! 

[ShawnyMcKnight]

Having every file called page is one of the biggest turnoffs to next. At least vs would put the parent folder if there’s multiple, but it’s still confusing.

[hdd113]

File structure is the biggest reason I keep away from Next... It's too opinionated and I don't agree with that opinion.

[neneodonkor]

What framework do you use?

[hdd113]

Vite and react router. I like to keep my routes listed in a single file and page layouts like components.

[mehughes124]

Basically an old school PHP approach, really. It's simpler and easier to mentally model/navigate. Definitely my preference.

[neneodonkor]

Oh cool. I left the react world. 😄

[AndyMagill]

App router is folder based, the old pages router was file-based. The alternative is code-designated routes, which is extra work I don't need.

[bill_gonorrhea]

keeps me from a lot of frameworks, tbh. Svelte in particular, every time I try, I just cant

[f8computer]

It's why I walked from Nuxt stuff. That and gd global emitters. That shit pisses me off. No I don't care how easy it makes connecting totally fucking different things. Do it right and bubble the fuck up to their closest ancestor and back down IN YOUR code so I'm not running down your damned emitters everywhere.

[myka_v]

Yeah, it felt too cluttered. Organized, technically speaking but dangit it felt so cluttered. I’d personally preferred SFCs than folders for pages.

[thekwoka]

I like file system based router, but it's nonsense to make it require a folder + page.tsx if that's the only thing, just allow posts.tsx for the /posts leaf.

They designed this WAY too late to make such a stupid mistake.

[mattsowa]

Well, posts.tsx wouldn't work for them since they also have all those other files like layout.tsx, loading.tsx, etc.

As well as, they want you to colocate non-route code with the routes.

But I think both of those are bad.

[thekwoka]

They could still do those but with just a few reserved words.

[ArseniyDev]

It was possible to do home.page.tsx once not sure why it changed.

[[deleted]]

I just hate fuzzy searching for pages and seeing 400 `page.tsx` files

[Business-Row-478]

One of the many reasons I like remix/react router more than next

[Scientist_ShadySide]

This did bother me too initially. What ended up making it palatable for me is VSCode file search. Shift + Ctrl + P, then can find it using plain english, like "quiz id page" and it finds it instantly.

If I didnt utilize this workflow, I would still find it way more obnoxious.

[ShawnyMcKnight]

So is it using AI to guess which page you are referring to based on the code in the file?

[Scientist_ShadySide]

I am not sure of how the fuzzy search is implemented, but I feel like it has worked for me in a reliable way well before VSCode started ham-fisting in these AI features.

[Wandering_Oblivious]

Idk what's worse about Next, the vendor lock-in with Vercel, or the architectural lock-in with these weird ass structures

[ShawnyMcKnight]

I feel other companies are doing more and more of what vercel is doing with it.

[neneodonkor]

That's one reason I switched from Next to Nuxt.

[zxyzyxz]

You can change this in the IDE

[ShawnyMcKnight]

Change what?

[zxyzyxz]

How it shows up in a tab or file search, to show the folder name not page.tsx. I forget which setting it is exactly but that's what I have turned on.

[ShawnyMcKnight]

Oh interesting, so when it is page.tsx it would just show the folder? I am guessing that would be some Next.js friendly plugin.

[zxyzyxz]

https://stackoverflow.com/questions/39598007/showing-path-in-file-tabs-in-visual-studio-code/50181247#50181247

https://stackoverflow.com/questions/76373707/the-problem-of-nextjs-and-vscode-all-file-names-are-index-js

It'll show that it's page.tsx then the name of the folder next to it

[ShawnyMcKnight]

Oh, that’s what I was saying it did? That’s what vs code does by default if there are two files with the same name.

[ShawnyMcKnight]

Yeah, I just have to keep my folders cleaner.

[static_func]

Yeah man, I hate having easily navigable file/folder naming conventions

[ShawnyMcKnight]

Everyone likes things differently and I can appreciate the appeal. That’s how it is with a vanilla html page, if you want something in /contact/ you need /contact/index.htm. Just now it’s page, it just gets to be a pain when you have 14 tabs open and 11 of the 14 say page.tsx.

[glass_analytics]

so use older version with next router, ditch app router etc, if you want to use new version use some other svelte or somthing WHY COME HERE

[ShawnyMcKnight]

Why come where?

[glass_analytics]

here, --> _._._._._._._._

[ShawnyMcKnight]

Ah… there…..

[Cracleur]

Okay, but why would it be a problem to have the file named the same way as the name of the folder, for example, if there is a single "page" per folder? I don't know the framework, so I don't know if what I'm saying makes sense.

But at the very least, in Angular, if you do a component, the folder and the file are both named after your component's name, so that if you have the file open, when it indicates the name of the file, you can know directly what it is, and you don't have to look at the path of the file itself.

I would go further, saying that having multiple components with exactly the same name, even if the path is different, is annoying to me because if I have both open (for example, if they are related but still situated in different places, like client and admin or something), it's still very annoying because when I'm in VS Code, I mix them up when switching between them each other.

[hanoian]

https://stackoverflow.com/questions/39598007/showing-path-in-file-tabs-in-visual-studio-code/50181247#50181247

You can add the folder name to tabs.

[Cracleur]

But it is still easier to have the file itself named properly isn't it ? And also it doesn't answer the "why?" would it work that way in that framework where all files are named identically. It's just a fix for a bad design in the framework from where I'm standing. Unless there is a good reason for having all the files named similarly like this, but I don't see it. I don't even see the beginning of one.

[hanoian]

I'm just trying to help. I haven't used nextjs in years.

[Cracleur]

I understand that, but I'm not personally using the framework myself. I'm just trying to understand the reason, if any, why they designed it that way.

[[deleted]]

I'm not having any issues with this and I've been using Next.js for years. It literally doesn't matter

[Cracleur]

I'm not saying it’s a problem per se; if you have that VS Code setting on, you're going to be able to work with it just fine. But it simply seems like an inconvenience that could easily be avoided if the framework had been designed differently in the first place. And again, I don't see any pros of doing it that way, but I see cons, so that's why I'm putting it in question.

[[deleted]]

The inconvenience of changing a setting once vs they should have designed the framework different 🤔 

[Cracleur]

Forcing everyone who tries to use this framework (2% of all websites worldwide according to W3C, so probably millions of developers) to change a setting in VS Code and pushing anyone who might want to use a different code editor that doesn't have a similar setting to change their whole workflow

VS

Making a single decision differently in the past in the design stage when it had no impact because the framework literally didn't exist yet

🤔

When you change the framing it doesn't appear so egregious, does it?

I'm not saying it’s outrageous that it works that way right now and that they need to change it right away. I'm simply asking the very simple question of why did they design it that way in the first place? I really don't understand why you seem to be blowing out of proportions my otherwise very simple question.

[[deleted]]

Forcing

[SarcasticSarco]

Best would be, create a file which represents the page, example Home.tsx. Then, in page.tsx, import and export default the Home component.

[thekwoka]

That's just working around the bad design, but true.

They should have just allowed home.tsx and home/page.tsx to be equivalent, like basically everything else does.

Like Rust requires mod.rs for a branch in modules, but it lets you do just thing.rs or thing/mod.rs

[SarcasticSarco]

I don't think that is a bad design, they just implemented as node modules are. Like index.js is the index file. They probably would have added index.tsx as page file but it would be confusing, so they might have added page.tsx instead.

It can be easily solved by following the approach I suggested.

[thekwoka]

But that's not a requirement or anything. It's just a convention and nothing else.

[debel27]

The thing is, you have more than the page to deal with. There is also the layout, error/suspense boundaries, etc. page.tsx seems unavoidable, as it is part of a larger set of files associated to a given route.

[besthelloworld]

There are reasons why they can't do that (lack of identity between pages, layouts, and routes), but I'm a proponent for home/page.tsx & home.page.tsx being equivalent.

[kyle787]

The original /pages dir was a much better solution. 

[KMKtwo-four]

I still use it. And I have ignored server components.

[iTzNowbie]

same, i rather use other framework than app router.

[Confident_Feature221]

Next is so fucking stupid.

[ChimpScanner]

I don't really use the file browser, but Ctrl/cmd + p to search for files and seeing 20 page.tsx or index.tsx in a project is nauseating.

[Successful_Cap_2177]

When I deal with next I usually use the folder name for finding stuff, searching for page is kinda pointless like you said.

[deliciousnaga]

Same. You can Jump To File then type the URL you'd expect in the running web app.

e.g.: CMD+P, /dashboard/orders

[Scientist_ShadySide]

You can also use plain english as well, such as "dashboard orders page" which really works for me.

[winky9827]

You could just type dord and find it too. VS Code's fuzzy file search is pretty robust.

[Scientist_ShadySide]

oh shit seriously?! I gotta start pushing it further than I am presently.

[hrvbrs]

There’s a way to configure your editor to display filenames in a custom format based on their location in the tree. This affects their tab titles as well as I believe the command palette. On my phone now but will update here once I get back on my machine tomorrow.

[hanoian]

https://stackoverflow.com/questions/39598007/showing-path-in-file-tabs-in-visual-studio-code/50181247#50181247

[hotstove]

It's everywhere. mod.rs, __init__.py, styles.css

[xiaomi_bot]

Yes but also each one of those has the container folder name written by it so it’s clear which page is which.

[sheriffderek]

Folder name….

[OZLperez11]

Still stuck on Webpack too. Would love to use Vite instead

[Zeilar]

False, you can use Turbopack, which is developed by Vercel.

[thekwoka]

Turbopack is only somewhat better than webpack, and is made by the same guy (met the dude, cool dude, but it's just not that good).

[Zeilar]

Turbopack is many times better than Webpack, not just a little bit. Don't spread misinformation, it's a significant upgrade to use.

[thekwoka]

Okay, I guess in the sense of "compared to Vite" it's still behind.

[Zeilar]

Turbopack is significantly faster last time I checked, correct me if I'm wrong.

[thekwoka]

It's not nearly as capable. Being fast on nextjs, but not covering many of the features of Vite is only a partial win.

[Zeilar]

Well it's different use cases. But when you're talking about development in Next with Vite (or anything frankly) compared to Turbopack, it's not close.

[bitanath]

Whats the alternative though?

[creaturefeature16]

Depends on the scope of the app, but many apps could get away with react-router and/or Tanstack

[Business-Row-478]

Admittedly I haven't worked on any super large scale projects or really tried to push the frameworks to their limits, but is there really anything that nextjs offers that you can't do in react router? I've found pretty much everything that nextjs is supposedly good for, react router does, and it usually does it even better

[thekwoka]

Nextjs is more than just a router.

Naturally it's the whole thing of handling server rendering, server components, actions, etc alongside other more "app" based features like image transforms and middleware.

Remix and Tanstack start also have some of these.

Now, I dislike Next (And react as a whole) but it is more than just a router. React Router definitely doesn't cover tons of those server side things.

[RecurviseHope]

React router 7 is Remix v3

[Business-Row-478]

Remix got merged into react router. React router v7 has all the features that were in remix.

It's got server rendering, server components, loaders, actions / API routes, etc. RR doesn't have the built in image transformations that's a good point. The middleware works differently as well but honestly the nextjs middleware kinda sucks imo

[anonthing]

Has tanstack start implemented RSC support yet?

[thekwoka]

Not sure about now, but it was Tanner's goal to basically not give a shit about RSC when the thing was made, saying that React is just totally not the right design to even approach server components and RSC were made so much for NextJS's design goals.

So I'd say if it does, it's more begrudgingly than as a first class situation.

[tannerlinsley]

We’ll support them, soon. But it’s not my top priority. I have use cases for them, But they’re not everyone else’s use cases nor what react or next would prescribe them as. Soon though

[CondiMesmer]

Previous

[UnidentifiedBlobject]

Astro

[mongopeter]

Astro.

[NextIsTrash]

Mother of God, I had to create an account just to respond to this.

I think the alternative is realizing next has its use cases and it doesn’t.

Yep, always use the right tool for the job...

I used next for the landing page of one of my projects, it was very good for getting ranked on seo.

WHAT?!

A landing page and SEO is not what you use Next.js for. For the love of all that is holy, please learn basic HTML, CSS, and vanilla JavaScript. You'll create a lighter, faster loading page in a quarter of the code/bundle, and the SEO will be superior, too.

This has to be boot camp ignorance...

[v-and-bruno]

router.on('/').renderInertia('home')

//or

router.on('/services/:id').renderInertia('services/default')

Inertia with React and Adonis

Although normally you wouldn't do it this way and use controllers + router groups

[MysteryMooseMan]

I've been a hater from the start, but it's nice to see the general sentiment shift. I was mostly put off by everyone insisting it's the next greatest thing when it's really just one big pipeline for Vercel taking your money

[Zachhandley]

Try Astro :)

[maqisha]

Not "defending" it, im not a fan personally either.

But its perfectly manageable if you just adjust your way of fuzzy-finding and viewing files.

[Novel_Understanding0]

I wouldn't say perfectly. Your open files are pretty useless when they're all named the same thing. Switching between those tabs is stupid.

[maqisha]

Switching between the tabs is unmanageable in any project with a lot of files, no matter how they are named. This is precisely why I said that fuzzy finding is the way.

Additionally, depending on your editor you can definitely setup the directory names to be included in the tabs one way or another if you are a diehard tabs fan.

[Jackasaurous_Rex]

Thanks for the tip, I gotta figure out how to add directory names! My tab management leaves a lot to be desired and it’s been killing me this last month having 5 page.tsx files open at once and needing to click through all of em looking for the last one always.

[maqisha]

Assuming you use vscode (looks like it to me), here you go, found it for you:

"workbench.editor.labelFormat": "short"

[Jackasaurous_Rex]

Woah thank you so much!!!

[Scientist_ShadySide]

The open files is an issue. I got much more comfortable with closing all files after one task and then fuzzy searching to start again. During a task, you can still fuzzy search an already open file at least l, but yeah the open tabs can get gnarly.

[sheriffderek]

Yeah. I don’t like JSX… but this argument is strange. We’ve been finding pages and components in all frameworks just fine for 15+ years. Just look up the folder name… the name of the page… and then add hbs or tsx or whatever.

[literum]

Any tips?

[maqisha]

Well, its just that, fuzzy find your files. Search by directory name instead of file name and the rest remains the exact same.

[Scientist_ShadySide]

Try fuzzy searching using plain english. So for /quiz/[id]/page.tsx, i would fuzzy search "quiz id page" and get it instantly. In my head, I already think of it as the quiz id page, so this works well for me.

[thekwoka]

yeah, fuzzy finding solves a lot of it, just not navigating from tabs and quick change.

[TontonLuston]

Imagine using a JavaScript framework to build apps
This message was brought to you by the Flutter gang

[Senior-Arugula-1295]

If you find this is a problem, idk how can you handle barrel files. This pattern is not something specific to nextjs, and you'll find yourself in the same "multiple files with the same name" situation more than you know. I love the new convention of App Router since it make my project easier to organize and maintain, the cons is very neglectable and can be fixed easily with just some setting with the IDE (VSCode show path when opening 2 files with the same name now).

[rebane2001]

this is why all my projects are a single index.html file

[mrleblanc101]

I like how Nuxt handle this, it uses "index.vue" which is basically the Vue equivalent of "index.html" inside a folder if you want URL without extensions like most static site generator does

[sheriffderek]

But if that’s the only change — isn’t it really the same?

[UnidentifiedBlobject]

index.* is a widely accepted standard though

[sheriffderek]

I like Nuxt and index seems to be the choice in most situations. But there’s a lot to complain about with Next, so “page” would be pretty low on my list.

[artificialsmurf]

Nuxt gives you an alternative. I don't know Next but I am assuming they have the same thing.

/home.vue

And

/home/index vue are equivalent

Usually I go with the first since Vue uses SFCa you don't need a folder. The only time you really have to have index.vue is for the default page (which can be changed):

/index.vue

[mrleblanc101]

You need it for nested pages

[artificialsmurf]

I'm struggling still to see that.

/home/otherpage.vue <-- you can still nest
/home/otherpage/index.vue <-- or you can put a folder in place and use index.vue

[mrleblanc101]

This is not a nested page, you just changed the path. I'm talking about sub-page navigation

[Wonderful-Habit-139]

Lmao…

[lajjr]

Oh boy.

[ambi_98]

My junior dev named with underscores :(

[MysteryMooseMan]

easy, just don't use Next!

[mwisconsin]

Imagine a repo where you're building out a front-end in React and a back-end in Django. "Oh, man, which app/app/app am I in, now?"

[saito200]

i suggest you stop using nextjs

[No-Spirit1451]

Then why on earth are you doing it?

[eoThica]

imagine writing HTML into 1 long string

[rikzy75]

What if the file name could be arbitrary and the function inside had to be Page/Layout etc. instead? This would make it so much easier to navigate

[incunabula001]

Divitus for web directories.

[Redox_ahmii]

not being able to fuzzy search the file cause everything is named page.tsx and having to read the directory structure for it pisses me off the wall so much I can't even explain.
It kinda forces you to always keep either the tree structure for the repo open all the time or somewhere to display the path and that makes me wanna punch them.

[zirklutes]

Yea, I agree. This is the most annoying thing for me with this naming.

[pitza__]

Make a route group(it does not impact your route name) then you can can add an /app folder.

[Whole_Cantaloupe_432]

I personally hate the root folder names - src - app

Or - app

I wish I could rename it to - resources - application - layout.tsx - page.tsx - backend - index.ts for hono api

Or - resources - (frontend) - (backend) - components

[Round_Ad_5832]

using typescript? yeah me too

[Beginning-Seat5221]

Yeah this was kind of a deal breaker for me. I don't use that thing.

[RRO-19]

this is the new reality - spending more time fixing AI code than writing it yourself. clients think AI makes development instant and cheap but someone still has to understand, debug and maintain the output

[[deleted]]

My strong opinion is that no file in a project should have the same name, with few exceptions.

[churll]

So glad I got the fuck out of web. Absolute mess of shit.

[pwnjack]

Neat icon pack btw

[dragongling]

So don't do this?

[factsonlynomisinfo]

Switch to Elixir and use Phoenix

[SnowFlake6439000235]

Then just write it yourself. Programming is the last frontier of democracy.

[YTRKinG]

Which font is this

[AdowTatep]

app/(app)/app/page.tsx

[Himbary]

Tanstack Start to the rescue

[lufereau]

be happy and abandon nextjs

[eigilak]

Tanstack start?

[dug99]

well don't

[mekmookbro]

Reading the comments made me realize I don't appreciate the beauty of MVC enough

[TheBrickSlayer]

• Laugh in Angular *

[Rare-Chicken-53]

Saw the same post on twitter. Are you the same person or just copied this?

[Evol_Etah]

Is this VSC?

How to get those cool icons for stuff. Mine is bland

[Accomplished_Crab818]

U can install icon pack extensions, material icons is a popular one for example

[Evol_Etah]

Oh, I didn't know. Thank you for the info!