Next.js (App Router) Intermediate Guide

Next.js (App Router) के लिए इंटरमीडिएट गाइड: आर्किटेक्चर और ऑप्टिमाइज़ेशन

1. सर्वर कंपोनेंट (RSC) और क्लाइंट कंपोनेंट (RCC) का गहन अध्ययन

शुरुआती गाइड सिर्फ़ कंपोनेंट बनाने पर ज़ोर देती है, लेकिन इंटरमीडिएट लेवल पर यह समझना ज़रूरी है कि Next.js 13/14 में कंपोनेंट दो प्रकार के होते हैं: Server Components (RSC) और Client Components (RCC)।

विशेषता	Server Components (डिफ़ॉल्ट)	Client Components ('use client')
स्थान	Server-side (Node.js) पर रेंडर होते हैं।	Browser-side (क्लाइंट) पर रेंडर होते हैं।
उपयोग	डेटा फ़ेचिंग (Data Fetching), संवेदनशील लॉजिक (sensitive logic), SEO-friendly कंटेंट।	Interactivity (जैसे: `useState`, `useEffect`, `onClick` event handlers)।
एक्सेस	सीधे File System और Database से इंटरैक्ट कर सकते हैं।	सीमित (Limited access), केवल क्लाइंट-साइड API का उपयोग।
बंडल साइज़	बंडल में शामिल नहीं होते (Zero-bundle size for the client)।	बंडल में शामिल होते हैं (Increases JS bundle size)।

सुधार: हमेशा ज़्यादा से ज़्यादा कंपोनेंट्स को RSC बनाए रखें। जब भी interactivity की ज़रूरत हो, केवल उसी छोटे कंपोनेंट को 'use client' से मार्क करें। इसे Client Boundary कहते हैं।

2. उन्नत डेटा फ़ेचिंग रणनीतियाँ (Advanced Data Fetching)

Next.js में fetch अब सिर्फ़ एक API नहीं है; यह बिल्ट-इन कैशिंग (Caching), मेमोइज़ेशन (Memoization) और रीवैलिडेशन (Revalidation) के साथ आता है।

a. Caching और Deduplication

fetch डिफ़ॉल्ट रूप से Server Components में रिक्वेस्ट को ऑटोमैटिकली कैश करता है। अगर आप एक ही कंपोनेंट या nested कंपोनेंट में एक ही URL को कई बार fetch करते हैं, तो Next.js केवल एक बार रिक्वेस्ट भेजता है (Deduplication)।

b. डायनामिक रेंडरिंग और ISR (Incremental Static Revalidation)

आप fetch में cache या next ऑप्शन का उपयोग करके रेंडरिंग व्यवहार को नियंत्रित कर सकते हैं:

SSR (Server-Side Rendering) के लिए:

JavaScript
// यह हर request पर data fetch करेगा (no cache)
const res = await fetch(url, { cache: 'no-store' }); 

ISR (Incremental Static Revalidation) के लिए:

JavaScript
// हर 60 सेकंड में data revalidate होगा। (SSG + Dynamic)
const res = await fetch(url, { next: { revalidate: 60 } }); 

यह Static Site Generation (SSG) की गति और Server-Side Rendering (SSR) की ताजगी (freshness) को एक साथ प्रदान करता है।

3. नेस्टेड लेआउट्स और रूट ग्रुप्स (Nested Layouts & Route Groups)

app/ फ़ोल्डर में राउटिंग से जुड़ी तीन प्रमुख फ़ाइलें हैं जो इंटरमीडिएट आर्किटेक्चर का आधार बनती हैं:

a. `layout.tsx` (Shared UI and Data)

एक layout.tsx अपने नीचे के सभी page.tsx और nested layouts को रैप करता है।
यह कंपोनेंट Server Component होता है, इसलिए आप इसमें डेटा फ़ेच कर सकते हैं जो उस लेआउट के सभी बच्चों के लिए उपलब्ध होगा।
उदाहरण: app/dashboard/layout.tsx फ़ाइल dashboard के सभी पेजों के लिए एक कॉमन नेविगेशन बार और साइडबार बनाएगी।

