Next.js Discord

Discord Forum

Curious how you guys structure ur folders?

Answered
Gharial posted this in #help-forum
Open in Discord
GharialOP
I usually do it like this:
src/
├── app/               # Routing & Layouts
│   ├── api/           # Route Handlers
│   ├── (auth)   
│   ├── (marketing)         
│   └── (protected)           
├── components/             
│   ├── ui/            # Buttons, Inputs
│   └── sections/      # Feature components
├── lib/                    
│   ├── actions/       # Server Actions ("use server")
│   ├── data/          # DAL (import 'server-only')
│   │   ├── projects.ts
│   │   └── reviews.ts
│   ├── graphql/
│   ├── any-other-lib/
│   └── utils.ts            
├── types/
├── constants/
├── hooks/
│   ├── use-scroll-position.ts
│   └── use-mobile.ts
├── styles/
│   ├── global.css
│   └── animations.css               
└── proxy.ts                # Middleware
Answered by Alligator mississippiensis
I spent a lot of time thinking about this as I designed out an AI friendly project structure that would be intuitive both for AI models and also for humans. This is opinionated, but through many iterations testing with AI agents and junior programmers, a good structure I settled with was:

use a src folder. It keeps project code separated from configs, scripts, and other misc files.

Always use route (groups) because you never know when you might need a page with a different layout than your (default). You want to avoid refactoring in the future.
https://nextjs.org/docs/app/api-reference/file-conventions/route-groups

Store all content in private folders like _blocks inside the route folders so all content for pages are inside each route. This is really helpful organization for AI for both reading content and editing content. All blocks should be server components for best SEO.
https://nextjs.org/docs/app/getting-started/project-structure#private-folders

Store all design and functionality in components, saved inside the src folder. Avoid saving content inside a component. It should be purely functional and reusable. Content can be defined in a block, and then passed to a component. Components here can be either server or client, depending on what it does.

You can see an example of one of my project structures here:
https://github.com/gallop-software/speedwell
View full answer

7 Replies

RxvxntxN
Not bad , there are many way to structure folders but as long as it is working , no need to worries.
Alligator mississippiensis
I spent a lot of time thinking about this as I designed out an AI friendly project structure that would be intuitive both for AI models and also for humans. This is opinionated, but through many iterations testing with AI agents and junior programmers, a good structure I settled with was:

use a src folder. It keeps project code separated from configs, scripts, and other misc files.

Always use route (groups) because you never know when you might need a page with a different layout than your (default). You want to avoid refactoring in the future.
https://nextjs.org/docs/app/api-reference/file-conventions/route-groups

Store all content in private folders like _blocks inside the route folders so all content for pages are inside each route. This is really helpful organization for AI for both reading content and editing content. All blocks should be server components for best SEO.
https://nextjs.org/docs/app/getting-started/project-structure#private-folders

Store all design and functionality in components, saved inside the src folder. Avoid saving content inside a component. It should be purely functional and reusable. Content can be defined in a block, and then passed to a component. Components here can be either server or client, depending on what it does.

You can see an example of one of my project structures here:
https://github.com/gallop-software/speedwell
Answer
Alligator mississippiensis
GharialOP
Thanks, but i am confused about structuring the project while using supabase. Do i need DAL here?

Right now i have something like (followed this https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs):

src/
├── app/               
│   ├── api/           
│   ├── (auth)   
│   ├── (marketing)         
│   └── (protected)           
├── components/     
├── lib/                    
│   ├── supabase/         
│   │   ├── client.ts   # Client Component client
│   │   ├── proxy.ts  # Refreshing Auth token & passing to browser/server comp.        
│   │   └── server.ts   # Server Component client
│   └── utils.ts            
├── types/
├── constants/
├── hooks/
├── styles/           
└── proxy.ts            # Middleware


And both my Supabase URL and Publishable key are NEXT_PUBLIC_.

And rn I am calling it direclty in client comp like:

"use client";
...
import { supabase } from "@/lib/supabase/client";
...

export default function OrdersManager() {
...
  async function loadOrders() {
    setLoading(true);
    let query = supabase
      .from("orders")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(100);
    if (statusFilter !== "all") query = query.eq("status", statusFilter);
    const { data } = await query;
    setOrders(data || []);
    setLoading(false);
  }

return (
  ...
   <button
     onClick={loadOrders}
     className="flex items-center gap-1.5 text-xs text-brand-muted hover:text-brand-cream">
         <RefreshCw size={13} /> Refresh
   </button>
  ...
)}
GharialOP
+ should I use prisma in this case?
@Gharial + should I use prisma in this case?
Anay-208
I haven't used Supabase, so I can't really say, but I personally I wouldn't recommend prisma becoz queries take longer to execute in prisma then in other ORMs like drizzle
@Gharial + should I use prisma in this case?
Nile tilapia
do u need dev?