M

MLOG

मराठी

Next.js मध्ये स्केलेबल आणि डायनॅमिक UI अनलॉक करा. आमचे सर्वसमावेशक मार्गदर्शक संस्थेसाठी रूट ग्रुप्स आणि जटिल डॅशबोर्डसाठी पॅरलल रूट्स कव्हर करते. आताच शिका!

Next.js ॲप राउटरमध्ये प्राविण्य: रूट ग्रुप्स आणि पॅरलल रूट्स आर्किटेक्चरचा सखोल अभ्यास

Next.js ॲप राउटरच्या प्रकाशनाने विकसकांना लोकप्रिय React फ्रेमवर्कसह वेब ॲप्लिकेशन्स तयार करण्याच्या पद्धतीत एक मोठे बदल घडवले. पेजेस राउटरच्या फाइल-आधारित पद्धतींपासून दूर जाऊन, ॲप राउटरने एक अधिक शक्तिशाली, लवचिक आणि सर्व्हर-केंद्रित मॉडेल सादर केले. हे बदल आपल्याला अधिक नियंत्रण आणि संस्थेसह अत्यंत जटिल आणि कार्यक्षम वापरकर्ता इंटरफेस (user interfaces) तयार करण्यास सक्षम करते. सादर केलेल्या सर्वात परिवर्तनात्मक वैशिष्ट्यांमध्ये रूट ग्रुप्स (Route Groups) आणि पॅरलल रूट्स (Parallel Routes) यांचा समावेश आहे.

एंटरप्राइझ-ग्रेड ॲप्लिकेशन्स तयार करण्याचे ध्येय असलेल्या विकसकांसाठी, या दोन संकल्पनांवर प्रभुत्व मिळवणे केवळ फायदेशीर नाही - ते आवश्यक आहे. ते लेआउट व्यवस्थापन, मार्ग संघटन आणि डॅशबोर्डसारख्या डायनॅमिक, मल्टी-पॅनल इंटरफेसच्या निर्मितीशी संबंधित सामान्य आर्किटेक्चरल आव्हाने सोडवतात. हे मार्गदर्शक रूट ग्रुप्स आणि पॅरलल रूट्सचे सर्वसमावेशक अन्वेषण प्रदान करते, ज्यात मूलभूत संकल्पनांपासून ते प्रगत अंमलबजावणी धोरणे आणि जागतिक विकसक प्रेक्षकांसाठी सर्वोत्तम पद्धतींचा समावेश आहे.

Next.js ॲप राउटर समजून घेणे: एक जलद उजळणी

आपण तपशीलांमध्ये जाण्यापूर्वी, चला ॲप राउटरच्या मुख्य तत्त्वांचा थोडक्यात आढावा घेऊया. त्याची रचना डिरेक्टरी-आधारित प्रणालीवर आधारित आहे जिथे फोल्डर्स URL सेगमेंट्स परिभाषित करतात. या फोल्डर्समधील विशेष फाइल्स त्या सेगमेंटसाठी UI आणि वर्तन परिभाषित करतात:

ही रचना, React Server Components (RSCs) च्या डीफॉल्ट वापरासह, सर्व्हर-फर्स्ट दृष्टिकोनाला प्रोत्साहन देते ज्यामुळे कार्यक्षमता आणि डेटा-फेचिंग पॅटर्नमध्ये लक्षणीय सुधारणा होऊ शकते. रूट ग्रुप्स आणि पॅरलल रूट्स या पायावर आधारित प्रगत पद्धती आहेत.

रूट ग्रुप्सचे रहस्य उलगडणे: सुव्यवस्थित आणि स्केलेबल प्रोजेक्टसाठी संघटन

