Next Colocation Template

Next Colocation Template is an open-source Next.js boilerplate that demonstrates a colocation-first folder structure inside the App Router, where pages, components, and route-specific logic live together by feature.

What is Next Colocation Template?

Next Colocation Template is an open-source Next.js boilerplate that organizes an application around the colocation principle: each route segment contains its own page.tsx, layout, and a private _components/ folder for the UI and logic that belong to that route. It takes the standard Next.js App Router project structure and reorganizes it so features are self-contained, reducing the need to jump between global folders. The template is built with TypeScript, Tailwind CSS, and Shadcn UI, and it ships with a starter dashboard page plus auth pages for login and register. The project is maintained by arhamkhnz on GitHub, and its repository also links to a larger real-world example called Next Shadcn Admin Dashboard that applies the same pattern.

Key Features

• Colocation-first route structure — Every route like auth/login or auth/register contains its own page.tsx and a _components/ folder holding that route's UI components, so related code stays together.
• Private folders with underscore prefix — Directories such as _components/ are excluded from Next.js routing, following the official private folders convention, which keeps components and logic out of the URL path.
• Route groups for logical separation — The template uses (main) and (external) route groups to separate core application logic from public-facing pages without changing the resulting URLs.
• TypeScript and Shadcn UI included — The codebase is written in TypeScript and uses Shadcn UI components, giving you pre-built, accessible UI primitives for prototyping immediately.
• Starter pages and middleware — Includes login and register pages, a dashboard page with its own layout, shared auth components, and a middleware.ts file for authentication and redirects.
• Top-level shared folders — Shared utilities live in hooks/, lib/, config/, and navigation/ under src/, keeping reusable logic decoupled from specific routes.
• Adaptable to other frameworks — The colocation pattern works beyond Next.js and can be applied to Remix, Vite with React Router, or Nuxt.

Who is it for?

Next Colocation Template is aimed at developers who want a production-ready folder structure without the overhead of building one from scratch. Frontend engineers starting a new Next.js project can clone the repo and immediately follow a colocation-first layout that scales. Teams working on medium-to-large applications with dozens of routes benefit from the clear boundaries between server and client components and the reduced cognitive load of having route logic nearby. Developers learning the Next.js App Router can study the file tree as a reference for private folders, route groups, and nested layouts.

What can you do with it?

• Prototype a dashboard or SaaS app — Clone the repository and start coding against the included dashboard and auth pages, with Shadcn UI components and TypeScript ready to use.
• Adopt a scalable folder pattern — Use the template as the foundation for an enterprise codebase where each feature owns its components, preventing a bloated global components folder.
• Teach or document colocation — The README itself explains the rationale and shows a full file tree, making it a useful reference for team onboarding or blog posts about Next.js structure.
• Adapt the pattern elsewhere — Since the colocation principle is not tied to Next.js, you can replicate the structure in Remix, Nuxt, or Vite with React Router.

How does the template work?

The template's structure is visible in its file tree. Under src/app/, the auth/ segment contains login/ and register/ routes, each with its own page.tsx and _components/ folder; shared auth components like GitHub sign-in buttons live in auth/_components/. The dashboard/ route has its own layout.tsx and _components/. Route groups such as (main) and (external) organize the app without affecting URLs, and folders prefixed with an underscore are ignored by the router.

FAQ

Is Next Colocation Template free?

Yes, the template is open-source and available on GitHub. You can clone the repository and use it as a starting point without any licensing cost mentioned on the page.

Does the template use the src/ directory?

The example file tree uses src/, but the project also works without it. If you don't use src/, folders like app/, lib/, hooks/, and middleware.ts reside at the project root instead.

Can I use this pattern with other frameworks?

The pattern is built for Next.js, but the page states it can be adapted to other modern frameworks with file-based routing, including Remix, Vite with React Router, and Nuxt.

Is the project actively maintained?

The page notes that the project is actively being updated, so you may notice occasional inconsistencies or ongoing changes in the folder structure. Contributions and suggestions are welcome on GitHub.