Next.js ॲप राउटर: फाईल-आधारित राउटिंगसाठी एक सर्वसमावेशक मार्गदर्शक

Next.js 13 मध्ये सादर केलेला आणि नंतरच्या आवृत्त्यांमध्ये मानक बनलेला Next.js ॲप राउटर, आपण ऍप्लिकेशन्सची रचना आणि नेव्हिगेट कसे करतो यात क्रांती घडवतो. हे एक शक्तिशाली आणि अंतर्ज्ञानी फाईल-आधारित राउटिंग सिस्टीम सादर करते, जी डेव्हलपमेंट सोपे करते, परफॉर्मन्स सुधारते आणि एकूण डेव्हलपर अनुभव वाढवते. हे सर्वसमावेशक मार्गदर्शक ॲप राउटरच्या फाईल-आधारित राउटिंगमध्ये खोलवर जाईल, जे तुम्हाला मजबूत आणि स्केलेबल Next.js ऍप्लिकेशन्स तयार करण्यासाठी ज्ञान आणि कौशल्ये प्रदान करेल.

फाईल-आधारित राउटिंग म्हणजे काय?

फाईल-आधारित राउटिंग ही एक राउटिंग सिस्टीम आहे जिथे तुमच्या ऍप्लिकेशनच्या रूट्सची रचना थेट तुमच्या फाईल्स आणि डिरेक्टरीजच्या संघटनेद्वारे निश्चित केली जाते. Next.js ॲप राउटरमध्ये, तुम्ही `app` डिरेक्टरीमध्ये फाईल्स तयार करून रूट्स परिभाषित करता. प्रत्येक फोल्डर एक रूट सेगमेंट दर्शवते आणि त्या फोल्डर्समधील विशेष फाईल्स तो रूट सेगमेंट कसा हाताळला जाईल हे परिभाषित करतात. या दृष्टिकोनाचे अनेक फायदे आहेत:

• अंतर्ज्ञानी रचना: फाईल सिस्टीम ऍप्लिकेशनच्या रूट स्ट्रक्चरला प्रतिबिंबित करते, ज्यामुळे ते समजणे आणि नेव्हिगेट करणे सोपे होते.
• स्वयंचलित राउटिंग: Next.js तुमच्या फाईल स्ट्रक्चरवर आधारित रूट्स स्वयंचलितपणे तयार करते, ज्यामुळे मॅन्युअल कॉन्फिगरेशनची गरज नाहीशी होते.
• कोड कोलोकेशन: रूट हँडलर्स आणि UI कंपोनेंट्स एकत्र ठेवल्यामुळे कोडची रचना आणि देखभाल सुधारते.
• अंगभूत वैशिष्ट्ये: ॲप राउटर लेआउट्स, डायनॅमिक रूट्स, डेटा फेचिंग आणि बरेच काहीसाठी अंगभूत समर्थन प्रदान करते, ज्यामुळे जटिल राउटिंग परिस्थिती सोपी होते.

ॲप राउटरसह प्रारंभ करणे

ॲप राउटर वापरण्यासाठी, तुम्हाला एक नवीन Next.js प्रोजेक्ट तयार करावा लागेल किंवा विद्यमान प्रोजेक्ट स्थलांतरित करावा लागेल. तुम्ही Next.js आवृत्ती 13 किंवा नंतरची वापरत असल्याची खात्री करा.

नवीन प्रोजेक्ट तयार करणे:

तुम्ही खालील कमांड वापरून ॲप राउटरसह एक नवीन Next.js प्रोजेक्ट तयार करू शकता:

npx create-next-app@latest my-app --example with-app

विद्यमान प्रोजेक्ट स्थलांतरित करणे:

विद्यमान प्रोजेक्ट स्थलांतरित करण्यासाठी, तुम्हाला तुमची पेजेस `pages` डिरेक्टरीमधून `app` डिरेक्टरीमध्ये हलवावी लागतील. तुम्हाला त्यानुसार तुमची राउटिंग लॉजिक समायोजित करण्याची आवश्यकता असू शकते. Next.js तुम्हाला या प्रक्रियेत मदत करण्यासाठी एक मायग्रेशन मार्गदर्शक प्रदान करते.

फाईल-आधारित राउटिंगच्या मुख्य संकल्पना

ॲप राउटर अनेक विशेष फाईल्स आणि परंपरा सादर करते जे तुमचे रूट्स कसे हाताळले जातात हे परिभाषित करतात:

1. `app` डिरेक्टरी