जसजसे ॲप्लिकेशन वाढते, तसतसे रूट्सची संख्या हाताळणे अवघड होऊ शकते. आपल्याकडे मार्केटिंगसाठी पेजेसचा एक संच असू शकतो, वापरकर्ता प्रमाणीकरणासाठी दुसरा आणि मुख्य ॲप्लिकेशन डॅशबोर्डसाठी तिसरा. तार्किकदृष्ट्या, हे वेगळे विभाग आहेत, परंतु आपण आपल्या फाइल सिस्टममध्ये त्यांना आपल्या URLs मध्ये गोंधळ न घालता कसे संघटित कराल? हीच समस्या रूट ग्रुप्स सोडवतात.

रूट ग्रुप्स म्हणजे काय?

रूट ग्रुप ही एक अशी यंत्रणा आहे जी तुमच्या फाइल्स आणि रूट सेगमेंट्सना तार्किक गटांमध्ये संघटित करते, URL स्ट्रक्चरवर कोणताही परिणाम न करता. तुम्ही फोल्डरच्या नावाला कंसात (parentheses) टाकून रूट ग्रुप तयार करता, उदाहरणार्थ, (marketing) किंवा (app).

कंसातील फोल्डरचे नाव पूर्णपणे संस्थात्मक हेतूंसाठी आहे. Next.js URL पथ निश्चित करताना त्याकडे पूर्णपणे दुर्लक्ष करते. उदाहरणार्थ, app/(marketing)/about/page.js येथील फाइल /about या URL वर दिली जाईल, /(marketing)/about वर नाही.

रूट ग्रुप्सचे मुख्य उपयोग आणि फायदे

जरी साधे संघटन हा एक फायदा असला तरी, रूट ग्रुप्सची खरी शक्ती आपल्या ॲप्लिकेशनला वेगळ्या, सामायिक लेआउटसह विभागांमध्ये विभाजित करण्याच्या क्षमतेमध्ये आहे.

१. रूट सेगमेंट्ससाठी वेगवेगळे लेआउट्स तयार करणे

हा सर्वात सामान्य आणि शक्तिशाली उपयोग आहे. एका वेब ॲप्लिकेशनची कल्पना करा ज्यात दोन मुख्य विभाग आहेत:

रूट ग्रुप्सशिवाय, या विभागांना वेगवेगळे रूट लेआउट्स लागू करणे क्लिष्ट होईल. रूट ग्रुप्समुळे, ते आश्चर्यकारकपणे सोपे आहे. तुम्ही प्रत्येक ग्रुपमध्ये एक स्वतंत्र layout.js फाइल तयार करू शकता.

या परिस्थितीसाठी एक सामान्य फाइल रचना येथे आहे:

app/
├── (marketing)/
│   ├── layout.js      // मार्केटिंग हेडर/फूटरसह सार्वजनिक लेआउट
│   ├── page.js        // '/' येथे रेंडर होते
│   └── about/
│       └── page.js    // '/about' येथे रेंडर होते
├── (app)/
│   ├── layout.js      // साइडबारसह डॅशबोर्ड लेआउट
│   ├── dashboard/
│   │   └── page.js    // '/dashboard' येथे रेंडर होते
│   └── settings/
│       └── page.js    // '/settings' येथे रेंडर होते
└── layout.js          // रूट लेआउट (उदा. <html> आणि <body> टॅगसाठी)

या आर्किटेक्चरमध्ये:

२. एका सेगमेंटला सामायिक लेआउटमधून वगळणे

कधीकधी, विशिष्ट पेज किंवा विभागाला पॅरेंट लेआउटमधून पूर्णपणे बाहेर पडण्याची आवश्यकता असते. एक सामान्य उदाहरण म्हणजे चेकआउट प्रक्रिया किंवा एक विशेष लँडिंग पेज ज्यात मुख्य साइटचे नेव्हिगेशन नसावे. आपण रूटला अशा ग्रुपमध्ये ठेवून हे साध्य करू शकता जो उच्च-स्तरीय लेआउट शेअर करत नाही. हे जरी क्लिष्ट वाटत असले तरी, याचा अर्थ फक्त एका रूट ग्रुपला स्वतःचा टॉप-लेव्हल layout.js देणे आहे जो रूट लेआउटमधील `children` रेंडर करत नाही.

