WDD 430: Web Full-Stack Development

Route Groups

Overview

Route groups are a powerful organizational tool in Next.js that allow you to group related routes together without affecting the URL structure of your application. This can help keep your project organized as it grows in complexity.

Prepare

In Next.js, you can create a route group by prefixing a folder name with parentheses. For example, if you have a folder named (admin), any routes defined within that folder will be grouped together under the "admin" namespace, but the URLs will not include "admin" in the path.

For instance, if you have a file structure like this:

app/
  (admin)/    
    dashboard/
      page.tsx
    settings/
      page.tsx
  page.tsx

In this example, the routes for the dashboard and settings pages will be accessible at /dashboard and /settings, respectively, even though they are organized within the (admin) route group.

Route groups are especially useful for organizing related pages, such as admin interfaces, user profiles, or any other logical grouping of routes that you want to keep separate in your file structure without affecting the URL paths.

In the context of your portfolio project, you might use route groups to organize different sections of your site, such as a group for project-related pages or a group for user account management, while keeping the URLs clean and intuitive.

For example, you could have a route group for your project pages like this:

app/
  (projects)/
    opensource/
      page.tsx
    school/
      page.tsx
  page.tsx

In this case, the project pages would be accessible at /opensource and /school, while still being organized within the (projects) route group in your file structure.

Loading Skeleton Bug

In the Streaming learning activity, the skeleton will apply to all the pages since the loading.tsx file is a level higher than the projects/ pages and about/ pages, and so on., and the skeleton layout is applied to all these pages. This bug or unintended UI behavior can be changed by using Route Groups.

Create a new folder (projects) to organize your project pages. Then move the loading.tsx file into this folder along with the specific page.tsx.

app/
  (projects)/
    opensource/
      page.tsx
      loading.tsx
    school/
      page.tsx
      loading.tsx
  page.tsx 

With this structure, the loading skeleton defined in loading.tsx will only apply to the specific project pages within the (projects) route group, and not to other pages like the home page or about page.

By using route groups, you can maintain a clean and organized file structure while ensuring that your loading skeletons and other components are applied only to the relevant pages in your portfolio project.