`app` डिरेक्टरी तुमच्या ऍप्लिकेशनच्या रूट्सचे मूळ आहे. या डिरेक्टरीमधील सर्व फाईल्स आणि फोल्डर्स रूट्स तयार करण्यासाठी वापरले जातील. `app` डिरेक्टरीबाहेरील काहीही (जसे की तुम्ही स्थलांतर करत असाल तर `pages` डिरेक्टरी) ॲप राउटरद्वारे दुर्लक्षित केले जाईल.

2. `page.js` फाईल

`page.js` (किंवा `page.jsx`, `page.ts`, `page.tsx`) फाईल ॲप राउटरचा सर्वात मूलभूत भाग आहे. हे एका विशिष्ट रूट सेगमेंटसाठी प्रस्तुत केले जाणारे UI कंपोनेंट परिभाषित करते. तुम्ही थेट ऍक्सेस करू इच्छित असलेल्या कोणत्याही रूट सेगमेंटसाठी ही एक आवश्यक फाईल आहे.

उदाहरण:

जर तुमच्याकडे अशी फाईल रचना असेल:

app/
  about/
    page.js

जेव्हा वापरकर्ता `/about` वर नेव्हिगेट करतो तेव्हा `app/about/page.js` मधून निर्यात केलेला कंपोनेंट प्रस्तुत केला जाईल.

// app/about/page.js
import React from 'react';

export default function AboutPage() {
  return (
    <div>
      <h1>आमच्याबद्दल</h1>
      <p>आमच्या कंपनीबद्दल अधिक जाणून घ्या.</p>
    </div>
  );
}

3. `layout.js` फाईल

`layout.js` (किंवा `layout.jsx`, `layout.ts`, `layout.tsx`) फाईल एक UI परिभाषित करते जे एका रूट सेगमेंटमधील अनेक पेजेसवर शेअर केले जाते. लेआउट्स सातत्यपूर्ण हेडर्स, फूटर्स, साईडबार आणि इतर घटक तयार करण्यासाठी उपयुक्त आहेत जे अनेक पेजेसवर उपस्थित असावेत.

उदाहरण:

समजा तुम्हाला `/about` पेज आणि काल्पनिक `/about/team` पेज या दोन्हींमध्ये एक हेडर जोडायचा आहे. तुम्ही `app/about` डिरेक्टरीमध्ये एक `layout.js` फाईल तयार करू शकता:

// app/about/layout.js
import React from 'react';

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>आमच्या कंपनीबद्दल</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

`children` प्रॉप त्याच डिरेक्टरीमधील किंवा कोणत्याही नेस्टेड डिरेक्टरीमधील `page.js` फाईलद्वारे प्रस्तुत केलेल्या UI ने बदलले जाईल.

4. `template.js` फाईल

`template.js` फाईल `layout.js` प्रमाणेच आहे, परंतु ती प्रत्येक चाइल्ड रूटसाठी कंपोनेंटचा एक नवीन इंस्टन्स तयार करते. हे अशा परिस्थितींसाठी उपयुक्त आहे जिथे तुम्हाला कंपोनेंटची स्थिती टिकवून ठेवायची आहे किंवा चाइल्ड रूट्स दरम्यान नेव्हिगेट करताना री-रेंडरिंग टाळायचे आहे. लेआउट्सच्या विपरीत, टेम्पलेट्स नेव्हिगेशनवर पुन्हा रेंडर होतील. नेव्हिगेशनवर घटकांना ऍनिमेट करण्यासाठी टेम्पलेट्स वापरणे उत्तम आहे.

उदाहरण:

// app/template.js
'use client'

import { useState } from 'react'

export default function Template({ children }) {
  const [count, setCount] = useState(0)

  return (
    <main>
      <p>Template: {count}</p>
      <button onClick={() => setCount(count + 1)}>Update Template</button>
      {children}
    </main>
  )
}

5. `loading.js` फाईल

`loading.js` (किंवा `loading.jsx`, `loading.ts`, `loading.tsx`) फाईल तुम्हाला एक लोडिंग UI तयार करण्याची परवानगी देते जे रूट सेगमेंट लोड होत असताना प्रदर्शित होते. डेटा फेच करताना किंवा इतर असिंक्रोनस ऑपरेशन्स करत असताना चांगला वापरकर्ता अनुभव प्रदान करण्यासाठी हे उपयुक्त आहे.

उदाहरण:

// app/about/loading.js
import React from 'react';

export default function Loading() {
  return <p>माहिती लोड होत आहे...</p>;
}

जेव्हा वापरकर्ता `/about` वर नेव्हिगेट करतो, तेव्हा `page.js` कंपोनेंट पूर्णपणे प्रस्तुत होईपर्यंत `Loading` कंपोनेंट प्रदर्शित केला जाईल.