b. `loading.tsx` (Instant Loading States)

जब कोई user किसी route पर नेविगेट करता है और डेटा फ़ेचिंग में समय लगता है, तो Next.js ऑटोमैटिकली loading.tsx में परिभाषित UI को दिखाता है।
यह UI सर्वर पर रेंडर होता है, जिससे instant feedback मिलता है और UX बेहतर होता है।

c. रूट ग्रुप्स (Route Groups)

आप फ़ोल्डर का नाम कोष्ठक (parentheses) में लिखकर रूटिंग स्ट्रक्चर को प्रभावित किए बिना फ़ाइलों को व्यवस्थित कर सकते हैं।
उदाहरण: अगर आप /marketing/(auth)/login/page.tsx बनाते हैं, तो URL केवल /marketing/login होगा, और (auth) फ़ोल्डर रूटिंग पाथ में शामिल नहीं होगा। यह अलग-अलग लेआउट (जैसे (auth) के लिए simple header, और (app) के लिए full dashboard) मैनेज करने में मदद करता है।

4. सर्वर एक्शन्स (Server Actions) और म्यूटेशन (Mutation)

यह Next.js 14 का एक प्रमुख बदलाव है जो पारंपरिक API रूट्स (route.js) की आवश्यकता को कम करता है, खासकर फ़ॉर्म सबमिशन के लिए।

परिभाषा: Server Actions, React के साथ इंटीग्रेटेड एसिंक्रोनस फ़ंक्शन हैं जो सीधे कंपोनेंट्स से कॉल किए जा सकते हैं, लेकिन server पर रन होते हैं।
उपयोग: फ़ॉर्म सबमिशन (Form Submission), डेटाबेस में डेटा अपडेट करना (Data Mutation)।

कार्यान्वयन (Implementation):

एक क्लाइंट कंपोनेंट ('use client') में HTML <form> टैग का उपयोग करें।
action prop में एक Server Action फ़ंक्शन पास करें।

JavaScript
// server/actions.js
'use server'; // यह निर्देश फ़ंक्शन को Server Action बनाता है

export async function createPost(formData) {
  const title = formData.get('title');
  // यहां Database operation या file system operation होगी
  console.log(`New post: ${title}`);
}

JavaScript
// app/new-post/page.tsx
'use client'; 
import { createPost } from '@/server/actions';

export default function NewPostForm() {
  return (
    // Server Action को सीधे 'action' prop में pass करें
    <form action={createPost}> 
      <input type="text" name="title" required />
      <button type="submit">Submit</button>
    </form>
  );
}

यह तरीका API Route (route.js) बनाने की ज़रूरत को ख़त्म करता है और type-safety को बढ़ाता है।

5. मेटाडेटा और SEO अनुकूलन (Metadata and SEO Optimization)

Next.js App Router में, SEO को metadata ऑब्जेक्ट या फ़ंक्शन का उपयोग करके सीधे layout.tsx या page.tsx फ़ाइल में कॉन्फ़िगर किया जाता है।

a. Static Metadata

किसी भी layout.tsx या page.tsx में एक एक्सपोर्टेड metadata ऑब्जेक्ट जोड़ें:

JavaScript
export const metadata = {
  title: 'Next.js App Router: Advanced',
  description: 'An intermediate guide to RSC, Caching, and Server Actions.',
};

b. Dynamic Metadata

अगर metadata को फ़ेच किए गए डेटा (जैसे किसी blog post का title) पर निर्भर रहना है, तो आप एक generateMetadata async function का उपयोग कर सकते हैं:

JavaScript
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug); // Server-side fetch
  return {
    title: post.title,
    description: post.summary,
  };
}

यह Next.js को build time या request time पर <head> टैग को सही ढंग से रेंडर करने में मदद करता है, जो SEO के लिए महत्वपूर्ण है।

Mohit Bhati - Experience CMS

Search This Blog