Next.js 13: Using Organizational Folders with the App Router

With the release of Next.js 13, a new feature emerged on the horizon: the App Router. This innovative feature revolutionized the way developers organized and routed files in their projects. This blog post shines a light on utilizing organizational folders in conjunction with the App Router.

Creating Organizational Folders

Organizational folders stand as a beacon of better project organization. They're designed to bundle together related files and routes. How do you create one? Simply wrap a folder's name in parentheses, like so: (folderName). What's fascinating is that the naming convention for these folders doesn't influence the URL path of the routes nestled within them.

Diving into the Project Structure

Dive into a typical Next.js project, and you'll find all application code comfortably residing in the /app directory. This directory could house an array of folders: components, lib, and many others, pivoting on your project's demands.

But there's more! Next.js unveils a unique feature: Private Folders. If you prefix a folder name with an underscore, like _components, you're essentially signaling the Next.js router that this specific folder doesn't belong to the routes stack.

A simple illustration:

Here, the story is clear: _components is a private sanctuary, while (routes) is an organizational pillar. The underscore before _components acts as a barricade, preventing it from joining the routing party. On the other hand, (routes), encased in parentheses, serves a singular purpose—organization—and stays clear from affecting the route's URL path.

Navigating Routes with Organizational Folders

Routing in Next.js operates with precision. The user interface for a specific route is sculpted by a page.jsx file, sheltered within the folder symbolizing that route. In essence, a structural design resembling app/(routes)/about/page.jsx will graciously cater to the /about route.

Visualize this:

Here, both about and contact folders thrive under the protective canopy of the (routes) organizational folder. Each of these folders cherishes its own page.jsx file, crafting the UI for its designated route.

Crafting Multiple Root Layouts

The versatility of Next.js doesn’t end there. It graciously lets you construct multiple root layouts. Just introduce a layout.js file within each route group, and you’re set. This proves invaluable when you aim to split an application into segments, each boasting a distinct UI or user experience. However, a word of caution: hopping between multiple root layouts triggers a full page load, sidestepping the perks of client-side navigation.

Wrapping Up

The dawn of organizational folders in Next.js 13 has blessed developers with a streamlined path to architect their projects. By clustering related routes and setting boundaries for non-route folders, developers now wield the power to create a project blueprint that’s both intuitive and manageable.

However, it's crucial to remember that in the realm of Next.js project organization, there isn't a carved-in-stone "right" or "wrong". The key lies in selecting a methodology that resonates with you and your squad. And once you do, stride forward with consistency, crafting a cohesive project narrative.