6. `error.js` फाईल

`error.js` (किंवा `error.jsx`, `error.ts`, `error.tsx`) फाईल तुम्हाला एक कस्टम एरर UI तयार करण्याची परवानगी देते जे रूट सेगमेंटमध्ये एरर आल्यावर प्रदर्शित होते. अधिक वापरकर्ता-अनुकूल एरर मेसेज प्रदान करण्यासाठी आणि संपूर्ण ऍप्लिकेशन क्रॅश होण्यापासून रोखण्यासाठी हे उपयुक्त आहे.

उदाहरण:

// app/about/error.js
'use client'

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>एक त्रुटी आली!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>पुन्हा प्रयत्न करा</button>
    </div>
  );
}

जर `/about` पेज प्रस्तुत करताना एरर आली, तर `Error` कंपोनेंट प्रदर्शित केला जाईल. `error` प्रॉपमध्ये एररबद्दल माहिती असते आणि `reset` फंक्शन वापरकर्त्याला पेज पुन्हा लोड करण्याचा प्रयत्न करण्याची परवानगी देते.

7. रूट ग्रुप्स

रूट ग्रुप्स `(groupName)` तुम्हाला URL स्ट्रक्चरवर परिणाम न करता तुमचे रूट्स संघटित करण्याची परवानगी देतात. ते फोल्डरच्या नावाला कंसात गुंडाळून तयार केले जातात. हे लेआउट्स आणि शेअर केलेल्या कंपोनेंट्सना संघटित करण्यासाठी विशेषतः उपयुक्त आहे.

उदाहरण:

app/
  (marketing)/
    about/
      page.js
    contact/
      page.js
  (shop)/
    products/
      page.js

या उदाहरणात, `about` आणि `contact` पेजेस `marketing` ग्रुपखाली गटबद्ध आहेत, आणि `products` पेज `shop` ग्रुपखाली आहे. URLs अनुक्रमे `/about`, `/contact`, आणि `/products` राहतात.

8. डायनॅमिक रूट्स

डायनॅमिक रूट्स तुम्हाला व्हेरिएबल सेगमेंट्ससह रूट्स तयार करण्याची परवानगी देतात. डेटाबेस किंवा API मधून आणलेल्या डेटावर आधारित सामग्री प्रदर्शित करण्यासाठी हे उपयुक्त आहे. डायनॅमिक रूट सेगमेंट्स सेगमेंटच्या नावाला चौरस कंसात ([id]) गुंडाळून परिभाषित केले जातात.

उदाहरण:

समजा तुम्हाला त्यांच्या आयडीवर आधारित वैयक्तिक ब्लॉग पोस्ट प्रदर्शित करण्यासाठी एक रूट तयार करायचा आहे. तुम्ही अशी फाईल रचना तयार करू शकता:

app/
  blog/
    [id]/
      page.js

`[id]` सेगमेंट एक डायनॅमिक सेगमेंट आहे. `app/blog/[id]/page.js` मधून निर्यात केलेला कंपोनेंट जेव्हा वापरकर्ता `/blog/123` किंवा `/blog/456` सारख्या URL वर नेव्हिगेट करतो तेव्हा प्रस्तुत केला जाईल. `id` पॅरामीटरचे मूल्य कंपोनेंटच्या `params` प्रॉपमध्ये उपलब्ध असेल.

// app/blog/[id]/page.js
import React from 'react';

