Route Groups and Colocation
Explore how to improve Next.js project organization by using route groups to group related pages without changing URLs, and colocation to keep components and styles near their routes. This lesson helps you build scalable, maintainable applications through practical structuring techniques.
We’ve covered the basics of routing and layouts: mapping pages to URLs, building dynamic routes, and creating shared layouts across sections of our apps.
So now, let’s think about what separates smooth projects from ones that become unmanageable. Often, it comes down to organization.
Let’s build on what we’ve learned to keep our projects organized and scalable.
Using Route Groups for organization
As our app grows, we naturally start to define different sections, maybe some marketing pages (/about and /contact) and a separate area for authenticated users (/dashboard or /settings). We want to organize these pages in our filesystem without adding extra URL segments, so we don’t end up with /marketing/about ...