'Correct' Development use, Folder Structure in T3 Tech Stack App
Dear community,
I've used the Interactive CLI to start a full-stack, typesafe Next.js app. I got a couple questions regarding the 'correct' development use/folder structure for this.
Question #1
Do I use the
components folder only for components like a button & card, or also for file – e.g. a navbar & footer?
Question #2
I am reading Routing > Pages and Layouts to understand how, this structuring works. In my use-case I would prefer to have a static navbar & footer in layout.tsx, so they won't re-render every time, right, as I am understanding?
Source: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts
Please let me know, if you need any more information.
I would love to receive sources e.g. doc's or tutorials to study, if you have any to share, of course. 🙂
Thank you so much!
Best regards.Routing: Pages and Layouts | Next.js
Create your first page and shared layout with the App Router.
2 Replies
Let's start with Question #2: You are indeed correct. Any code that needs to be shared across multiple pages should be added to the
layout.tsx file. This includes elements like the navbar, footer, drawers, etc.
Regarding Question #1, it's a bit more complex, particularly with the introduction of server components. Previously, the components folder was reserved for reusable code, and you wouldn't typically create new components for elements used only once, like a navbar or footer. However, with server components, if you need to include a client component within a server component, you must refactor the client code into a separate file as a separate component. This approach deviates from the original React principle of components being reusable code. There's no definitive answer here, but currently, I handle components in the following manner:
- Truly reusable components are placed in /components/ui/ (inspired by shadcn).
- Other components, created due to the client component architecture, are stored in /components/[path for which this was created]/. For example, /components/login/LoginButton.tsx.
I have also worked on some repos that use components folder only for the reusable code, and all the client components for a particular path goes to the /app/[path for which this was created]/_components/. For example, /app/login/_components/LoginButton.tsx
There is no decisive answer here, it all depends on your preference.https://nextjs.org/learn I will highly recommend you to follow along with this free learning course by Next.js team. It will help you better understand all app router related concepts and workflows.
Learn Next.js | Next.js by Vercel - The React Framework
Next.js by Vercel is the full-stack React framework for the web.