Coming From Astro.js, Where Can I Put a Components Folder?
Answered
Blue horntail woodwasp posted this in #help-forum
Blue horntail woodwaspOP
Hey folks! I come from Astro.js, and I'm decently new to Next.js. In Astro.js, I usually create a components folder with my hydratable Astro and/or React components inside there. So inside
I see Next does things a little differently, and I heard that you're not supposed to put individual components in the
Is it a good idea to put my components into a folder at
/src/components. I would have my pages in /src/pages and my layouts in /src/layouts.I see Next does things a little differently, and I heard that you're not supposed to put individual components in the
/src/app folder because apparently they get rendered as separate pages...?! --and thus turn page loading into a snail's pace.Is it a good idea to put my components into a folder at
/src/components similar to Astro, and then import them in my pages? If so, why? If not, why not and what would be a better idea?Answered by Luke
In pages router, yes, essentially any file you put in the /src/pages directory will be treated as a page.
In the app router (/src/app), this is not the case. There are a few reserved filenames like page.tsx, layout.tsx, route.ts within that directory that you should avoid, but besides that you should be totally fine.
Additionally, you can prefix any filename/folder name with an underscore including the aforementioned reserved file names to guarantee it won’t be used.
In the app router (/src/app), this is not the case. There are a few reserved filenames like page.tsx, layout.tsx, route.ts within that directory that you should avoid, but besides that you should be totally fine.
Additionally, you can prefix any filename/folder name with an underscore including the aforementioned reserved file names to guarantee it won’t be used.
38 Replies
In pages router, yes, essentially any file you put in the /src/pages directory will be treated as a page.
In the app router (/src/app), this is not the case. There are a few reserved filenames like page.tsx, layout.tsx, route.ts within that directory that you should avoid, but besides that you should be totally fine.
Additionally, you can prefix any filename/folder name with an underscore including the aforementioned reserved file names to guarantee it won’t be used.
In the app router (/src/app), this is not the case. There are a few reserved filenames like page.tsx, layout.tsx, route.ts within that directory that you should avoid, but besides that you should be totally fine.
Additionally, you can prefix any filename/folder name with an underscore including the aforementioned reserved file names to guarantee it won’t be used.
Answer
As for structure, you can go with whatever works for you. Some projects I’ve helped with have components in the app folder with each route, sort of feature based, others have a large components folder, etc
@Blue horntail woodwasp Hey folks! I come from Astro.js, and I'm decently new to Next.js. In Astro.js, I usually create a components folder with my hydratable Astro and/or React components inside there. So inside `/src/components`. I would have my pages in `/src/pages` and my layouts in `/src/layouts`.
I see Next does things a little differently, and I heard that you're not supposed to put individual components in the `/src/app` folder because apparently they get rendered as separate pages...?! --and thus turn page loading into a snail's pace.
Is it a good idea to put my components into a folder at `/src/components` similar to Astro, and then import them in my pages? If so, why? If not, why not and what would be a better idea?
Is it a good idea to put my components into a folder at /src/components similar to Astro, and then import them in my pages? If so, why? If not, why not and what would be a better idea?
You could do this with no problem, go for whatever folder structure you want as long as you respect the reserved file names (page.tsx, loading.tsx, route.ts, layout.tsx, etc..) and the special folders.
I would recommend you keep your pages and layouts Server Component so it has the full advantage of the server (metadata, data fetching, etc) and import your "hydratable" components ( Client Components ) into your page.tsx. These "hydratable" components as you called them need to be exported from a file with "use client" a the top, make sure you add that directive in order for them to be "hydratable".
Sky is the limit 🫡
Blue horntail woodwaspOP
Wow, you guys pounced on my question FAST. Thanks a bunch!
No problem!
If you’re worried about reserved names, another setup I see is people using _components folders in the app router itself
Cause everything in those folders automatically ignored (because of the underscore)
Inside
/src/app or inside /src?Yea I do that too
I have a components (no underscore needed) folder at the /src/ folder to keep global, non-specific components, such as devtools, ui, icons, etc.
And for every route level, if I need I add a _components to keep components as close as the page they're gonna be rendered on. The _ helps Next.js to avoid including them when mapping your filesystem files and components to routes and so on.
I have a components (no underscore needed) folder at the /src/ folder to keep global, non-specific components, such as devtools, ui, icons, etc.
And for every route level, if I need I add a _components to keep components as close as the page they're gonna be rendered on. The _ helps Next.js to avoid including them when mapping your filesystem files and components to routes and so on.
Blue horntail woodwaspOP
Ooh so there's merit to both approaches. Wow. That's insane. I think I'm gonna continue learning from the Codecademy course for Nextjs as well. Thanks a bunch!
Good luck man! Sky is the limit
@LuisLl Yea I do that too
I have a **components ** (no underscore needed) folder at the /src/ folder to keep global, non-specific components, such as devtools, ui, icons, etc.
And for every route level, if I need I add a **_components** to keep components as close as the page they're gonna be rendered on. The **_** helps Next.js to avoid including them when mapping your filesystem files and components to routes and so on.
Blue horntail woodwaspOP
Sorry, one last question.
The way I understand it,
The way I understand it,
/src/components would have broad stuff such as UI sections of the page with their text and whatnot. What would I keep in /src/app/_components? Tooltips? Dropdowns? (I am also using Floating UI components that I customized)@Blue horntail woodwasp Ooh so there's merit to *both* approaches. Wow. That's insane. I think I'm gonna continue learning from the Codecademy course for Nextjs as well. Thanks a bunch!
Yea you can basically do whatever folder structure you want as long as you respect the reserved file names and special folders.
@Blue horntail woodwasp Sorry, one last question.
The way I understand it, `/src/components` would have broad stuff such as UI sections of the page with their text and whatnot. What would I keep in `/src/app/_components`? Tooltips? Dropdowns? (I am also using Floating UI components that I customized)
I keep the global provider there, let’s say Auth Providers or React Query provider
@LuisLl I keep the global provider there, let’s say Auth Providers or React Query provider
Blue horntail woodwaspOP
Ohhhhhh so stuff like Capcha shenanigans?
@LuisLl I keep the global provider there, let’s say Auth Providers or React Query provider
I also have my footer, my main navigation and mobile navigation components in there. Global app components that aren’t necessarily global in the sense that can be used and imported throughout all your pages like a button or card would be, makes sense?
Blue horntail woodwaspOP
Ohhhhhh so
/src/components would have more or less global components while /src/app/_components would have specific components to specific pages. Interesting.That’s how I use them, it’s not a rule of thumb
Blue horntail woodwaspOP
Sounds good. I'll experiment with both approaches and figure out my niche. I'm currently developing a Next app for Lichess.org and learning Next at the same time. Tysm for reals.
@LuisLl That’s how I use them, it’s not a rule of thumb
Some people keep everything categorized by feature in a global /src/components folder, and that way /app/ folder only has routable components (which are pages and all the other specific files with reserved names)
@LuisLl Some people keep everything categorized by feature in a global /src/components folder, and that way /app/ folder only has *routable* components (which are pages and all the other specific files with reserved names)
Blue horntail woodwaspOP
Yeah this is the approach that resonated the most with me when I first dug around in Next. This makes the most sense to me.
I would suggest you start with the approach you’re most familiar with, at the end it doesn’t matter to Next.js at all.
First get used to the framework specifics, like the reserved files and static/dynamic rendering. How to opt in out out of them, how to cache data, how to use server actions for mutations, etc.
How to fetch data in Server Components and pass down to Client components. That’s way more important than the folder structure you pick, after all you can move files around later and all will work the same.
First get used to the framework specifics, like the reserved files and static/dynamic rendering. How to opt in out out of them, how to cache data, how to use server actions for mutations, etc.
How to fetch data in Server Components and pass down to Client components. That’s way more important than the folder structure you pick, after all you can move files around later and all will work the same.
@Blue horntail woodwasp did you have any more issues?
@LuisLl <@298938485677621280> did you have any more issues?
Blue horntail woodwaspOP
Completely forgot to respond. Yes, how do I link to the components in the
/src/components folders from the /src/app/page.tsx page?Just import them and place them with if your JSX.
@Blue horntail woodwasp Completely forgot to respond. Yes, how do I link to the components in the `/src/components` folders from the `/src/app/page.tsx` page?
If your components exported from
/src/components are using Hooks like react State and Effects (or others), or you’re using browser only features (Window object, document, local storage…) they need to have “use client” at the very top, otherwise you’ll have an error when importing them into your page.tsx@LuisLl Just import them and place them with if your JSX.
Blue horntail woodwaspOP
My bad, didn't phrase it correctly.
In Astro there is a difference between using a relative path and an absolute path. Is that the case with Next?
In Astro there is a difference between using a relative path and an absolute path. Is that the case with Next?
Oh, I see. I think you can use both, but they give you way to use the absolute path easier.
@ is configured by default to reference (root)/src/**
@ is configured by default to reference (root)/src/**
import Footer from "@/app/_components/footer";
import Navbar from "@/app/_components/navbar";
import Providers from "@/app/providers";
import { DynamicScreenDevTools } from "@/components/devtools/screen-devtools";
import { cn } from "@/lib/utils";
import "@/styles/globals.css";You can definitely do “../../../components/**” but it sucks to do that.
So I would even suggest you go to
So I would even suggest you go to
tsconfig.json and add more path resolvers if you want your imports to look cleaner.@Blue horntail woodwasp Mark the solution if the issue is solved
@LuisLl <@298938485677621280> Mark the solution if the issue is solved
Blue horntail woodwaspOP
Okay will do. Thanks!
Blue horntail woodwaspOP
One sec I have very spotty data I'm out of home
@LuisLl <@298938485677621280> Mark the solution if the issue is solved
Blue horntail woodwaspOP
Tags are not showing up
On your phone do this:
hold on the message > Apps > Mark Solution
hold on the message > Apps > Mark Solution
On your computer:
Right click on the message > Apps > Mark Solution
Right click on the message > Apps > Mark Solution