Safe Colocation By Default

Since nextjs uses file based routing a common concern people have is if a file is magically going to become a part of the public routes. This is not something you generally need to worry about.

As an example (demonstrated below) a component file called Name.tsx isn't going to magically become publicly accessible. You need to explicitly export it from a file that NextJS understands e.g. page.tsx.

app/demo/Name.tsx

app/demo/page.tsx

export function Name() {
  return (
    <div>
      <h1>Hi, My name is Bebop 👋</h1>
    </div>
  );
}

Explicit Private Folders

If you are concerned about utility code files conflicting with the current or future next routing algorithms and still want to colocate them with the routes that use them => nextjs provides a simple solution in the form of private folders.

Private folders can be created by prefixing a folder with an underscore: _ (e.g. _ui). This indicates the folder is a private implementation detail and should not be considered by the routing system, thereby opting the folder and all its subfolders out of routing.

Using a private folder allows you to safely colocate files that are only used by specific pages, without worrying about routing conflicts.

This is demonstrated below:

app/demo/_ui/Name.tsx

app/demo/page.tsx

export function Name() {
  return (
    <div>
      <h1>Hi, My name is Bebop 👋</h1>
    </div>
  );
}

Private Bypass

The keen amongst you might be wondering at this point, what if you want your public route segment to start with an _?

You can achieve this by using %5F (the URL-encoded form of an underscore) instead of _. For example %5Fui would service the route _ui.

This is demonstrated below:

app/demo/%5Fui/page.tsx

404: Not Found

Transcript

00:00

Since next days uses file-based routing. A common concern people have is if a file is magically going to become a part of the public routes, this is not something you generally need to worry about. As an example, if you want a utility or a component that is only used from the demo page, it is perfectly fine to create it next to the page. Here we are creating a new component called name within the demo folder. There is actually no way that this component is magically going to become available on the public internet. There is no URLI can type over here. That will take me to that name component.

00:32

The only way that this component will become available on the internet is if we decide to explicitly use it. For example, within the demo page with this component explicitly added to our page, of course it is going to show up on that demo route. If you are concerned about utility code files conflicting with the current or future next J routing algorithms and still want to colocate them with the route set, use them. Next J provides a simple solution in the form of private folders. Any folder that starts with underscore is actually ignored by the next JS app router.

01:04

As an example, a folder named underscore UI would be ignored, and even if we create a file called Page or TSX within this folder, it is not something that the router will even look at for private folders. It doesn't matter what the names and the contents of the files under that folder are. It is not something that out is going to look at. Even with the page TSX exporting a proper next JS page demo slash UI is not going to be a valid route, and we can verify that from the browser. You can see that the next gout is returning a 4 0 4. So if you want to co-locate components next to our page

01:38

and don't want to worry about next j file naming conventions, we can simply move them into the private folder. The keen amongst you might be wondering at this point, what if you want your public route segment to start with an underscore. We know that since this folder starts with an underscore, this page is not going to become a valid route. The way around this is that instead of an explicit underscore, we can use a URL encoded version of the underscore, which is Person five F. With this change in case if you visit the slash underscore UR route, you can see that next year has successfully routed to that page.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional NextJS Lessons

Safe Colocation with Private Folders

Subscription Required

Safe Colocation By Default

Explicit Private Folders

Private Bypass

Transcript

Professional NextJS