export default async function BlogPost({ params }) {
  const { id } = params;

  // दिलेल्या आयडीसह ब्लॉग पोस्टसाठी डेटा मिळवा
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>ब्लॉग पोस्ट सापडले नाही.</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

async function fetchBlogPost(id) {
  // डेटाबेस किंवा एपीआयमधून डेटा मिळवण्याचे अनुकरण करा
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'माझे पहिले ब्लॉग पोस्ट', content: 'हे माझ्या पहिल्या ब्लॉग पोस्टची सामग्री आहे.' },
        '456': { title: 'आणखी एक ब्लॉग पोस्ट', content: 'ही आणखी काही रोमांचक सामग्री आहे.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

तुम्ही एका रूटमध्ये अनेक डायनॅमिक सेगमेंट्स देखील वापरू शकता. उदाहरणार्थ, तुमच्याकडे `/blog/[category]/[id]` सारखा रूट असू शकतो.

9. कॅच-ऑल सेगमेंट्स

कॅच-ऑल सेगमेंट्स तुम्हाला कितीही सेगमेंट्सशी जुळणारे रूट्स तयार करण्याची परवानगी देतात. हे सीएमएस तयार करण्यासारख्या परिस्थितींसाठी उपयुक्त आहे जिथे URL रचना वापरकर्त्याद्वारे निश्चित केली जाते. कॅच-ऑल सेगमेंट्स सेगमेंटच्या नावापूर्वी तीन ठिपके ([...slug]) जोडून परिभाषित केले जातात.

उदाहरण:

app/
  docs/
    [...slug]/
      page.js

`[...slug]` सेगमेंट `/docs` नंतरच्या कोणत्याही संख्येच्या सेगमेंट्सशी जुळेल. उदाहरणार्थ, ते `/docs/getting-started`, `/docs/api/users`, आणि `/docs/advanced/configuration` शी जुळेल. `slug` पॅरामीटरचे मूल्य जुळलेल्या सेगमेंट्स असलेली एक ॲरे असेल.

// app/docs/[...slug]/page.js
import React from 'react';

export default function DocsPage({ params }) {
  const { slug } = params;

  return (
    <div>
      <h1>Docs</h1>
      <p>स्लग: {slug ? slug.join('/') : 'स्लग नाही'}</p>
    </div>
  );
}

पर्यायी कॅच-ऑल सेगमेंट्स सेगमेंटचे नाव दुहेरी चौरस कंसात `[[...slug]]` टाकून तयार केले जाऊ शकतात. हे रूट सेगमेंटला पर्यायी बनवते. उदाहरण:

app/
  blog/
    [[...slug]]/
      page.js

हे सेटअप page.js कंपोनेंटला `/blog` आणि `/blog/any/number/of/segments` या दोन्ही ठिकाणी रेंडर करेल.

10. पॅरलल रूट्स

पॅरलल रूट्स तुम्हाला एकाच लेआउटमध्ये एकाच वेळी एक किंवा अधिक पेजेस रेंडर करण्याची परवानगी देतात. हे डॅशबोर्डसारख्या जटिल लेआउट्ससाठी विशेषतः उपयुक्त आहे, जिथे पेजचे वेगवेगळे विभाग स्वतंत्रपणे लोड केले जाऊ शकतात. पॅरलल रूट्स `@` चिन्हाने आणि त्यानंतर स्लॉट नावाने (उदा. `@sidebar`, `@main`) परिभाषित केले जातात.

उदाहरण:

app/
  @sidebar/
    page.js  // साईडबारसाठी सामग्री
  @main/
    page.js  // मुख्य विभागासाठी सामग्री
  default.js // आवश्यक: पॅरलल रूट्ससाठी डीफॉल्ट लेआउट परिभाषित करते

पॅरलल रूट्स वापरताना `default.js` फाईल आवश्यक आहे. हे अंतिम लेआउट तयार करण्यासाठी विविध स्लॉट्स कसे एकत्र केले जातात हे परिभाषित करते.

// app/default.js
export default function RootLayout({ children: { sidebar, main } }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', backgroundColor: '#f0f0f0' }}>
        {sidebar}
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>
        {main}
      </main>
    </div>
  );
}

11. इंटरसेप्टिंग रूट्स

इंटरसेप्टिंग रूट्स तुम्हाला तुमच्या ऍप्लिकेशनच्या वेगळ्या भागातून सध्याच्या लेआउटमध्ये एक रूट लोड करण्याची परवानगी देतात. हे मॉडेल्स, इमेज गॅलरी आणि इतर UI घटक तयार करण्यासाठी उपयुक्त आहे जे विद्यमान पेज सामग्रीच्या वर दिसले पाहिजेत. इंटरसेप्टिंग रूट्स `(..)` सिंटॅक्स वापरून परिभाषित केले जातात, जे इंटरसेप्ट केलेल्या रूटला शोधण्यासाठी डिरेक्टरी ट्रीमध्ये किती स्तर वर जायचे हे सूचित करते.

उदाहरण:

app/
  (.)photos/
    [id]/
      page.js  // इंटरसेप्ट केलेला रूट
  feed/
    page.js  // जिथे फोटो मॉडेल प्रदर्शित केले जाते ते पेज

या उदाहरणात, जेव्हा वापरकर्ता `/feed` पेजमधील फोटोवर क्लिक करतो, तेव्हा `app/(.)photos/[id]/page.js` रूट इंटरसेप्ट केला जातो आणि `/feed` पेजच्या वर मॉडेल म्हणून प्रदर्शित केला जातो. `(.)` सिंटॅक्स Next.js ला `photos/[id]` रूट शोधण्यासाठी एक स्तर वर (`app` डिरेक्टरीकडे) पाहण्यास सांगतो.

ॲप राउटरसह डेटा फेचिंग

ॲप राउटर सर्व्हर कंपोनेंट्स आणि क्लायंट कंपोनेंट्स वापरून डेटा फेचिंगसाठी अंगभूत समर्थन प्रदान करते. सर्व्हर कंपोनेंट्स सर्व्हरवर प्रस्तुत केले जातात, तर क्लायंट कंपोनेंट्स क्लायंटवर प्रस्तुत केले जातात. हे तुम्हाला प्रत्येक कंपोनेंटसाठी त्याच्या आवश्यकतेनुसार सर्वोत्तम दृष्टिकोन निवडण्याची परवानगी देते.

सर्व्हर कंपोनेंट्स

सर्व्हर कंपोनेंट्स ॲप राउटरमध्ये डीफॉल्ट आहेत. ते तुम्हाला स्वतंत्र API रूट्सची गरज न पडता थेट तुमच्या कंपोनेंट्समध्ये डेटा फेच करण्याची परवानगी देतात. यामुळे कामगिरी सुधारू शकते आणि तुमचा कोड सोपा होऊ शकतो.

उदाहरण:

// app/products/page.js
import React from 'react';

export default async function ProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <h1>उत्पादने</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // डेटाबेस किंवा एपीआयमधून डेटा मिळवण्याचे अनुकरण करा
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'उत्पादन A' },
        { id: 2, name: 'उत्पादन B' },
        { id: 3, name: 'उत्पादन C' },
      ];
      resolve(products);
    }, 500);
  });
}

