Exploring Next.js 16 File System Conventions

📂 Exploring Next.js 16 File System Conventions

I recently started playing with Next.js 16 experimental features, especially the new file-system conventions.

At first glance, it might seem like a small shift — but once you dive in, you realize how much cleaner the developer experience has become.

---

🧱 Unified app/ directory

The entire app now lives under app/, including routes, layouts, loading, and API endpoints.

app/
├─ layout.tsx
├─ page.tsx
├─ api/
│   ├─ users/
│   │   └─ route.ts

`

No more pages/api. Everything feels connected and much easier to reason about.

---

⚙️ Co-located Components

You can mix server and client components in the same directory.

The compiler figures it out automatically based on context — finally, no more “use client” chaos everywhere.

---

🧩 route.config.ts

Every segment can now have its own small configuration file:

ts
export const revalidate = 30
export const dynamicParams = "auto"
`

That means cleaner routing rules without global clutter.

---

💬 My takeaway

Next.js 16 feels like what we’ve been waiting for since the App Router arrived.
File-system-driven architecture finally feels consistent and predictable.

I wrote a deeper breakdown on my blog if you want full examples and structure visuals 👇
👉 ganeshtidake.site/blog/nextjs-16-file-system-conventions