If you’ve ever found yourself confused about when a folder becomes a route, what files are actually exposed to the browser, or how to safely organize your files in Next.js then this article is for you. In this guide, we’ll break down how route visibility and colocation work in the Next.js App, with clear examples and explanations.

In the App Router of Next.js, routing is based on your file and folder structure inside the app directory. Each folder represents a segment of the URL path.

However, not every folder becomes a public route by default. A route is only made publicly accessible when you add a page.js or route.js file inside the segment folder.

Example: 

/app/dashboard/settings/page.js

This creates the route: /dashboard/settings

If the page.js is missing:

/app/dashboard/settings/

Then /dashboard/settings is not accessible at all.

Route Groups and Private Folders

Next.js gives you two special ways to organize your routes without affecting the URL path or making things routable:

1. Route Groups (folder)

Use parentheses to group route segments for better organization, without changing the actual URL.

/app/(dashboard)/settings/page.js
/app/(dashboard)/profile/page.js

Resulting URLs:

  • /settings

  • /profile

The (dashboard) part is for internal organization only. It doesn’t show up in the URL.

2. Private Folders _folder

Prefix a folder with an underscore to opt out of routing completely. This is perfect for utilities, components, or constants that don’t need to be exposed.

/app/_utils/helpers.js
/app/_forms/LoginForm.js

These are not routable, no matter what’s inside them.

Colocation: Organizing Without Exposing

One of the coolest things about the App Router is the ability to colocate files. This means you can keep your components, styles, or helper functions next to the routes they belong to, without making them public routes.

Example: 

/app/dashboard/settings/
  ├── page.js           becomes /dashboard/settings
  ├── SettingsForm.js   not a route
  └── styles.module.css not a route

Even though SettingsForm.js and styles.module.css are in the same folder, they won’t become accessible as standalone routes. They’re safely tucked away and only used internally.

This helps you:

  • Stay organized

  • Avoid huge component folders elsewhere

Recap

1. Folder with no page.js = Not a route

/app/profile/settings/   Not a route

2. Add page.js = Now it's a route

/app/profile/settings/page.js   Now a route /profile/settings

If colocation doesn’t fit your workflow, you can still keep shared components or utilities outside the app folder. But when working on large features, colocation can help reduce mental overhead.

Conclusion

Understanding how route visibility works and how colocation keeps things private can make your Next.js projects much cleaner and more maintainable. These little architectural choices add up and help you scale your app confidently.

If you're also learning Next.js and documenting your journey, I’d love to hear what clicked for you.

Resources: