LogoفارسیFA

Organizing Routes and Files in Next.js – Private Folders, Route Groups, and Project Structure

Next.js offers powerful features for organizing routes and files. In this article, we explore private folders for isolating internal logic, route groups for organizing without affecting URLs, and various strategies for structuring your project. These techniques improve clarity, scalability, and flexibility in modern React applications.

private foldersroute groupsproject structureNext.js routing

~2 min read • Updated Oct 25, 2025

Private Folders in Next.js


You can create private folders by prefixing the folder name with an underscore (_). These folders and their subfolders are excluded from the routing system and treated as internal implementation details:


app/blog/_components/Post.tsx  
app/blog/_lib/data.ts

Although Next.js allows colocating files safely inside the app directory by default, private folders offer added benefits:


  • Separating UI logic from routing logic
  • Organizing internal files consistently across the project
  • Improving file navigation in code editors
  • Avoiding naming conflicts with future Next.js conventions

Route Groups


To organize routes without affecting the URL, wrap folder names in parentheses. These folders are ignored in the final URL path:


app/(marketing)/page.tsx → /  
app/(shop)/cart/page.tsx → /cart

Route groups are useful for:


  • Organizing routes by section, intent, or team
  • Creating multiple nested layouts at the same segment level
  • Applying layouts to a subset of routes

Using the src Folder


Next.js supports placing your application code (including app) inside an optional src folder. This helps separate app logic from configuration files:


src/app/page.tsx  
src/components/Button.tsx

Project Structure Strategies


Here are a few common strategies for organizing your project:


  • Store files outside app: Keep routing in app and shared logic in root-level folders
  • Store files inside app: Place shared folders like components or lib inside app
  • Split by feature or route: Keep global logic in root and colocate route-specific logic inside route segments

Examples of Grouping and Layouts


  • Group routes without changing the URL: Use folders like (marketing) or (shop)
  • Create multiple root layouts: Remove the top-level layout.tsx and add one inside each route group
  • Apply a layout to specific routes only: Move related routes (e.g., account, cart) into a shared group
  • Apply a loading skeleton to a specific route: Place loading.tsx inside a route group like (overview)

Conclusion


By using private folders, route groups, and flexible structure strategies, you can build well-organized, scalable, and maintainable Next.js applications. These patterns help separate routing, UI, and internal logic while improving developer experience and project clarity.


Written & researched by Dr. Shahin Siami

Next Article