02. Project Structure, Special File Conventions (page, layout, template, loading, error) • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

Next.js 14+ App Router & Full-Stack Architecture › 02. Project Structure, Special File Conventions (page, layout, template, loading, error)

40 mins

← Prev Next →

Course Syllabus

Module 1: Next.js 14+ Architecture & App Router Internals

01. Next.js 14+ Evolution: Pages Router vs App Router Architecture 02. Project Structure, Special File Conventions (page, layout, template, loading, error) 03. Rendering Strategies: Static Rendering (SSG), Dynamic Rendering (SSR) & Streaming

Module 2: Server Components (RSC) vs Client Components

04. React Server Components (RSC) Deep Dive: The Server-Client Component Boundary 05. Passing Data between RSC & Client: Serialization Rules & The Children Pattern 06. Server-Only Packages (import "server-only") & Taint API for Secret Protection

Module 3: Routing Architecture, Intercepting & Parallel Routes

07. Dynamic Segments, Catch-All ([...slug]) & Optional Catch-All ([[...slug]]) 08. Parallel Routes (@modal, @analytics) & Conditional Slot Rendering 09. Intercepting Routes ((..)photos, (.)login) & Instagram/Twitter Modal Architecture

Module 4: Server Actions, Mutation & Form Handling

10. Server Actions ("use server"): Type-Safe Mutations without REST Endpoints 11. Form Validation with useFormState, useFormStatus, and Zod Schemas 12. Optimistic UI Updates with useOptimistic Hook in Server Actions

Module 5: The 4-Layer Caching Architecture & Revalidation

13. The 4-Layer Caching Engine: Request Memoization, Data Cache, Full Route Cache, Router Cache 14. On-Demand Revalidation: revalidatePath vs revalidateTag with Cache Tags 15. Partial Prerendering (PPR): Combining Static Shells with Dynamic Holes

Module 6: Authentication (NextAuth v5), Middleware & Production Deployment

16. Route Handlers (route.ts): Building REST API Endpoints with NextResponse 17. Edge Middleware (middleware.ts): Geo-Routing, Bot Detection & Header Injection 18. Authentication Architecture with Auth.js (NextAuth v5) & JWT Sessions 19. SEO Mastery: Dynamic Metadata, OpenGraph Image Generation (ImageResponse) & Sitemap 20. Production Docker Multi-Stage Build & Standalone Deployment on Cloud VPS

Interactive Lesson Studio

# 02. Project Structure, Special File Conventions (page, layout, template, loading, error)

> Next.js 14+ Notes by Rishabh - Topic 02

---

### 1. The Special File Hierarchy 📁

App Router directory routing file-convention based hoti hai:

```
app/
 ├── layout.tsx       (Root Layout: html, body, Navbar, Footer)
 ├── template.tsx     (Like layout, but creates a FRESH instance on every route change)
 ├── page.tsx         (Route UI: https://domain.com/)
 ├── loading.tsx      (Instant Suspense fallback skeleton)
 ├── error.tsx        (Client Error Boundary fallback)
 ├── not-found.tsx    (Custom 404 UI)
 └── dashboard/
      ├── layout.tsx  (Nested Dashboard Layout)
      └── page.tsx    (Route UI: https://domain.com/dashboard)
```

---

### 2. `layout.tsx` vs `template.tsx` (The Crucial Difference 👑)

*   **`layout.tsx` (Preserves State):** Route change hone par layout **re-render nahi hota** aur uske andar ka state (jaise video player, input text) intact rehta hai.
*   **`template.tsx` (Fresh Instance):** Route change hone par DOM elements remount hote hain (Page transition animations aur `useEffect` triggers ke liye best!).

---

### 3. Graceful Error Handling with `error.tsx` (Client Boundary)

`error.tsx` hamesha **Client Component (`"use client"`)** hona mandatory hai:

```tsx
"use client";

import { useEffect } from "react";

export default function ErrorBoundary({
    error,
    reset
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    useEffect(() => {
        console.error("❌ Application error captured:", error);
    }, [error]);

return (
        <div className="p-6 text-center">
            <h2 className="text-red-500 font-bold">Something went wrong!</h2>
            <p className="text-gray-600">{error.message}</p>
            <button
                onClick={() => reset()}
                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
            >
                Try Again 🔄
            </button>
        </div>
    );
}
```

---

### 4. Master Comparison Matrix

---

### 5. Interview Ke 3 Sawal Is Topic Se

1. **`error.tsx` file `"use client"` kyu mangti hai?** -> Kyunki error recovery button (`reset()`) aur interactive browser error logging React client state hooks (`useEffect`, `onClick`) par depend karte hain.
2. **Root Layout (`app/layout.tsx`) me `<html>` aur `<body>` tags hona kyu mandatory hai?** -> Next.js root layout se hi poora HTML document frame generate karta hai; nested layouts me `<html>` tags nahi hone chahiye.
3. **Root layout ke errors capture karne ke liye kaunsi file use hoti hai?** -> `global-error.tsx` (Kyunki normal `app/error.tsx` root layout ke bahar crash hone wale errors ko catch nahi kar sakta).

---
**Next Topic:** 03. Rendering Strategies: Static Rendering (SSG), Dynamic Rendering (SSR) & Streaming

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track