या उदाहरणात, `fetchProducts` फंक्शन थेट `ProductsPage` कंपोनेंटमध्ये कॉल केले जाते. कंपोनेंट सर्व्हरवर प्रस्तुत केला जातो आणि HTML क्लायंटला पाठवण्यापूर्वी डेटा फेच केला जातो.

क्लायंट कंपोनेंट्स

क्लायंट कंपोनेंट्स क्लायंटवर प्रस्तुत केले जातात आणि तुम्हाला इव्हेंट लिस्नर्स, स्टेट आणि ब्राउझर APIs सारख्या क्लायंट-साइड वैशिष्ट्यांचा वापर करण्याची परवानगी देतात. क्लायंट कंपोनेंट वापरण्यासाठी, तुम्हाला फाईलच्या शीर्षस्थानी `'use client'` निर्देश जोडावा लागेल.

उदाहरण:

// app/counter/page.js
'use client'

import React, { useState } from 'react';

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>काउंटर</h1>
      <p>काउंट: {count}</p>
      <button onClick={() => setCount(count + 1)}>वाढवा</button>
    </div>
  );
}

या उदाहरणात, `CounterPage` कंपोनेंट एक क्लायंट कंपोनेंट आहे कारण तो `useState` हुक वापरतो. `'use client'` निर्देश Next.js ला हा कंपोनेंट क्लायंटवर प्रस्तुत करण्यास सांगतो.

प्रगत राउटिंग तंत्र

ॲप राउटर अनेक प्रगत राउटिंग तंत्रे ऑफर करते ज्याचा वापर जटिल आणि अत्याधुनिक ऍप्लिकेशन्स तयार करण्यासाठी केला जाऊ शकतो.

1. रूट हँडलर्स

रूट हँडलर्स तुम्हाला तुमच्या `app` डिरेक्टरीमध्ये API एंडपॉइंट्स तयार करण्याची परवानगी देतात. यामुळे स्वतंत्र `pages/api` डिरेक्टरीची गरज नाहीशी होते. रूट हँडलर्स `route.js` (किंवा `route.ts`) नावाच्या फाईल्समध्ये परिभाषित केले जातात आणि ते विविध HTTP पद्धती (उदा., `GET`, `POST`, `PUT`, `DELETE`) हाताळणारी फंक्शन्स निर्यात करतात.

उदाहरण:

// app/api/users/route.js
import { NextResponse } from 'next/server'

export async function GET(request) {
  // डेटाबेसमधून वापरकर्ते आणण्याचे अनुकरण करा
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('मिळालेला डेटा:', body)
  return NextResponse.json({ message: 'वापरकर्ता तयार झाला' }, { status: 201 })
}

हे उदाहरण `/api/users` वर एक रूट हँडलर परिभाषित करते जो `GET` आणि `POST` दोन्ही विनंत्या हाताळतो. `GET` फंक्शन वापरकर्त्यांची सूची परत करते, आणि `POST` फंक्शन एक नवीन वापरकर्ता तयार करते.

2. एकाधिक लेआउट्ससह रूट ग्रुप्स