व्यावहारिक उदाहरण: एक मल्टी-लेआउट ॲप्लिकेशन तयार करणे

चला वर वर्णन केलेल्या मार्केटिंग/ॲप रचनेची एक किमान आवृत्ती तयार करूया.

१. रूट लेआउट (app/layout.js)

हा लेआउट किमान आहे आणि प्रत्येक पेजला लागू होतो. तो आवश्यक HTML रचना परिभाषित करतो.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

२. मार्केटिंग लेआउट (app/(marketing)/layout.js)

या लेआउटमध्ये सार्वजनिक-मुखी हेडर आणि फूटर समाविष्ट आहे.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Marketing Header</header>
      <main>{children}</main>
      <footer>Marketing Footer</footer>
    </div>
  );
}

३. ॲप डॅशबोर्ड लेआउट (app/(app)/layout.js)

या लेआउटची रचना वेगळी आहे, ज्यात प्रमाणीकृत वापरकर्त्यांसाठी साइडबार आहे.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        Dashboard Sidebar
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

या रचनेसह, /about वर नेव्हिगेट केल्यावर पेज `MarketingLayout` सह रेंडर होईल, तर /dashboard वर नेव्हिगेट केल्यावर ते `AppLayout` सह रेंडर होईल. URL स्वच्छ आणि अर्थपूर्ण राहते, तर आपल्या प्रोजेक्टची फाइल रचना उत्तम प्रकारे संघटित आणि स्केलेबल असते.

पॅरलल रूट्ससह डायनॅमिक UI अनलॉक करणे

रूट ग्रुप्स ॲप्लिकेशनचे वेगवेगळे विभाग संघटित करण्यास मदत करतात, तर पॅरलल रूट्स एका वेगळ्या आव्हानाला सामोरे जातात: एकाच लेआउटमध्ये अनेक, स्वतंत्र पेज व्ह्यूज प्रदर्शित करणे. हे जटिल डॅशबोर्ड, सोशल मीडिया फीड्स, किंवा कोणत्याही UI साठी एक सामान्य आवश्यकता आहे जिथे वेगवेगळे पॅनेल्स एकाच वेळी रेंडर आणि व्यवस्थापित करणे आवश्यक आहे.

पॅरलल रूट्स म्हणजे काय?

पॅरलल रूट्स तुम्हाला एकाच लेआउटमध्ये एकाच वेळी एक किंवा अधिक पेजेस रेंडर करण्याची परवानगी देतात. हे रूट्स स्लॉट्स (slots) नावाच्या विशेष फोल्डर कन्व्हेन्शनचा वापर करून परिभाषित केले जातात. स्लॉट्स @folderName सिंटॅक्स वापरून तयार केले जातात. ते URL रचनेचा भाग नाहीत; त्याऐवजी, ते आपोआप जवळच्या सामायिक पॅरेंट `layout.js` फाइलला प्रॉप्स म्हणून पास केले जातात.

उदाहरणार्थ, जर तुमच्याकडे एक लेआउट असेल ज्याला टीम ॲक्टिव्हिटी फीड आणि ॲनालिटिक्स चार्ट बाजूबाजूला प्रदर्शित करण्याची आवश्यकता असेल, तर तुम्ही दोन स्लॉट्स परिभाषित करू शकता: `@team` आणि `@analytics`.

मूळ कल्पना: स्लॉट्स

स्लॉट्सना तुमच्या लेआउटमधील नावाचे प्लेसहोल्डर्स समजा. लेआउट फाइल स्पष्टपणे हे स्लॉट्स प्रॉप्स म्हणून स्वीकारते आणि त्यांना कुठे रेंडर करायचे हे ठरवते.

या लेआउट घटकाचा विचार करा:

// एक लेआउट जो दोन स्लॉट्स स्वीकारतो: 'team' आणि 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

येथे, `children`, `team`, आणि `analytics` हे सर्व स्लॉट्स आहेत. `children` हा एक निहित (implicit) स्लॉट आहे जो डिरेक्टरीमधील मानक `page.js` शी संबंधित आहे. `team` आणि `analytics` हे स्पष्ट (explicit) स्लॉट्स आहेत जे फाइल सिस्टममध्ये `@` प्रीफिक्ससह तयार करणे आवश्यक आहे.

मुख्य वैशिष्ट्ये आणि फायदे

एक वास्तविक-जगातील परिस्थिती: एक जटिल डॅशबोर्ड तयार करणे

चला /dashboard या URL वर एक डॅशबोर्ड डिझाइन करूया. त्यात एक मुख्य कंटेंट एरिया, एक टीम ॲक्टिव्हिटी पॅनल आणि एक परफॉर्मन्स ॲनालिटिक्स पॅनल असेल.

फाइल रचना:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // ॲनालिटिक्स स्लॉटसाठी UI
    │   └── loading.js     // विशेषतः ॲनालिटिक्ससाठी लोडिंग UI
    ├── @team/
    │   └── page.js          // टीम स्लॉटसाठी UI
    ├── layout.js            // स्लॉट्सचे आयोजन करणारा लेआउट
    └── page.js              // निहित 'children' स्लॉट (मुख्य कंटेंट)

१. डॅशबोर्ड लेआउट (app/dashboard/layout.js)

हा लेआउट तीन स्लॉट्स प्राप्त करतो आणि त्यांची मांडणी करतो.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // वास्तविक ऑथ लॉजिकने बदला

  return isLoggedIn ? (
    <div>
      <h1>Main Dashboard</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>Team Activity</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>Performance Analytics</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>Please log in to view the dashboard.</div>
  );
}

२. स्लॉट पेजेस (उदा., app/dashboard/@analytics/page.js)

प्रत्येक स्लॉटची `page.js` फाइल त्या विशिष्ट पॅनलसाठी UI समाविष्ट करते.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // नेटवर्क रिक्वेस्टचे अनुकरण करा
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>Page Views: {data.views}</p>
      <p>Revenue: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>Loading analytics data...</p>;
}

या सेटअपसह, जेव्हा वापरकर्ता /dashboard वर नेव्हिगेट करतो, तेव्हा Next.js `DashboardLayout` रेंडर करेल. लेआउटला dashboard/page.js, dashboard/@team/page.js, आणि dashboard/@analytics/page.js कडून रेंडर केलेला कंटेंट प्रॉप्स म्हणून मिळेल आणि त्यांना त्यानुसार ठेवेल. महत्त्वाचे म्हणजे, ॲनालिटिक्स पॅनल उर्वरित डॅशबोर्डच्या रेंडरिंगला ब्लॉक न करता ३ सेकंदांसाठी स्वतःची `loading.js` स्थिती दर्शवेल.

default.js सह न जुळणाऱ्या मार्गांना हाताळणे

एक महत्त्वाचा प्रश्न उद्भवतो: जर Next.js सध्याच्या URL साठी स्लॉटची सक्रिय स्थिती मिळवू शकला नाही तर काय होईल? उदाहरणार्थ, सुरुवातीच्या लोड किंवा पेज रीलोड दरम्यान, URL /dashboard असू शकते, जी @team किंवा `@analytics` स्लॉट्समध्ये काय दर्शवायचे याबद्दल विशिष्ट सूचना देत नाही. डीफॉल्टनुसार, Next.js 404 एरर रेंडर करेल.

हे टाळण्यासाठी, आपण पॅरलल रूटमध्ये default.js फाइल तयार करून एक फॉलबॅक UI प्रदान करू शकतो.

उदाहरण:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>No analytics data selected.</p>
    </div>
  );
}

