NextJs Routing System

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 inside app/-based route folders.
If you place a layout.tsx in app/blog/[slug]/, it will apply only to that route and its children.
If a folder only includes layout.tsx without page.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.

NextJs Routing System

Part 2 – Routing in Next.js 15: The Power of the App Router and Folder Structure

📁 The app/ Directory – Where Everything Begins

📄 page.tsx – The Main Page Component

📄 layout.tsx – Shared Layout

📄 loading.tsx – Async Loading Indicator

📄 error.tsx – Error Boundary for Routes

📄 Dynamic Routes – [param] Syntax