तुम्ही तुमच्या ऍप्लिकेशनच्या वेगवेगळ्या विभागांसाठी वेगवेगळे लेआउट्स तयार करण्यासाठी रूट ग्रुप्स आणि लेआउट्स एकत्र करू शकता. हे अशा परिस्थितींसाठी उपयुक्त आहे जिथे तुम्हाला तुमच्या साईटच्या वेगवेगळ्या भागांसाठी वेगळा हेडर किंवा साईडबार हवा असतो.

उदाहरण:

app/
  (marketing)/
    layout.js  // मार्केटिंग लेआउट
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // ॲडमिन लेआउट
    dashboard/
      page.js

या उदाहरणात, `about` आणि `contact` पेजेस `marketing` लेआउट वापरतील, तर `dashboard` पेज `admin` लेआउट वापरेल.

3. मिडलवेअर

मिडलवेअर तुम्हाला तुमच्या ऍप्लिकेशनद्वारे विनंती हाताळण्यापूर्वी कोड चालवण्याची परवानगी देते. हे प्रमाणीकरण, अधिकृतता, लॉगिंग आणि वापरकर्त्यांना त्यांच्या स्थान किंवा डिव्हाइसनुसार पुनर्निर्देशित करण्यासारख्या कार्यांसाठी उपयुक्त आहे.

मिडलवेअर तुमच्या प्रोजेक्टच्या मुळाशी `middleware.js` (किंवा `middleware.ts`) नावाच्या फाईलमध्ये परिभाषित केले जाते.

उदाहरण:

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  // वापरकर्ता प्रमाणीकृत आहे की नाही ते तपासा
  const isAuthenticated = false; // तुमच्या प्रमाणीकरण तर्काने बदला

  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// अधिक जाणून घेण्यासाठी खालील "Matching Paths" पहा
export const config = {
  matcher: '/admin/:path*',
}

हे उदाहरण असे मिडलवेअर परिभाषित करते जे वापरकर्त्याला `/admin` खालील कोणत्याही रूटवर प्रवेश करण्याची परवानगी देण्यापूर्वी तो प्रमाणीकृत आहे की नाही हे तपासते. जर वापरकर्ता प्रमाणीकृत नसेल, तर त्यांना `/login` पेजवर पुनर्निर्देशित केले जाते.

फाईल-आधारित राउटिंगसाठी सर्वोत्तम पद्धती

ॲप राउटरच्या फाईल-आधारित राउटिंग सिस्टीमचा जास्तीत जास्त फायदा घेण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

• तुमची फाईल रचना संघटित ठेवा: अर्थपूर्ण फोल्डर नावे वापरा आणि संबंधित फाईल्स एकत्र गटबद्ध करा.
• सामायिक UI साठी लेआउट्स वापरा: हेडर्स, फूटर्स, साईडबार आणि अनेक पेजेसवर सामायिक असलेल्या इतर घटकांसाठी लेआउट्स तयार करा.
• लोडिंग UIs वापरा: डेटा फेच करणाऱ्या किंवा इतर असिंक्रोनस ऑपरेशन्स करणाऱ्या रूट्ससाठी लोडिंग UIs प्रदान करा.
• त्रुटी व्यवस्थित हाताळा: त्रुटी आल्यावर चांगला वापरकर्ता अनुभव देण्यासाठी कस्टम एरर UIs तयार करा.
• संघटनेसाठी रूट ग्रुप्स वापरा: URL स्ट्रक्चरवर परिणाम न करता तुमचे रूट्स संघटित करण्यासाठी रूट ग्रुप्स वापरा.
• कामगिरीसाठी सर्व्हर कंपोनेंट्सचा लाभ घ्या: सर्व्हरवर डेटा फेच करण्यासाठी आणि UI रेंडर करण्यासाठी सर्व्हर कंपोनेंट्स वापरा, ज्यामुळे कामगिरी आणि SEO सुधारते.
• आवश्यक असेल तेव्हा क्लायंट कंपोनेंट्स वापरा: जेव्हा तुम्हाला इव्हेंट लिस्नर्स, स्टेट आणि ब्राउझर APIs सारख्या क्लायंट-साइड वैशिष्ट्यांचा वापर करण्याची आवश्यकता असेल तेव्हा क्लायंट कंपोनेंट्स वापरा.

Next.js ॲप राउटरसह आंतरराष्ट्रीयीकरणाची उदाहरणे

Next.js ॲप राउटर फाईल-आधारित राउटिंगद्वारे आंतरराष्ट्रीयीकरण (i18n) सोपे करते. येथे तुम्ही i18n प्रभावीपणे कसे लागू करू शकता ते दिले आहे:

1. सब-पाथ राउटिंग

सब-पाथ वापरून तुमच्या रूट्सला लोकेलनुसार संघटित करा. उदाहरणार्थ:

app/
  [locale]/
    page.tsx         // लोकेलसाठी होम पेज
    about/
      page.tsx     // लोकेलसाठी अबाउट पेज

// app/[locale]/page.tsx
import { getTranslations } from './dictionaries';

export default async function HomePage({ params: { locale } }) {
  const t = await getTranslations(locale);
  return (<h1>{t.home.title}</h1>);
}

// dictionaries.js
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  es: () => import('./dictionaries/es.json').then((module) => module.default),
};

export const getTranslations = async (locale) => {
  try {
    return dictionaries[locale]() ?? dictionaries.en();
  } catch (error) {
    console.error(`Failed to load translations for locale ${locale}`, error);
    return dictionaries.en();
  }
};

या सेटअपमध्ये, `[locale]` डायनॅमिक रूट सेगमेंट विविध लोकेल (उदा., `/en`, `/es`) हाताळतो. भाषांतरे लोकेलच्या आधारावर डायनॅमिकली लोड केली जातात.

2. डोमेन राउटिंग

अधिक प्रगत दृष्टिकोनासाठी, आपण प्रत्येक लोकेलसाठी भिन्न डोमेन किंवा सबडोमेन वापरू शकता. यासाठी अनेकदा आपल्या होस्टिंग प्रदात्यासह अतिरिक्त कॉन्फिगरेशनची आवश्यकता असते.

3. लोकेल डिटेक्शनसाठी मिडलवेअर

वापरकर्त्याच्या पसंतीचे लोकेल स्वयंचलितपणे शोधण्यासाठी आणि त्यानुसार त्यांना पुनर्निर्देशित करण्यासाठी मिडलवेअर वापरा.

// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

let locales = ['en', 'es', 'fr'];

function getLocale(request) {
  const negotiatorHeaders = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
  let languages = new Negotiator({ headers: negotiatorHeaders }).languages();

  try {
      return match(languages, locales, 'en'); // "en" ला डीफॉल्ट लोकेल म्हणून वापरा
  } catch (error) {
      console.error("Error matching locale:", error);
      return 'en'; // जुळणारे अयशस्वी झाल्यास इंग्रजीवर परत या
  }
}

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    );
  }
}

export const const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

हे मिडलवेअर तपासते की विनंती केलेल्या पाथमध्ये लोकेल प्रीफिक्स आहे की नाही. नसल्यास, ते `Accept-Language` हेडर वापरून वापरकर्त्याचे पसंतीचे लोकेल ओळखते आणि त्यांना योग्य लोकेल-विशिष्ट पाथवर पुनर्निर्देशित करते. लोकेल निगोशिएशन हाताळण्यासाठी `@formatjs/intl-localematcher` आणि `negotiator` सारख्या लायब्ररी वापरल्या जातात.

Next.js ॲप राउटर आणि जागतिक सुलभता (Global Accessibility)

जागतिक स्तरावर सुलभ वेब ऍप्लिकेशन्स तयार करण्यासाठी सुलभतेच्या (a11y) तत्त्वांचा काळजीपूर्वक विचार करणे आवश्यक आहे. Next.js ॲप राउटर सुलभ अनुभव तयार करण्यासाठी एक ठोस पाया प्रदान करतो, परंतु आपले ऍप्लिकेशन सर्वांसाठी, त्यांच्या क्षमता विचारात न घेता, वापरण्यायोग्य आहे याची खात्री करण्यासाठी सर्वोत्तम पद्धती लागू करणे आवश्यक आहे.

मुख्य सुलभता विचार

