Home/Next.js/App Router & File-Based Routing

N Next.js1 / 3

App Router & File-Based Routing

📌 WHAT

Next.js App Router uses the file system as the router. Every folder in /app represents a URL segment. A page.tsx file makes that route accessible to users.

💡 WHY

Eliminates manual route configuration. Convention over configuration — learn the folder structure once, never configure routes again.

⏰ WHEN / WHERE

Every page or route in your application. Next.js handles the routing automatically based on your folder structure.

🔧 HOW

Create app/[path]/page.tsx to create a route. Use [param] syntax for dynamic routes. layout.tsx wraps all pages at that level.

Code Examples

#1File system routing

File system routing

typescript

// FOLDER STRUCTURE → URL MAPPING
// app/
//   page.tsx                    → /
//   about/page.tsx              → /about
//   dashboard/
//     page.tsx                  → /dashboard
//     layout.tsx                → wraps all dashboard pages
//     settings/page.tsx         → /dashboard/settings
//   blog/
//     page.tsx                  → /blog
//     [slug]/page.tsx           → /blog/any-post-name
//   api/
//     users/route.ts            → /api/users (API endpoint)

// 1. Basic page — app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to DevGuide</h1>
    </main>
  );
}

// 2. Dynamic route — app/blog/[slug]/page.tsx
interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string }; // ?query=value
}

export default function BlogPost({ params, searchParams }: PageProps) {
  return <h1>Post: {params.slug}</h1>;
}

// 3. Layout — app/dashboard/layout.tsx
// Wraps all pages inside /dashboard
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <aside>Sidebar navigation</aside>
      <main className="flex-1">{children}</main>
    </div>
  );
}

// 4. Catch-all routes
// app/docs/[...slug]/page.tsx → /docs/a/b/c
// params.slug = ["a", "b", "c"]

Try in Playground

Practice This Concept

Open the playground, paste any example, and experiment. The best way to learn is by breaking things.

Open in Playground

useContext, useRef, useMemo, useCallback

Server vs Client Components