आता, जर ॲनालिटिक्स स्लॉट जुळला नाही, तर Next.js 404 पेजऐवजी `default.js` चा कंटेंट रेंडर करेल. एक सुरळीत वापरकर्ता अनुभव तयार करण्यासाठी हे आवश्यक आहे, विशेषतः एका जटिल पॅरलल रूट सेटअपच्या सुरुवातीच्या लोडवर.

प्रगत आर्किटेक्चर्ससाठी रूट ग्रुप्स आणि पॅरलल रूट्स एकत्र करणे

ॲप राउटरची खरी शक्ती तेव्हा लक्षात येते जेव्हा तुम्ही त्याची वैशिष्ट्ये एकत्र करता. रूट ग्रुप्स आणि पॅरलल रूट्स अत्याधुनिक आणि अत्यंत संघटित ॲप्लिकेशन आर्किटेक्चर्स तयार करण्यासाठी एकत्र सुंदरपणे काम करतात.

उपयोग: एक मल्टी-मोडल कंटेंट व्ह्यूअर

एका मीडिया गॅलरी किंवा डॉक्युमेंट व्ह्यूअरसारख्या प्लॅटफॉर्मची कल्पना करा जिथे वापरकर्ता एक आयटम पाहू शकतो पण पार्श्वभूमी पेजचा संदर्भ न गमावता त्याचे तपशील पाहण्यासाठी एक मोडल विंडो देखील उघडू शकतो. याला अनेकदा "इंटरसेप्टिंग रूट" (Intercepting Route) म्हटले जाते आणि हे पॅरलल रूट्सवर आधारित एक शक्तिशाली पॅटर्न आहे.

चला एक फोटो गॅलरी तयार करूया. जेव्हा तुम्ही फोटोवर क्लिक करता, तेव्हा तो एका मोडलमध्ये उघडतो. पण जर तुम्ही पेज रिफ्रेश केले किंवा थेट फोटोच्या URL वर नेव्हिगेट केले, तर त्याने त्या फोटोसाठी एक समर्पित पेज दाखवले पाहिजे.

फाइल रचना:

app/
├── @modal/(..)(..)photos/[id]/page.js  // मोडलसाठी इंटरसेप्ट केलेला रूट
├── photos/
│   └── [id]/
│       └── page.js                  // समर्पित फोटो पेज
├── layout.js                        // @modal स्लॉट प्राप्त करणारा रूट लेआउट
└── page.js                          // मुख्य गॅलरी पेज

स्पष्टीकरण:

हा पॅटर्न पॅरलल रूट्स (`@modal` स्लॉट) ला प्रगत राउटिंग कन्व्हेन्शन्ससह एकत्र करून एक अखंड वापरकर्ता अनुभव तयार करतो जो मॅन्युअली अंमलात आणणे खूप क्लिष्ट असते.

सर्वोत्तम पद्धती आणि सामान्य चुका

रूट ग्रुप्ससाठी सर्वोत्तम पद्धती

पॅरलल रूट्ससाठी सर्वोत्तम पद्धती

टाळण्यासारख्या सामान्य चुका

निष्कर्ष: वेब ॲप्लिकेशन्सचे भविष्य घडवणे

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

या शक्तिशाली आर्किटेक्चरल पॅटर्न्सना समजून घेऊन आणि एकत्र करून, तुम्ही साध्या वेबसाइट्सच्या पलीकडे जाऊन अत्याधुनिक, कार्यक्षम आणि देखरेख करण्यायोग्य ॲप्लिकेशन्स तयार करू शकता जे आजच्या वापरकर्त्यांच्या मागण्या पूर्ण करतात. शिकण्याची प्रक्रिया क्लासिक पेजेस राउटरपेक्षा अधिक अवघड असू शकते, परंतु ॲप्लिकेशन आर्किटेक्चर आणि वापरकर्ता अनुभवाच्या बाबतीत मिळणारा परतावा प्रचंड आहे. तुमच्या पुढील प्रोजेक्टमध्ये या संकल्पनांसह प्रयोग सुरू करा आणि Next.js ची पूर्ण क्षमता अनलॉक करा.