NextJS 13 folder structure best practice – Reactjs

The Problem:

In NextJS 13 with App Router, what is the best folder structure for organizing pages, components, and routing? How should pages like login and register be organized, and how can related components be grouped effectively?

The Solutions:

Solution 1: NextJS 13 Folder Structure Best Practices

To effectively organize your NextJS 13 project, follow these best practices:

• Colocate all files and folders within the `/app` directory: Unlike the traditional `/pages` directory, `/app` supports colocation, making it the new primary source directory.
• Create Private Folders using an underscore prefix: Prefix non-route folders with an underscore (e.g., `_components`, `_libs`) to indicate they should be excluded from the routing system.
• Utilize Route Groups (parentheses): Group related route folders together by enclosing them in parentheses (e.g., `(routes)`). This prevents them from being included in the URL path.

By adhering to these principles, you can maintain a well-organized project structure with clear separation between routes and non-route components.

Solution 2: NextJS 13 Folder Structure Best Practices

NextJS 13 recommends organizing your project in a hierarchical folder structure. Here are some guidelines:

1. Separate Pages from Components:
Place all page components within the `app` directory. This helps clarify which routes exist in the application. For example:

app/
  - index.tsx
  - about.tsx

2. Group Shared Components:
Organize related components in the `components` directory. Create subfolders for logical groupings, such as `providers`, `ui`, and `shared`.

3. Use Parentheses for Shared Layouts:
If routes share a common layout, use parentheses in the `app` directory. This creates a nested folder structure:

app/
  - (auth)
    - login.tsx
    - signup.tsx

This indicates that both the `login` and `signup` pages share the same layout within the `auth` folder.

Solution 3: Follow App Directory Folder Structure

In Next.js 13, the introduction of the App Router and React Server Components has changed the recommended folder structure. To align with best practices, consider the following:

• App Directory: Place components in the /app directory for rendering on the server side. This includes components for specific pages and custom components.

• Organization: Group components according to their functionality. For instance, create a /dashboard subfolder within /app for dashboard-related components.

• Example Structure:

  /app
     /components
     /dashboard
       customComponent.tsx
       page.tsx
     layout.tsx
     page.tsx
  

By following this structure, you can effectively manage your components, render them on the server side, and maintain a consistent and organized file system. Refer to the Next.js documentation on File Conventions for further guidance.

Solution 4: Best Practices for NextJS 13 Folder Structure

To maintain a well-organized and scalable project structure in NextJS 13, adhere to these best practices:

• Default Routing: Create a folder for each page within the App directory (e.g., App/about/page.jsx for the about page accessible via URL/about).
• Custom Routing: To implement custom routing, add rewrite rules in next-config.js (e.g., rewrites: [{ source: ‘/old-route’, destination: ‘/new-route’ }]).
• Folder Structure: Create the following folders within the App directory:
• Pages: Store page-specific components (e.g., App/products/page.jsx).
• Admin: Store components for the admin UI (e.g., App/admin/page.tsx).
• Components: Store reusable components and create subfolders for organization (e.g., Layout, Auth, Admin, PageName).
• Utils: Store APIs and utility functions.
• Content Organization: For complex projects, consider creating separate folders for specific content types (e.g., App/products/components, App/products/apis).

Video Explanation: