Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Key Concepts

• Folder Structure: Organization of files and directories within a Next.js project.
• Scalability: The ability of a website to handle increasing amounts of traffic and data.
• Beginner, Intermediate, Advanced Structures: Three different approaches to organizing a Next.js project, each suited for different project sizes and team sizes.
• Route Groups: Using parentheses in folder names within the app directory to group related routes for organizational purposes.
• Server Actions: Functions that run on the server and can be called from client components.
• Entities, Features, Processes, Widgets: Key components of an advanced folder structure, each representing a different aspect of the application.
• Testing: Different types of testing, including unit testing, integration testing, and end-to-end testing.

Beginner Folder Structure

• Recommendation: Suitable for beginners or small projects where the primary goal is to ship fast.
• Structure:
  • app folder: Contains all routes, each in its own folder with page.tsx (or .jsx) files. Route groups (folders in parentheses) can be used for organization.
  • components folder: A general folder for all client components, regardless of their specific use case.
  • lib folder: Contains helper functions, database connection information, fetchers, and utility functions.
  • api folder: Contains API routes for handling server-side logic.
  • middleware.ts: Handles middleware logic.
• Pros:
  • Easy to learn and build.
  • Minimal folder structure.
  • Familiar to most developers due to common tutorials.
• Cons:
  • Becomes messy as features grow.
  • Difficult to test due to lack of isolation.
  • Components folder can become cluttered with many files.
• Example: The event card component is placed in the general components folder, even though it's only used in the events list.

Intermediate Folder Structure

• Recommendation: Suitable for growing apps with more pages and a team of 2-6 people.
• Structure:
  • app folder: Routes are organized into route groups (e.g., (auth), (dashboard), (marketing)) for better structure.
  • server folder: Contains all database and business logic, organized by service type (e.g., auth, db).
    • Includes folders for database interactions (using an ORM like Prisma), server state management (e.g., React Query), and backend services (e.g., Stripe).
  • features folder: Contains user-facing and user-interacted pieces of UI, each in its own folder.
    • Each feature folder contains UI components, server actions, and hooks related to that specific feature.
  • lib folder: Similar to the beginner structure, but may contain more specific helper functions.
  • ui folder: Contains generic, reusable UI components like buttons and empty states.
  • test folder: Contains tests for the application.
• Pros:
  • More organized than the beginner structure.
  • Clearer boundaries between client and server code.
  • Testable due to abstracted logic.
  • Scalable to real products.
• Cons:
  • More folders and conventions to learn.
  • Risk of duplication if boundaries are not carefully established.
• Example: The RSVP feature has its own folder within the features directory, containing the UI for RSVPing and the associated server actions.

Advanced Folder Structure

• Recommendation: Only recommended for large products with large teams and complex integrations.
• Structure:
  • app folder: Contains only the routes, similar to the other structures.
  • entities folder: Contains the raw data and rules of the application, including TypeScript types and interfaces.
  • features folder: Contains small abilities that glue UI with data, often through server actions.
  • processes folder: Contains background jobs and scheduled tasks, such as sending emails or cleaning data.
  • widgets folder: Contains reusable UI blocks that can be copied and dropped into different screens.
  • test folder: Contains different types of testing, including unit testing, integration testing, and end-to-end testing.
• Pros:
  • Highly scalable.
  • Good for team ownership, as different teams can own different parts of the project.
  • Strong boundaries for easier testing.
  • Performance patterns built-in.
• Cons:
  • Steep learning curve.
  • A lot of abstraction and boilerplate.
  • Overkill for most apps.
• Example: The recommendation feed on YouTube is described as a widget, a reusable block of UI that can be placed on different pages.

Savala Sponsorship

• Savala is an all-in-one cloud platform for deploying applications.
• It offers unlimited collaborators, unlimited parallel builds, and no restrictive tiers.
• It runs on Google Kubernetes Engine in 25 regions.
• It includes managed databases, object storage, instant preview apps, and advanced pipelines.
• It uses usage-based pricing.
• It is backed by Kinsta, providing enterprise-grade security and developer support.
• A link in the description provides $50 in free credit.

Conclusion

The video presents three different folder structures for Next.js applications, ranging from beginner to advanced. The beginner structure is suitable for small projects and beginners, while the intermediate structure is suitable for growing apps with a small team. The advanced structure is only recommended for large products with large teams and complex integrations. The video emphasizes that there is no one-size-fits-all solution and that developers should choose the structure that best suits their needs. The speaker advises against immediately changing all projects to match the presented folder structures, suggesting that it's better to start with a simpler structure and refactor later if necessary.