NextJs Routing System
This session will focus more on the routing system of the Next JS framework.

Part 2 – Routing in Next.js 15: The Power of the App Router and Folder Structure
In the previous article, we introduced the core features of Next.js 15. Now it's time to dive deeper into one of the most important aspects of this framework — the new App Router system. First introduced in version 13, this routing system has become much more complete and stable in version 15.
📁 The app/ Directory – Where Everything Begins
In the new architecture, the app/ folder replaces the traditional pages/ directory. Each subfolder inside app/ represents a route in your application.
app/
├── page.tsx ← Main page for root route
├── layout.tsx ← Shared layout across nested routes
├── loading.tsx ← Shown while async data is loading
├── error.tsx ← Handles route-specific errors
├── about/
│ └── page.tsx ← Route: /about
├── blog/
│ ├── layout.tsx ← Layout for all blog-related routes
│ └── [slug]/
│ └── page.tsx ← Dynamic route: /blog/[slug]✅ Each folder may include one or more special files, each playing a key role in the user experience.
📄 page.tsx – The Main Page Component
As the name implies, this file defines the primary UI for the route.
// app/about/page.tsx
export default function AboutPage() {
return <h1>About Us</h1>;
}📄 layout.tsx – Shared Layout
This file defines the shared structure of the route and its nested children, such as headers, footers, or sidebars.
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}You can also use nested layouts by placing a layout.tsx in deeper route folders. These layouts stack on top of each other to create a layered UI.
📄 loading.tsx – Async Loading Indicator
If a route performs asynchronous data fetching, loading.tsx is shown automatically by Next.js during the loading phase.
export default function Loading() {
return <p>Loading...</p>;
}📄 error.tsx – Error Boundary for Routes
If an error occurs while rendering a route (e.g. a failed fetch or a thrown error), error.tsx is rendered.
'use client'; // Must be a client component
export default function ErrorPage({ error, reset }) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={reset}>Try Again</button>
</div>
);
}📄 Dynamic Routes – [param] Syntax
To create dynamic routes (e.g. /blog/[slug]), you can use square bracket syntax in folder names:
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
return <div>Post: {params.slug}</div>;
}📄 Route Handlers – Building API Routes
App Router supports server functions directly in route folders via route.ts or route.js. You can define HTTP methods like GET, POST, DELETE, etc., to create custom APIs.
// app/api/contact/route.ts
export async function POST(req: Request) {
const body = await req.json();
// Save or process the data
return new Response('Message received successfully');
}⚙️ Important Notes
Special files like
layout,page,error, etc., only work insideapp/-based route folders.If you place a
layout.tsxinapp/blog/[slug]/, it will apply only to that route and its children.If a folder only includes
layout.tsxwithoutpage.tsx, it acts purely as a wrapper for layout and does not create a standalone page.
🧠 Summary
The App Router in Next.js 15 introduces a powerful yet intuitive routing model based on folder structure. It allows you to manage routes, pages, layouts, loading states, error handling, and even API endpoints—all in one consistent system.
This file-based architecture significantly improves the maintainability of large projects and promotes modular development.