1. सिमेंटिक HTML: आपल्या सामग्रीची रचना करण्यासाठी सिमेंटिक HTML घटक (उदा., `<article>`, `<nav>`, `<aside>`, `<main>`) वापरा. हे सहाय्यक तंत्रज्ञानाला अर्थ प्रदान करते आणि वापरकर्त्यांना आपली साईट अधिक सहजपणे नेव्हिगेट करण्यास मदत करते.
2. ARIA विशेषता: कस्टम कंपोनंट्स आणि विजेट्सची सुलभता वाढविण्यासाठी ARIA (Accessible Rich Internet Applications) विशेषता वापरा. ARIA विशेषता घटकांची भूमिका, स्थिती आणि गुणधर्मांबद्दल सहाय्यक तंत्रज्ञानाला अतिरिक्त माहिती प्रदान करतात.
3. कीबोर्ड नेव्हिगेशन: सर्व परस्परसंवादी घटक कीबोर्डद्वारे प्रवेश करण्यायोग्य असल्याची खात्री करा. वापरकर्त्यांनी `Tab` की वापरून आपल्या ऍप्लिकेशनमधून नेव्हिगेट करण्यास आणि `Enter` किंवा `Space` की वापरून घटकांशी संवाद साधण्यास सक्षम असावे.
4. रंग कॉन्ट्रास्ट: दृष्य कमजोरी असलेल्या वापरकर्त्यांसाठी वाचनीयता सुनिश्चित करण्यासाठी मजकूर आणि पार्श्वभूमी यांच्यात पुरेसा रंग कॉन्ट्रास्ट वापरा. वेब सामग्री सुलभता मार्गदर्शक तत्त्वे (WCAG) सामान्य मजकुरासाठी किमान 4.5:1 आणि मोठ्या मजकुरासाठी 3:1 चे कॉन्ट्रास्ट गुणोत्तर शिफारस करतात.
5. इमेज ऑल्ट टेक्स्ट: सर्व प्रतिमांसाठी वर्णनात्मक ऑल्ट टेक्स्ट प्रदान करा. ऑल्ट टेक्स्ट प्रतिमांसाठी एक मजकूर पर्याय प्रदान करते जो स्क्रीन रीडरद्वारे वाचला जाऊ शकतो.
6. फॉर्म लेबल्स: `<label>` घटक वापरून फॉर्म लेबल्स त्यांच्या संबंधित इनपुट फील्डशी संबद्ध करा. यामुळे वापरकर्त्यांना प्रत्येक फील्डमध्ये कोणती माहिती अपेक्षित आहे हे स्पष्ट होते.
7. स्क्रीन रीडर चाचणी: आपले ऍप्लिकेशन दृष्य कमजोरी असलेल्या वापरकर्त्यांसाठी सुलभ आहे याची खात्री करण्यासाठी स्क्रीन रीडरसह चाचणी करा. लोकप्रिय स्क्रीन रीडर्समध्ये NVDA, JAWS आणि VoiceOver यांचा समावेश आहे.

Next.js ॲप राउटरमध्ये सुलभता लागू करणे

1. Next.js लिंक कंपोनंट वापरा: नेव्हिगेशनसाठी `<Link>` कंपोनंट वापरा. हे प्रीफेचिंग आणि फोकस व्यवस्थापन यासारख्या अंगभूत सुलभता वैशिष्ट्ये प्रदान करते.
2. फोकस व्यवस्थापन: पेजेसमध्ये नेव्हिगेट करताना किंवा मॉडेल्स उघडताना, फोकस योग्यरित्या व्यवस्थापित केला गेला आहे याची खात्री करा. नवीन पेज किंवा मॉडेलवरील सर्वात तार्किक घटकावर फोकस सेट केला पाहिजे.
3. सुलभ कस्टम कंपोनंट्स: कस्टम कंपोनंट्स तयार करताना, ते वर नमूद केलेल्या तत्त्वांचे पालन करून सुलभ असल्याची खात्री करा. आपले कंपोनंट्स सर्वांसाठी वापरण्यायोग्य बनवण्यासाठी सिमेंटिक HTML, ARIA विशेषता आणि कीबोर्ड नेव्हिगेशन वापरा.
4. लिंटिंग आणि चाचणी: आपल्या कोडमधील संभाव्य सुलभता समस्या ओळखण्यासाठी ESLint सारख्या लिंटिंग साधनांचा सुलभता प्लगइन्ससह वापर करा. तसेच, आपल्या ऍप्लिकेशनची सुलभता उल्लंघनांसाठी चाचणी करण्यासाठी स्वयंचलित चाचणी साधने वापरा.

निष्कर्ष

Next.js ॲप राउटरची फाईल-आधारित राउटिंग सिस्टीम आपल्या ऍप्लिकेशन्सची रचना आणि नेव्हिगेशनसाठी एक शक्तिशाली आणि अंतर्ज्ञानी मार्ग प्रदान करते. या मार्गदर्शिकेत नमूद केलेल्या मुख्य संकल्पना आणि सर्वोत्तम पद्धती समजून घेऊन, आपण मजबूत, स्केलेबल आणि देखभाल करण्यायोग्य Next.js ऍप्लिकेशन्स तयार करू शकता. ॲप राउटरच्या विविध वैशिष्ट्यांसह प्रयोग करा आणि ते आपल्या डेव्हलपमेंट वर्कफ्लोला कसे सोपे करू शकते आणि वापरकर्ता अनुभव कसा सुधारू शकते हे शोधा.