Next.js Discord

Discord Forum

What’s the best folder structure?

Answered
Scarlet Tanager posted this in #help-forum
Open in Discord
Scarlet TanagerOP
I’m using atomic design pattern for my project for each route I created _components, _hooks etc. What you guys recommend?
Answered by gin
export default async function Page() {
  return (
    <>
      <Box
        sx={{
          display: "flex",
          mb: 1,
          gap: 1,
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Stack>
          <Typography level="h2" component="h1">
            Evidence
          </Typography>
        </Stack>
        <Stack>
          <Chip
            startDecorator={
              <AllInclusive
                sx={{
                  fontSize: "1.5rem",
                }}
              />
            }
          >
            <Typography level="h4">Beta</Typography>
          </Chip>
        </Stack>
      </Box>

      <Evidence />
    </>
  );
}
View full answer

58 Replies

Rough harvester ant
I usually do a component folder in the root, api calls and other stuff that I re-use too.
@Scarlet Tanager I’m using atomic design pattern for my project for each route I created _components, _hooks etc. What you guys recommend?
B33fb0n3
There is no direct structure. I personally like this design: (see attached).

In it, I have of course my pages.
* actions.ts: all server actions for these "pages". If I have a server action only for new I would create a actions.ts inside new
* fetcher.ts: only functions to fetch stuff specific for "pages". No server actions
* layout.tsx and page.tsx are clear, I guess
* validations.ts: All schema validations (for me zod) within this route "pages"
Scarlet TanagerOP
this is current structure I'm using
Scarlet TanagerOP
I don't know which is best to create components folder for each route or create a component folder outside app folder and there to add components for eacb route
If i have a large component that also needs some serverside fetching i have a wrapper of it in the root
example: Evidence
and then i have my components specifically for that inside the /evidence folder
Scarlet TanagerOP
Does your components folder live on src?
Scarlet TanagerOP
For example in application folder inside components what do you store hooks, styles utils about that component?
@Scarlet Tanager For example in application folder inside components what do you store hooks, styles utils about that component?
gin
i usually utilise the most of the fetching part inside my controllers folder ->
export async function getMyIssuedBans(
  type: "finished" | "needed",
  limit = 10
): Promise<BanProfileExtend[] | []> {
  const myProfile = await getGeneralPlayer((await getLinkToken()) || "", "");
}

something like this
then in my main wrapper component that is always serverside i fetch my data
Scarlet TanagerOP
Alright, thank you ✌️
@Scarlet Tanager Alright, thank you ✌️
gin
u also had the question how i structure my styling right?
I usually utilize css modules
they also work perfectly with serverside components
Scarlet TanagerOP
You are using modules css, I’m currently using tailwind
Scarlet TanagerOP
So I should never store components on app folder
have everything outside of app folder
only use the app folder for routing
im not even fetching data in app folder
everything is in the components
Scarlet TanagerOP
this is current components for "/" route how would you strucure them in your way?
except ur pages
Scarlet TanagerOP
in components folder I store shadcn components and svg
@Scarlet Tanager in components folder I store shadcn components and svg
gin
u can have the shadcn stored in the ui folder inside components
but i would move all ur other stuff also in components
u have for example RegistrationStart.tsx and then in ur folder registrationStart/Button, Form usw
Scarlet TanagerOP
is okay to do like this src/components/RegistrationStart/all components that are in _components inside App
gin
like this->
src/components/RegistrationStart.tsx
src/components/registrationStart/Footer
src/components/registrationStart/Header
Scarlet TanagerOP
So all things to import into RegistrationStart and then use it in Page file?
then in ur page file u just do ->
<RegistrationStart/>
and that will act as a wrapper
gin
export default async function Page() {
  return (
    <>
      <Box
        sx={{
          display: "flex",
          mb: 1,
          gap: 1,
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Stack>
          <Typography level="h2" component="h1">
            Evidence
          </Typography>
        </Stack>
        <Stack>
          <Chip
            startDecorator={
              <AllInclusive
                sx={{
                  fontSize: "1.5rem",
                }}
              />
            }
          >
            <Typography level="h4">Beta</Typography>
          </Chip>
        </Stack>
      </Box>

      <Evidence />
    </>
  );
}
Answer
gin
this is my Page file
only some minor layout
and my main wrapper
Evidence
this is how i do it
everyone is different
yk
for me it makes things much easier and better to read
Scarlet TanagerOP
Thank you so much, got your structure if anything that I didn't get I can write you in dm 🙂
gin
np, make sure to set my answer as solution if it helped u
:okayge:
Scarlet TanagerOP
Thank you