Next.js ആപ്പ് ഡയറക്ടറി: ഒരു ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗ് വിപ്ലവം

Next.js വെബ് ഡെവലപ്‌മെന്റിന്റെ അതിരുകൾ നിരന്തരം ഭേദിച്ചുകൊണ്ടിരിക്കുന്നു, മികച്ച പ്രകടനവും, വിപുലീകരിക്കാവുന്നതും, ഉപയോക്തൃ-സൗഹൃദവുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ഡെവലപ്പർമാർക്ക് ശക്തമായ ടൂളുകളും ഫീച്ചറുകളും നൽകുന്നു. ആപ്പ് ഡയറക്ടറിയുടെ അവതരണം ഒരു സുപ്രധാന മുന്നേറ്റമാണ്, പ്രത്യേകിച്ചും ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗിലെ നൂതനമായ സമീപനത്തിൽ. ഈ ലേഖനം ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സംവിധാനത്തെക്കുറിച്ച് ആഴത്തിൽ പരിശോധിക്കുന്നു, അതിന്റെ ഗുണങ്ങൾ, പ്രധാന ആശയങ്ങൾ, Next.js ഉപയോഗിച്ച് ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിലെ പ്രായോഗിക പ്രത്യാഘാതങ്ങൾ എന്നിവ പര്യവേക്ഷണം ചെയ്യുന്നു.

Next.js-ലെ റൂട്ടിംഗിന്റെ പരിണാമം മനസ്സിലാക്കാം

ആപ്പ് ഡയറക്ടറിക്ക് മുമ്പ്, റൂട്ടിംഗിനായി Next.js ആശ്രയിച്ചിരുന്നത് പേജസ് ഡയറക്ടറിയെ ആയിരുന്നു. ഫലപ്രദമായിരുന്നെങ്കിലും, ഈ സമീപനത്തിന് ചില പരിമിതികൾ ഉണ്ടായിരുന്നു. പേജസ് ഡയറക്ടറി ഒരു ലളിതമായ ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗ് സിസ്റ്റം ഉപയോഗിച്ചു, അതിൽ `pages` ഡയറക്ടറിയിലെ ഓരോ ഫയലും ഒരു റൂട്ടുമായി ബന്ധപ്പെട്ടിരുന്നു. ഉദാഹരണത്തിന്, `pages/about.js` എന്നത് `/about` റൂട്ടിലേക്ക് മാപ്പ് ചെയ്യപ്പെടും.

പേജസ് ഡയറക്ടറി ലളിതമായിരുന്നെങ്കിലും, സങ്കീർണ്ണമായ ലേഔട്ടുകൾ, ഡാറ്റാ ഫെച്ചിംഗ് രീതികൾ, സെർവർ-സൈഡ് റെൻഡറിംഗ് പാറ്റേണുകൾ എന്നിവയ്ക്കുള്ള ബിൽറ്റ്-ഇൻ പിന്തുണ അതിന് ഇല്ലായിരുന്നു, പലപ്പോഴും ഡെവലപ്പർമാർക്ക് ഈ ഫീച്ചറുകൾ സ്വമേധയാ നടപ്പിലാക്കേണ്ടി വന്നു. കൂടാതെ, ഡാറ്റാ ഫെച്ചിംഗും കമ്പോണന്റ് റെൻഡറിംഗും തമ്മിലുള്ള അടുത്ത ബന്ധം ചിലപ്പോൾ പ്രകടനത്തിലെ തടസ്സങ്ങൾക്ക് കാരണമാകുമായിരുന്നു.

റിയാക്ട് സെർവർ കമ്പോണന്റ്സ്, ലേഔട്ടുകൾ, മറ്റ് നൂതന ഫീച്ചറുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി കൂടുതൽ വഴക്കമുള്ളതും ശക്തവുമായ ഒരു റൂട്ടിംഗ് സിസ്റ്റം അവതരിപ്പിച്ചുകൊണ്ട് ആപ്പ് ഡയറക്ടറി ഈ പരിമിതികളെ അഭിസംബോധന ചെയ്യുന്നു. ഇത് ഒരു ലളിതമായ ഫയൽ-ടു-റൂട്ട് മാപ്പിംഗിനപ്പുറം നീങ്ങുകയും ആപ്ലിക്കേഷൻ റൂട്ടുകളും ലേഔട്ടുകളും നിർവചിക്കുന്നതിന് കൂടുതൽ ഡിക്ലറേറ്റീവും കോമ്പോസിബിളുമായ ഒരു സമീപനം വാഗ്ദാനം ചെയ്യുകയും ചെയ്യുന്നു.

ആപ്പ് ഡയറക്ടറി അവതരിപ്പിക്കുന്നു: റൂട്ടിംഗിനായുള്ള ഒരു പുതിയ മാതൃക

നിങ്ങളുടെ Next.js പ്രോജക്റ്റിന്റെ റൂട്ടിൽ `app` ഫോൾഡറിനുള്ളിൽ സ്ഥിതി ചെയ്യുന്ന ആപ്പ് ഡയറക്ടറി, റൂട്ടിംഗിന് അടിസ്ഥാനപരമായി വ്യത്യസ്തമായ ഒരു സമീപനം അവതരിപ്പിക്കുന്നു. ഫയലുകളെ നേരിട്ട് റൂട്ടുകളിലേക്ക് മാപ്പ് ചെയ്യുന്നതിനുപകരം, ആപ്പ് ഡയറക്ടറി ഒരു കൺവെൻഷൻ അധിഷ്ഠിത സിസ്റ്റം ഉപയോഗിക്കുന്നു, അതിൽ ഡയറക്ടറികളുടെ ഘടനയും പ്രത്യേക ഫയലുകളും ആപ്ലിക്കേഷന്റെ റൂട്ടുകളെ നിർണ്ണയിക്കുന്നു.

ഈ സമീപനം നിരവധി പ്രധാന നേട്ടങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു:

മെച്ചപ്പെട്ട ഓർഗനൈസേഷൻ: ആപ്പ് ഡയറക്ടറിയുടെ ശ്രേണിപരമായ ഘടന മികച്ച ഓർഗനൈസേഷനും കോഡ് മെയിന്റനബിലിറ്റിയും പ്രോത്സാഹിപ്പിക്കുന്നു. നിങ്ങൾക്ക് ബന്ധപ്പെട്ട കമ്പോണന്റുകളും റൂട്ടുകളും സബ്ഡയറക്ടറികൾക്കുള്ളിൽ യുക്തിസഹമായി ഗ്രൂപ്പ് ചെയ്യാം.
മെച്ചപ്പെട്ട പ്രകടനം: റിയാക്ട് സെർവർ കമ്പോണന്റുകളും നൂതന ഡാറ്റാ ഫെച്ചിംഗ് കഴിവുകളും പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും ക്ലയന്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് കുറയ്ക്കാനും ആപ്പ് ഡയറക്ടറി ഡെവലപ്പർമാരെ പ്രാപ്തരാക്കുന്നു.
ഡിക്ലറേറ്റീവ് റൂട്ടിംഗ്: ആപ്പ് ഡയറക്ടറിയുടെ ഫയൽ അധിഷ്ഠിത സമീപനം ഡെവലപ്പർമാരെ റൂട്ടുകളും ലേഔട്ടുകളും ഡിക്ലറേറ്റീവ് ആയി നിർവചിക്കാൻ അനുവദിക്കുന്നു, ഇത് ആപ്ലിക്കേഷന്റെ ഘടന കൂടുതൽ സുതാര്യവും മനസ്സിലാക്കാൻ എളുപ്പവുമാക്കുന്നു.
ബിൽറ്റ്-ഇൻ ലേഔട്ടുകളും ടെംപ്ലേറ്റുകളും: ഒന്നിലധികം പേജുകളിൽ പങ്കിടുന്ന ലേഔട്ടുകളും ടെംപ്ലേറ്റുകളും നിർവചിക്കുന്നതിന് ആപ്പ് ഡയറക്ടറി ബിൽറ്റ്-ഇൻ പിന്തുണ നൽകുന്നു, ഇത് കോഡ് ഡ്യൂപ്ലിക്കേഷൻ കുറയ്ക്കുകയും സ്ഥിരത മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സിസ്റ്റത്തിലെ പ്രധാന ആശയങ്ങൾ

ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സിസ്റ്റം ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, അതിന്റെ പ്രവർത്തനത്തിന് അടിവരയിടുന്ന പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്:

1. റൂട്ട് സെഗ്‌മെന്റുകളും ഫോൾഡറുകളും

`app` ഡയറക്ടറിക്കുള്ളിലെ ഓരോ ഫോൾഡറും ഒരു റൂട്ട് സെഗ്‌മെന്റിനെ പ്രതിനിധീകരിക്കുന്നു. ഫോൾഡറിന്റെ പേര് URL-ലെ പാത്ത് സെഗ്‌മെന്റുമായി യോജിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു `app/blog/posts` ഫോൾഡർ ഘടന `/blog/posts` റൂട്ടിലേക്ക് മാപ്പ് ചെയ്യും.

ഈ ഘടന പരിഗണിക്കുക:

app/
  blog/
    posts/
      page.js

ഈ ഘടന `/blog/posts` എന്നതിൽ ഒരു റൂട്ട് നിർവചിക്കുന്നു. `posts` ഫോൾഡറിലെ `page.js` ഫയലാണ് റൂട്ട് സെഗ്‌മെന്റ് കമ്പോണന്റ്, ഇത് ആ റൂട്ടിനുള്ള ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നു.

2. `page.js` ഫയൽ: റൂട്ട് ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നു

page.js (അല്ലെങ്കിൽ ടൈപ്പ്സ്ക്രിപ്റ്റിനായി page.tsx) ഫയൽ ഒരു പ്രത്യേക ഫയലാണ്, അത് ഒരു നിർദ്ദിഷ്ട റൂട്ട് സെഗ്‌മെന്റിനായി റെൻഡർ ചെയ്യേണ്ട ഉള്ളടക്കം നിർവചിക്കുന്നു. ഇത് ആ റൂട്ടിന്റെ എൻട്രി പോയിന്റാണ്. ഈ ഫയൽ അതിന്റെ ഡിഫോൾട്ട് എക്സ്പോർട്ടായി ഒരു റിയാക്ട് കമ്പോണന്റ് എക്സ്പോർട്ട് ചെയ്യണം.

ഉദാഹരണം:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>ബ്ലോഗ് പോസ്റ്റുകൾ</h1>
      <p>ബ്ലോഗ് പോസ്റ്റുകളുടെ ലിസ്റ്റ് ഇവിടെ പ്രദർശിപ്പിക്കും.</p>
    </div>
  );
}

3. ലേഔട്ടുകൾ: പങ്കിട്ട യുഐ നിർവചിക്കുന്നു

ലേഔട്ടുകൾ ഒന്നിലധികം പേജുകളിലോ റൂട്ട് സെഗ്‌മെന്റുകളിലോ പങ്കിടുന്ന യുഐ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ലേഔട്ടിൽ ഹെഡറുകൾ, ഫൂട്ടറുകൾ, സൈഡ്‌ബാറുകൾ അല്ലെങ്കിൽ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ഒരു വിഭാഗത്തിലുടനീളം സ്ഥിരമായിരിക്കേണ്ട മറ്റേതെങ്കിലും കമ്പോണന്റുകൾ പോലുള്ള ഘടകങ്ങൾ അടങ്ങിയിരിക്കാം. ലേഔട്ടുകൾ `layout.js` (അല്ലെങ്കിൽ `layout.tsx`) ഫയൽ ഉപയോഗിച്ചാണ് നിർവചിക്കുന്നത്.

ലേഔട്ടുകൾ നെസ്റ്റഡ് ആണ്. ഇതിനർത്ഥം റൂട്ട് ലേഔട്ട് (`app/layout.js`) മുഴുവൻ ആപ്ലിക്കേഷനെയും പൊതിയുന്നു, കൂടാതെ നെസ്റ്റഡ് ലേഔട്ടുകൾ നിർദ്ദിഷ്ട റൂട്ട് സെഗ്‌മെന്റുകളെ പൊതിയുന്നു. ഒരു ലേഔട്ട് പങ്കിടുന്ന റൂട്ടുകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ, Next.js ലേഔട്ടിന്റെ സ്റ്റേറ്റ് സംരക്ഷിക്കുകയും അത് വീണ്ടും റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കുകയും ചെയ്യുന്നു, ഇത് മെച്ചപ്പെട്ട പ്രകടനത്തിനും സുഗമമായ ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുന്നു.

ഉദാഹരണം:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">ഹോം</a> |
            <a href="/blog">ബ്ലോഗ്</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>പകർപ്പവകാശം 2023</p>
        </footer>
      </body>
    </html>
  );
}

ഈ ഉദാഹരണത്തിൽ, `RootLayout` മുഴുവൻ ആപ്ലിക്കേഷന്റെയും അടിസ്ഥാന HTML ഘടന, ഹെഡർ, ഫൂട്ടർ, നാവിഗേഷൻ എന്നിവ നിർവചിക്കുന്നു. `app` ഡയറക്ടറിയിൽ റെൻഡർ ചെയ്യുന്ന ഏത് പേജും ഈ ലേഔട്ടിനാൽ പൊതിഞ്ഞിരിക്കും.

4. ടെംപ്ലേറ്റുകൾ: റൂട്ടുകൾക്കിടയിൽ സ്റ്റേറ്റ് സംരക്ഷിക്കുന്നു

ലേഔട്ടുകൾക്ക് സമാനമായി, ടെംപ്ലേറ്റുകളും ചൈൽഡ് റൂട്ടുകളെ പൊതിയുന്നു. എന്നിരുന്നാലും, ലേഔട്ടുകളിൽ നിന്ന് വ്യത്യസ്തമായി, ടെംപ്ലേറ്റുകൾ ഓരോ ചൈൽഡ് റൂട്ടിനും ഒരു പുതിയ കമ്പോണന്റ് ഇൻസ്റ്റൻസ് സൃഷ്ടിക്കുന്നു. ഇതിനർത്ഥം ടെംപ്ലേറ്റിനുള്ളിലെ റൂട്ടുകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ടെംപ്ലേറ്റിന്റെ സ്റ്റേറ്റ് സംരക്ഷിക്കപ്പെടുന്നില്ല എന്നാണ്. റൂട്ട് ട്രാൻസിഷനുകളിൽ സ്റ്റേറ്റ് റീസെറ്റ് ചെയ്യാനോ പുനരാരംഭിക്കാനോ ആവശ്യമുള്ള സാഹചര്യങ്ങളിൽ ടെംപ്ലേറ്റുകൾ ഉപയോഗപ്രദമാണ്. ടെംപ്ലേറ്റുകൾ നിർമ്മിക്കാൻ template.js (അല്ലെങ്കിൽ template.tsx) ഉപയോഗിക്കുക.

5. റൂട്ട് ഗ്രൂപ്പുകൾ: URL സെഗ്‌മെന്റുകളില്ലാതെ റൂട്ടുകൾ ഓർഗനൈസുചെയ്യുന്നു

റൂട്ട് ഗ്രൂപ്പുകൾ URL ഘടനയെ ബാധിക്കാതെ ആപ്പ് ഡയറക്ടറിയിൽ നിങ്ങളുടെ റൂട്ടുകൾ ഓർഗനൈസുചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഫോൾഡർ പേരുകൾ ബ്രാക്കറ്റുകളിൽ പൊതിഞ്ഞാണ് റൂട്ട് ഗ്രൂപ്പുകൾ നിർവചിക്കുന്നത്, ഉദാ., `(group-name)`. ഈ ബ്രാക്കറ്റുകൾ Next.js-നോട് ഫോൾഡറിനെ ഒരു റൂട്ട് സെഗ്‌മെന്റായിട്ടല്ല, മറിച്ച് ഒരു ലോജിക്കൽ ഗ്രൂപ്പിംഗ് മെക്കാനിസമായി പരിഗണിക്കാൻ പറയുന്നു.

ധാരാളം റൂട്ടുകളുള്ള വലിയ ആപ്ലിക്കേഷനുകൾ ഓർഗനൈസുചെയ്യുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ വിഭാഗങ്ങളെ വേർതിരിക്കാൻ റൂട്ട് ഗ്രൂപ്പുകൾ ഉപയോഗിക്കാം, `(marketing)`, `(app)` എന്നിവ പോലെ. ഈ ഗ്രൂപ്പുകൾ ഫയൽ ഘടനയെ മാത്രമേ ബാധിക്കുകയുള്ളൂ, URL പാത്തുകളെ ബാധിക്കില്ല.

ഉദാഹരണം:

app/
  (marketing)/
    home/
      page.js  // /home-ൽ ലഭ്യമാണ്
    about/
      page.js  // /about-ൽ ലഭ്യമാണ്
  (app)/
    dashboard/
      page.js  // /dashboard-ൽ ലഭ്യമാണ്

6. ഡൈനാമിക് റൂട്ടുകൾ: വേരിയബിൾ സെഗ്‌മെന്റുകൾ കൈകാര്യം ചെയ്യുന്നു

വേരിയബിൾ സെഗ്‌മെന്റുകളുള്ള റൂട്ടുകൾ സൃഷ്ടിക്കാൻ ഡൈനാമിക് റൂട്ടുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ബ്ലോഗ് പോസ്റ്റുകൾ, ഉൽപ്പന്ന പേജുകൾ, അല്ലെങ്കിൽ ഉപയോക്തൃ പ്രൊഫൈലുകൾ പോലുള്ള ഡാറ്റയെ അടിസ്ഥാനമാക്കി റൂട്ടുകൾ ജനറേറ്റ് ചെയ്യേണ്ട സാഹചര്യങ്ങളിൽ ഇത് ഉപയോഗപ്രദമാണ്. ഡൈനാമിക് റൂട്ട് സെഗ്‌മെന്റുകൾ സെഗ്‌മെന്റ് നാമം സ്ക്വയർ ബ്രാക്കറ്റുകളിൽ ഉൾപ്പെടുത്തിയാണ് നിർവചിക്കുന്നത്, ഉദാ., `[id]`. `id` എന്നത് `page.js` കമ്പോണന്റിനുള്ളിൽ ആക്സസ് ചെയ്യാൻ കഴിയുന്ന ഒരു പാരാമീറ്ററിനെ പ്രതിനിധീകരിക്കുന്നു.

ഉദാഹരണം:

app/
  blog/
    [slug]/
      page.js

ഈ ഉദാഹരണത്തിൽ, `[slug]` ഒരു ഡൈനാമിക് റൂട്ട് സെഗ്‌മെന്റാണ്. `/blog/my-first-post` പോലുള്ള ഒരു URL ഈ റൂട്ടുമായി പൊരുത്തപ്പെടും, കൂടാതെ `slug` പാരാമീറ്റർ `my-first-post` ആയി സജ്ജീകരിക്കും. `params` പ്രോപ്പ് ഉപയോഗിച്ച് `page.js` കമ്പോണന്റിനുള്ളിൽ `slug` പാരാമീറ്റർ ആക്സസ് ചെയ്യാൻ നിങ്ങൾക്ക് കഴിയും.

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

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>ബ്ലോഗ് പോസ്റ്റ്: {slug}</h1>
      <p>സ്ലഗ് ഉള്ള ബ്ലോഗ് പോസ്റ്റിന്റെ ഉള്ളടക്കം: {slug}</p>
    </div>
  );
}

ഈ ഡൈനാമിക് റൂട്ടുകൾക്ക് സാധ്യമായ മൂല്യങ്ങൾ നിങ്ങൾ ജനറേറ്റ് ചെയ്യേണ്ടതുണ്ട്. സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷനും (SSG) സെർവർ-സൈഡ് റെൻഡറിംഗിനും (SSR) Next.js `generateStaticParams` ഫംഗ്ഷൻ നൽകുന്നു. ബിൽഡ് സമയത്ത് ഏതൊക്കെ ഡൈനാമിക് റൂട്ടുകൾ പ്രീ-റെൻഡർ ചെയ്യണമെന്ന് വ്യക്തമാക്കാൻ ഈ ഫംഗ്ഷൻ നിങ്ങളെ അനുവദിക്കുന്നു.

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

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>ബ്ലോഗ് പോസ്റ്റ്: {slug}</h1>
      <p>സ്ലഗ് ഉള്ള ബ്ലോഗ് പോസ്റ്റിന്റെ ഉള്ളടക്കം: {slug}</p>
    </div>
  );
}

7. ക്യാച്ച്-ഓൾ സെഗ്‌മെന്റുകൾ: അജ്ഞാതമായ റൂട്ടുകൾ കൈകാര്യം ചെയ്യുന്നു

ക്യാച്ച്-ഓൾ സെഗ്‌മെന്റുകൾ ഒരു തരം ഡൈനാമിക് റൂട്ടാണ്, അത് ഒരു URL-ലെ എത്ര സെഗ്‌മെന്റുകളുമായും പൊരുത്തപ്പെടാൻ നിങ്ങളെ അനുവദിക്കുന്നു. സെഗ്‌മെന്റ് നാമത്തിന് മുന്നിൽ മൂന്ന് ഡോട്ടുകൾ ചേർത്താണ് അവ നിർവചിക്കുന്നത്, ഉദാ., `[...path]`. വിവിധതരം URL ഘടനകൾ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന വഴക്കമുള്ള റൂട്ടുകൾ നിർമ്മിക്കാൻ ക്യാച്ച്-ഓൾ സെഗ്‌മെന്റുകൾ ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

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

ഈ ഉദാഹരണത്തിൽ, `[...path]` ഒരു ക്യാച്ച്-ഓൾ സെഗ്‌മെന്റാണ്. `/docs/introduction`, `/docs/api/reference`, `/docs/examples/basic` പോലുള്ള URL-കൾ എല്ലാം ഈ റൂട്ടുമായി പൊരുത്തപ്പെടും. `path` പാരാമീറ്റർ പൊരുത്തപ്പെടുന്ന സെഗ്‌മെന്റുകൾ അടങ്ങിയ ഒരു അറേ ആയിരിക്കും.

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

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>ഡോക്യുമെന്റേഷൻ</h1>
      <p>പാത്ത്: {path.join('/')}</p>
    </div>
  );
}

8. പാരലൽ റൂട്ടുകൾ: ഒരേസമയം ഒന്നിലധികം പേജുകൾ റെൻഡർ ചെയ്യുന്നു

പാരലൽ റൂട്ടുകൾ ഒരേ ലേഔട്ടിൽ ഒരേസമയം ഒന്നിലധികം പേജുകൾ റെൻഡർ ചെയ്യാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നു. ഒന്നിലധികം പാനലുകളുള്ള ഡാഷ്‌ബോർഡുകൾ അല്ലെങ്കിൽ നിലവിലെ പേജിന് മുകളിൽ ദൃശ്യമാകുന്ന മോഡൽ ഡയലോഗുകൾ പോലുള്ള സങ്കീർണ്ണമായ യുഐ പാറ്റേണുകൾ നിർമ്മിക്കാൻ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. പാരലൽ റൂട്ടുകൾ @ ചിഹ്നം ഉപയോഗിച്ച് നിർവചിക്കുന്നു, ഉദാ., `@children`, `@modal`. അവ URL-ൽ നേരിട്ട് വ്യക്തമാക്കുകയോ `useRouter` ഹുക്ക് ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യുകയോ ചെയ്യാം.

ഉദാഹരണം:

app/
  @children/
    page.js // പ്രധാന ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നു
  @modal/
    login/
      page.js // ലോഗിൻ മോഡൽ റെൻഡർ ചെയ്യുന്നു

പാരലൽ റൂട്ടുകൾ പ്രദർശിപ്പിക്കുന്നതിന്, `` കമ്പോണന്റ് ഉപയോഗിക്കുക.

9. ഇന്റർസെപ്റ്റിംഗ് റൂട്ടുകൾ: സങ്കീർണ്ണമായ യുഐ ട്രാൻസിഷനുകൾ സൃഷ്ടിക്കുന്നു

ഇന്റർസെപ്റ്റിംഗ് റൂട്ടുകൾ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ മറ്റൊരു ഭാഗത്ത് നിന്ന് ഒരു റൂട്ട് നിലവിലെ റൂട്ടിന്റെ പശ്ചാത്തലത്തിൽ ലോഡ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിലവിലെ പേജിൽ നിന്ന് നാവിഗേറ്റ് ചെയ്യാതെ തന്നെ ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഒരു മോഡൽ ഡയലോഗ് പ്രദർശിപ്പിക്കുന്നത് പോലുള്ള സങ്കീർണ്ണമായ യുഐ ട്രാൻസിഷനുകൾ സൃഷ്ടിക്കാൻ ഇത് ഉപയോഗിക്കാം. അവ (...) സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിക്കുന്നു.

ആപ്പ് ഡയറക്ടറിയിലെ ഡാറ്റാ ഫെച്ചിംഗ്

ആപ്പ് ഡയറക്ടറി ഡാറ്റാ ഫെച്ച് ചെയ്യുന്നതിനുള്ള പുതിയതും മെച്ചപ്പെട്ടതുമായ വഴികൾ അവതരിപ്പിക്കുന്നു, റിയാക്ട് സെർവർ കമ്പോണന്റുകളും ബിൽറ്റ്-ഇൻ കാഷിംഗും റീവാലിഡേഷൻ കഴിവുകളുമുള്ള `fetch` എപിഐയും പ്രയോജനപ്പെടുത്തുന്നു. ഇത് മികച്ച പ്രകടനത്തിനും കൂടുതൽ കാര്യക്ഷമമായ ഡെവലപ്മെന്റ് അനുഭവത്തിനും കാരണമാകുന്നു. സെർവർ, ക്ലയന്റ് കമ്പോണന്റുകൾക്ക് ഡാറ്റാ ഫെച്ച് ചെയ്യാൻ കഴിയും, എന്നാൽ രീതി വ്യത്യസ്തമാണ്.

1. സെർവർ കമ്പോണന്റുകളിലെ ഡാറ്റാ ഫെച്ചിംഗ്

ആപ്പ് ഡയറക്ടറിയിലെ ഡിഫോൾട്ടായ സെർവർ കമ്പോണന്റുകൾക്ക് ഡാറ്റാബേസുകളിൽ നിന്നോ എപിഐകളിൽ നിന്നോ നേരിട്ട് ഡാറ്റാ ഫെച്ച് ചെയ്യാൻ കഴിയും. റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് കമ്പോണന്റ് ഫംഗ്ഷനുള്ളിലാണ് ഇത് ചെയ്യുന്നത്. സെർവർ കമ്പോണന്റുകൾ സെർവറിൽ പ്രവർത്തിക്കുന്നതിനാൽ, രഹസ്യ കീകളും ക്രെഡൻഷ്യലുകളും ക്ലയന്റിന് വെളിപ്പെടുത്താതെ സുരക്ഷിതമായി ഉൾപ്പെടുത്താൻ നിങ്ങൾക്ക് കഴിയും. `fetch` എപിഐ യാന്ത്രികമായി മെമ്മോയിസ് ചെയ്യപ്പെടുന്നു, അതായത് സമാനമായ ഡാറ്റാ അഭ്യർത്ഥനകൾ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യപ്പെടുന്നില്ല, ഇത് പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // തിരികെ ലഭിക്കുന്ന മൂല്യം സീരിയലൈസ് ചെയ്യപ്പെടുന്നില്ല
  // നിങ്ങൾക്ക് Date, Map, Set, തുടങ്ങിയവ തിരികെ നൽകാം.

  if (!res.ok) {
    // ഇത് ഏറ്റവും അടുത്തുള്ള `error.js` എറർ ബൗണ്ടറി സജീവമാക്കും
    throw new Error('ഡാറ്റാ ലഭ്യമാക്കുന്നതിൽ പരാജയപ്പെട്ടു');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2. ക്ലയന്റ് കമ്പോണന്റുകളിലെ ഡാറ്റാ ഫെച്ചിംഗ്

ഫയലിന്റെ മുകളിൽ 'use client' നിർദ്ദേശം ഉപയോഗിച്ച് സൂചിപ്പിക്കുന്ന ക്ലയന്റ് കമ്പോണന്റുകൾ ഉപയോക്താവിന്റെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. ക്ലയന്റ് കമ്പോണന്റുകളിലെ ഡാറ്റാ ഫെച്ചിംഗിൽ സാധാരണയായി `useEffect` ഹുക്കും `axios` അല്ലെങ്കിൽ `fetch` എപിഐ പോലുള്ള ഒരു ലൈബ്രറിയും ഉപയോഗിക്കുന്നു. ക്ലയന്റ് കമ്പോണന്റുകളിൽ നിന്ന് സെർവർ ഡാറ്റ മാറ്റാൻ സെർവർ ആക്ഷനുകൾ ഒരു സുരക്ഷിത മാർഗം നൽകുന്നു. എപിഐ എൻഡ്‌പോയിന്റുകൾ നേരിട്ട് വെളിപ്പെടുത്താതെ ക്ലയന്റ് കമ്പോണന്റുകൾക്ക് സെർവറിലെ ഡാറ്റയുമായി സംവദിക്കാൻ ഇത് സുരക്ഷിതമായ ഒരു മാർഗം നൽകുന്നു.

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>ലോഡ് ചെയ്യുന്നു...</div>;
  }

  return <div>{data.title}</div>;
}

ആപ്പ് ഡയറക്ടറിയുമായുള്ള എസ്.ഇ.ഒ പരിഗണനകൾ

ആപ്പ് ഡയറക്ടറിയുടെ സെർവർ-ഫസ്റ്റ് സമീപനം എസ്.ഇ.ഒ-ക്ക് കാര്യമായ നേട്ടങ്ങൾ നൽകുന്നു. ഉള്ളടക്കം സെർവറിൽ റെൻഡർ ചെയ്യുന്നതിനാൽ, സെർച്ച് എഞ്ചിൻ ക്രോളറുകൾക്ക് പേജ് ഉള്ളടക്കം എളുപ്പത്തിൽ ആക്സസ് ചെയ്യാനും ഇൻഡെക്സ് ചെയ്യാനും കഴിയും. എസ്.ഇ.ഒ-യുമായി ബന്ധപ്പെട്ട ചില പ്രധാന പരിഗണനകൾ ഇതാ:

മെറ്റാഡാറ്റ: ടൈറ്റിൽ, ഡിസ്ക്രിപ്ഷൻ, കീവേഡുകൾ എന്നിവ പോലുള്ള മെറ്റാഡാറ്റ നിർവചിക്കാൻ നിങ്ങളുടെ ലേഔട്ടുകളിലും പേജുകളിലും <head> ടാഗ് ഉപയോഗിക്കുക. Next.js മെറ്റാഡാറ്റ എപിഐ വഴി മെറ്റാഡാറ്റ കൈകാര്യം ചെയ്യുന്നതിന് ബിൽറ്റ്-ഇൻ പിന്തുണ നൽകുന്നു.
സെമാന്റിക് HTML: നിങ്ങളുടെ ഉള്ളടക്കം യുക്തിസഹമായി ക്രമീകരിക്കുന്നതിനും സെർച്ച് എഞ്ചിനുകൾക്ക് സന്ദർഭം നൽകുന്നതിനും സെമാന്റിക് HTML ഘടകങ്ങൾ (ഉദാ., <article>, <nav>, <aside>) ഉപയോഗിക്കുക.
പ്രവേശനക്ഷമത (Accessibility): നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഭിന്നശേഷിയുള്ള ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക. ചിത്രങ്ങൾക്ക് ആൾട്ടർനേറ്റീവ് ടെക്സ്റ്റ് നൽകുക, ശരിയായ ഹെഡിംഗ് ഹൈറാർക്കി ഉപയോഗിക്കുക, മതിയായ വർണ്ണ കോൺട്രാസ്റ്റ് ഉറപ്പാക്കുക എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.
പ്രകടനം: ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനും സെർച്ച് എഞ്ചിൻ റാങ്കിംഗുകൾ ഉയർത്തുന്നതിനും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുക. ക്ലയന്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് കുറയ്ക്കുക, ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക, കാഷിംഗ് പ്രയോജനപ്പെടുത്തുക എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സിസ്റ്റം ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സിസ്റ്റം ഡെവലപ്മെന്റ് പ്രക്രിയ മെച്ചപ്പെടുത്തുന്ന, ആപ്ലിക്കേഷൻ പ്രകടനം ഉയർത്തുന്ന, മികച്ച ഉപയോക്തൃ അനുഭവത്തിന് സംഭാവന നൽകുന്ന നിരവധി പ്രയോജനങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു. ഈ നേട്ടങ്ങൾ കൂടുതൽ വിശദമായി പരിശോധിക്കാം:

മെച്ചപ്പെട്ട ഓർഗനൈസേഷനും മെയിന്റനബിലിറ്റിയും: ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗ് സിസ്റ്റം സ്വാഭാവികമായും ഘടനാപരവും സംഘടിതവുമായ ഒരു കോഡ്ബേസ് പ്രോത്സാഹിപ്പിക്കുന്നു. റൂട്ടുകളെ ഡയറക്ടറി ഘടനയുമായി നേരിട്ട് മാപ്പ് ചെയ്യുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് URL-കളും അനുബന്ധ കമ്പോണന്റുകളും തമ്മിലുള്ള ബന്ധം എളുപ്പത്തിൽ മനസ്സിലാക്കാൻ കഴിയും. ഈ വ്യക്തമായ ഘടന കോഡ്ബേസിനുള്ളിലെ നാവിഗേഷൻ ലളിതമാക്കുകയും കാലക്രമേണ ആപ്ലിക്കേഷൻ പരിപാലിക്കുന്നതും അപ്‌ഡേറ്റ് ചെയ്യുന്നതും എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
സെർവർ കമ്പോണന്റുകളിലൂടെ മെച്ചപ്പെട്ട പ്രകടനം: ആപ്പ് ഡയറക്ടറി റിയാക്ട് സെർവർ കമ്പോണന്റുകൾ ഉപയോഗിച്ച് സെർവറിൽ ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നു, ഇത് ബ്രൗസറിൽ ഡൗൺലോഡ് ചെയ്യുകയും പ്രവർത്തിപ്പിക്കുകയും ചെയ്യേണ്ട ജാവാസ്ക്രിപ്റ്റിന്റെ അളവ് കുറയ്ക്കുന്നു. ഇത് വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡ് സമയത്തിനും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും കാരണമാകുന്നു, പ്രത്യേകിച്ചും വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളോ ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളോ ഉള്ള ഉപയോക്താക്കൾക്ക്.
ലളിതമായ ഡാറ്റാ ഫെച്ചിംഗും മാനേജ്മെന്റും: സെർവർ കമ്പോണന്റുകൾക്കുള്ളിൽ നേരിട്ട് ഡാറ്റാ ഫെച്ച് ചെയ്യാൻ ഡെവലപ്പർമാരെ അനുവദിക്കുന്നതിലൂടെ ആപ്പ് ഡയറക്ടറി ഡാറ്റാ ഫെച്ചിംഗ് ലളിതമാക്കുന്നു. ഇത് സങ്കീർണ്ണമായ ക്ലയന്റ്-സൈഡ് ഡാറ്റാ ഫെച്ചിംഗ് ലോജിക്കിന്റെ ആവശ്യകത ഇല്ലാതാക്കുകയും സെൻസിറ്റീവ് ഡാറ്റ ക്ലയന്റിന് വെളിപ്പെടുത്താനുള്ള സാധ്യത കുറയ്ക്കുകയും ചെയ്യുന്നു.
ഡിക്ലറേറ്റീവും ഇൻ്റ്യൂട്ടീവുമായ റൂട്ടിംഗ്: ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗ് സിസ്റ്റം ആപ്ലിക്കേഷൻ റൂട്ടുകൾ നിർവചിക്കുന്നതിനുള്ള ഡിക്ലറേറ്റീവും ഇൻ്റ്യൂട്ടീവുമായ ഒരു മാർഗം നൽകുന്നു. `app` ഡയറക്ടറിയിൽ ഫയലുകളും ഡയറക്ടറികളും സൃഷ്ടിക്കുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് അവരുടെ ആപ്ലിക്കേഷന്റെ നാവിഗേഷന്റെ ഘടനയും പെരുമാറ്റവും എളുപ്പത്തിൽ നിർവചിക്കാൻ കഴിയും. ഈ സമീപനം സങ്കീർണ്ണമായ കോൺഫിഗറേഷൻ ഫയലുകളുടെ ആവശ്യകത കുറയ്ക്കുകയും റൂട്ടിംഗ് സിസ്റ്റം മനസ്സിലാക്കാനും ഉപയോഗിക്കാനും എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
സ്ഥിരമായ യുഐ-യ്ക്കുള്ള ബിൽറ്റ്-ഇൻ ലേഔട്ടുകളും ടെംപ്ലേറ്റുകളും: ആപ്പ് ഡയറക്ടറി ലേഔട്ടുകൾക്കും ടെംപ്ലേറ്റുകൾക്കും ബിൽറ്റ്-ഇൻ പിന്തുണ നൽകുന്നു, ഇത് ഒന്നിലധികം പേജുകളിൽ സ്ഥിരതയുള്ള പങ്കിട്ട യുഐ ഘടകങ്ങൾ നിർവചിക്കാൻ ഡെവലപ്പർമാരെ അനുവദിക്കുന്നു. ഇത് കോഡ് ഡ്യൂപ്ലിക്കേഷൻ കുറയ്ക്കുകയും ആപ്ലിക്കേഷനിലുടനീളം സ്ഥിരമായ ഒരു രൂപവും ഭാവവും നിലനിർത്തുന്നത് എളുപ്പമാക്കുകയും ചെയ്യുന്നു.
സങ്കീർണ്ണമായ ഉപയോഗങ്ങൾക്കുള്ള നൂതന റൂട്ടിംഗ് ഫീച്ചറുകൾ: ഡൈനാമിക് റൂട്ടുകൾ, ക്യാച്ച്-ഓൾ സെഗ്‌മെന്റുകൾ, പാരലൽ റൂട്ടുകൾ, ഇന്റർസെപ്റ്റിംഗ് റൂട്ടുകൾ എന്നിങ്ങനെയുള്ള നിരവധി നൂതന റൂട്ടിംഗ് ഫീച്ചറുകൾ ആപ്പ് ഡയറക്ടറി വാഗ്ദാനം ചെയ്യുന്നു. ഈ ഫീച്ചറുകൾ ഡെവലപ്പർമാരെ സങ്കീർണ്ണമായ റൂട്ടിംഗ് സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യാനും പരമ്പരാഗത റൂട്ടിംഗ് സിസ്റ്റങ്ങൾ ഉപയോഗിച്ച് നേടാൻ ബുദ്ധിമുട്ടുള്ളതോ അസാധ്യമോ ആയ സങ്കീർണ്ണമായ യുഐ പാറ്റേണുകൾ സൃഷ്ടിക്കാനും പ്രാപ്തരാക്കുന്നു.

ആപ്പ് ഡയറക്ടറി റൂട്ടിംഗിന്റെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

ആപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിംഗ് സിസ്റ്റത്തിന്റെ ശക്തിയും വഴക്കവും വ്യക്തമാക്കാൻ, നമുക്ക് ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ പരിഗണിക്കാം:

1. ഡൈനാമിക് റൂട്ടുകളുള്ള ഒരു ലളിതമായ ബ്ലോഗ് നിർമ്മിക്കുന്നു

ഓരോ ബ്ലോഗ് പോസ്റ്റിനും അതിന്റെ സ്ലഗ് അടിസ്ഥാനമാക്കി സ്വന്തം തനതായ URL ഉള്ള ഒരു ബ്ലോഗ് ആപ്ലിക്കേഷൻ പരിഗണിക്കുക. ആപ്പ് ഡയറക്ടറി ഉപയോഗിച്ച്, ഡൈനാമിക് റൂട്ടുകൾ ഉപയോഗിച്ച് ഇത് എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ കഴിയും:

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

`[slug]` ഡയറക്ടറി ഒരു ഡൈനാമിക് റൂട്ട് സെഗ്‌മെന്റിനെ പ്രതിനിധീകരിക്കുന്നു, ഇത് `/blog/` പാത്തിന് കീഴിലുള്ള ഏത് URL-മായും പൊരുത്തപ്പെടും. `[slug]` ഡയറക്ടറിക്കുള്ളിലെ `page.js` ഫയൽ അനുബന്ധ ബ്ലോഗ് പോസ്റ്റിനുള്ള ഉള്ളടക്കം റെൻഡർ ചെയ്യും.

```javascript // app/blog/[slug]/page.js export async function generateStaticParams() { // ഡാറ്റാബേസിൽ നിന്നോ API-ൽ നിന്നോ എല്ലാ ബ്ലോഗ് പോസ്റ്റുകളും ലഭ്യമാക്കുക const posts = await fetchPosts(); // പോസ്റ്റുകളെ സ്ലഗ് പാരാമീറ്ററുകളുടെ ഒരു അറേയിലേക്ക് മാപ്പ് ചെയ്യുക return posts.map((post) => ({ slug: post.slug })); } export default async function BlogPost({ params }) { const { slug } = params; // പൊരുത്തപ്പെടുന്ന സ്ലഗ് ഉള്ള ബ്ലോഗ് പോസ്റ്റ് ലഭ്യമാക്കുക const post = await fetchPost(slug); if (!post) { return <div>പോസ്റ്റ് കണ്ടെത്തിയില്ല</div>; } return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); } ```

ഓരോ ബ്ലോഗ് പോസ്റ്റിനും ലളിതവും കാര്യക്ഷമവുമായ രീതിയിൽ വ്യക്തിഗത പേജുകൾ സൃഷ്ടിക്കാൻ ഡൈനാമിക് റൂട്ടുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഈ ഉദാഹരണം വ്യക്തമാക്കുന്നു.

2. ഇന്റർസെപ്റ്റിംഗ് റൂട്ടുകളുള്ള ഒരു മോഡൽ ഡയലോഗ് നടപ്പിലാക്കുന്നു

ഒരു ഉപയോക്താവ് ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, നിലവിലെ പേജിൽ നിന്ന് നാവിഗേറ്റ് ചെയ്യാതെ തന്നെ ദൃശ്യമാകുന്ന ഒരു മോഡൽ ഡയലോഗ് നടപ്പിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക. ഇന്റർസെപ്റ്റിംഗ് റൂട്ടുകൾ ഉപയോഗിച്ച് ഇത് നേടാനാകും:

``` app/ (.)photos/ [id]/ @modal/ page.js page.js ```

ഇവിടെ, `(.)photos/[id]/@modal/page.js` നിലവിലെ പേജിൽ നിന്ന് `photos/[id]` എന്നതിലേക്ക് പോകുന്ന അഭ്യർത്ഥനകളെ തടസ്സപ്പെടുത്തുന്നു. ഒരു ഉപയോക്താവ് ഒരു പ്രത്യേക ഫോട്ടോയിലേക്കുള്ള ലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, ഒരു പുതിയ പേജിലേക്ക് നാവിഗേറ്റ് ചെയ്യുന്നതിന് പകരം നിലവിലെ പേജിന് മുകളിൽ മോഡൽ ഡയലോഗ് ദൃശ്യമാകും.

3. പാരലൽ റൂട്ടുകളുള്ള ഒരു ഡാഷ്‌ബോർഡ് ലേഔട്ട് സൃഷ്ടിക്കുന്നു

ഒരേസമയം റെൻഡർ ചെയ്യേണ്ട ഒന്നിലധികം പാനലുകളുള്ള ഒരു ഡാഷ്‌ബോർഡ് ആപ്ലിക്കേഷൻ നിങ്ങൾ നിർമ്മിക്കുകയാണെന്ന് സങ്കൽപ്പിക്കുക. ഈ ലേഔട്ട് നേടാൻ പാരലൽ റൂട്ടുകൾ ഉപയോഗിക്കാം:

``` app/ @analytics/ page.js // അനലിറ്റിക്സ് ഡാഷ്‌ബോർഡ് @settings/ page.js // സെറ്റിംഗ്സ് പാനൽ page.js // പ്രധാന ഡാഷ്‌ബോർഡ് ലേഔട്ട് ```

ഈ ഘടനയിൽ, `@analytics`, `@settings` എന്നിവ പ്രധാന ഡാഷ്‌ബോർഡ് ലേഔട്ടിൽ റെൻഡർ ചെയ്യുന്ന പാരലൽ റൂട്ടുകളെ പ്രതിനിധീകരിക്കുന്നു. ഓരോ പാരലൽ റൂട്ടിനും ആ പാനലിനുള്ള ഉള്ളടക്കം നിർവചിക്കുന്ന അതിന്റേതായ page.js ഫയൽ ഉണ്ട്. <Slot> കമ്പോണന്റ് ഉപയോഗിച്ച് ഇവ എവിടെ സ്ഥാപിക്കണമെന്ന് ലേഔട്ടിന് തീരുമാനിക്കാം.

പേജസ് ഡയറക്ടറിയിൽ നിന്ന് ആപ്പ് ഡയറക്ടറിയിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നു

നിലവിലുള്ള ഒരു Next.js ആപ്ലിക്കേഷൻ പേജസ് ഡയറക്ടറിയിൽ നിന്ന് ആപ്പ് ഡയറക്ടറിയിലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നതിന് ശ്രദ്ധാപൂർവ്വമായ ആസൂത്രണവും നിർവ്വഹണവും ആവശ്യമാണ്. ആപ്പ് ഡയറക്ടറി കാര്യമായ നേട്ടങ്ങൾ വാഗ്ദാനം ചെയ്യുമ്പോൾ, ഡെവലപ്പർമാർക്ക് മനസ്സിലാക്കേണ്ട പുതിയ ആശയങ്ങളും പാറ്റേണുകളും ഇത് അവതരിപ്പിക്കുന്നു. മൈഗ്രേഷൻ പ്രക്രിയയിലൂടെ നിങ്ങളെ സഹായിക്കുന്നതിനുള്ള ഒരു ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ് ഇതാ:

പ്രധാന വ്യത്യാസങ്ങൾ മനസ്സിലാക്കുക: മൈഗ്രേഷൻ ആരംഭിക്കുന്നതിന് മുമ്പ്, റൂട്ടിംഗ് സിസ്റ്റം, ഡാറ്റാ ഫെച്ചിംഗ്, കമ്പോണന്റ് ആർക്കിടെക്ചർ എന്നിവയുൾപ്പെടെ പേജസ് ഡയറക്ടറിയും ആപ്പ് ഡയറക്ടറിയും തമ്മിലുള്ള പ്രധാന വ്യത്യാസങ്ങൾ നിങ്ങൾ നന്നായി മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക.
ഒരു `app` ഡയറക്ടറി സൃഷ്ടിക്കുക: നിങ്ങളുടെ Next.js പ്രോജക്റ്റിന്റെ റൂട്ടിൽ `app` എന്ന് പേരുള്ള ഒരു പുതിയ ഡയറക്ടറി സൃഷ്ടിക്കുക. ഈ ഡയറക്ടറി ആപ്പ് ഡയറക്ടറിയുടെ ഭാഗമായ എല്ലാ കമ്പോണന്റുകളും റൂട്ടുകളും ഉൾക്കൊള്ളും.
റൂട്ടുകൾ ക്രമേണ മൈഗ്രേറ്റ് ചെയ്യുക: ഓരോന്നായി, റൂട്ടുകൾ വർദ്ധിച്ചുവരുന്ന രീതിയിൽ മൈഗ്രേറ്റ് ചെയ്തുകൊണ്ട് ആരംഭിക്കുക. ഇത് ഓരോ റൂട്ടും വ്യക്തിഗതമായി പരിശോധിക്കാനും ഡീബഗ് ചെയ്യാനും നിങ്ങളെ അനുവദിക്കും, പിശകുകൾ ഉണ്ടാകാനുള്ള സാധ്യത കുറയ്ക്കുന്നു.
കമ്പോണന്റുകളെ സെർവർ കമ്പോണന്റുകളിലേക്ക് പരിവർത്തനം ചെയ്യുക: സാധ്യമാകുമ്പോഴെല്ലാം നിങ്ങളുടെ നിലവിലുള്ള റിയാക്ട് കമ്പോണന്റുകളെ സെർവർ കമ്പോണന്റുകളിലേക്ക് പരിവർത്തനം ചെയ്യുക. ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുകയും ബ്രൗസറിൽ ഡൗൺലോഡ് ചെയ്യുകയും പ്രവർത്തിപ്പിക്കുകയും ചെയ്യേണ്ട ജാവാസ്ക്രിപ്റ്റിന്റെ അളവ് കുറയ്ക്കുകയും ചെയ്യും.
ഡാറ്റാ ഫെച്ചിംഗ് ലോജിക് അപ്‌ഡേറ്റ് ചെയ്യുക: ആപ്പ് ഡയറക്ടറിയുടെ ബിൽറ്റ്-ഇൻ ഡാറ്റാ ഫെച്ചിംഗ് കഴിവുകൾ പ്രയോജനപ്പെടുത്തുന്നതിന് നിങ്ങളുടെ ഡാറ്റാ ഫെച്ചിംഗ് ലോജിക് അപ്‌ഡേറ്റ് ചെയ്യുക. ക്ലയന്റ് കമ്പോണന്റുകളിൽ നിന്ന് സെർവർ കമ്പോണന്റുകളിലേക്ക് ഡാറ്റാ ഫെച്ചിംഗ് കോഡ് മാറ്റുന്നത് ഇതിൽ ഉൾപ്പെട്ടേക്കാം.
ലേഔട്ടുകളും ടെംപ്ലേറ്റുകളും നടപ്പിലാക്കുക: ഒന്നിലധികം പേജുകളിൽ സ്ഥിരതയുള്ള പങ്കിട്ട യുഐ ഘടകങ്ങൾ നിർവചിക്കാൻ ലേഔട്ടുകളും ടെംപ്ലേറ്റുകളും നടപ്പിലാക്കുക.
സമഗ്രമായി പരിശോധിക്കുക: മൈഗ്രേറ്റ് ചെയ്ത ഓരോ റൂട്ടും ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്നും റിഗ്രഷനുകൾ ഇല്ലെന്നും ഉറപ്പാക്കാൻ സമഗ്രമായി പരിശോധിക്കുക.
`pages` ഡയറക്ടറി നീക്കംചെയ്യുക: എല്ലാ റൂട്ടുകളും മൈഗ്രേറ്റ് ചെയ്തുകഴിഞ്ഞാൽ, നിങ്ങൾക്ക് `/pages` ഡയറക്ടറി നീക്കംചെയ്യാം.

ഉപസംഹാരം

Next.js ആപ്പ് ഡയറക്ടറി ഫയൽ അധിഷ്ഠിത റൂട്ടിംഗിലെ ഒരു സുപ്രധാന പരിണാമത്തെ പ്രതിനിധീകരിക്കുന്നു, ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ഡെവലപ്പർമാർക്ക് കൂടുതൽ സംഘടിതവും, പ്രകടനക്ഷമവും, വഴക്കമുള്ളതുമായ ഒരു മാർഗം വാഗ്ദാനം ചെയ്യുന്നു. പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കുകയും പുതിയ ഫീച്ചറുകൾ സ്വീകരിക്കുകയും ചെയ്യുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് അസാധാരണമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും കൂടുതൽ ഉൽപ്പാദനക്ഷമത കൈവരിക്കാനും ആപ്പ് ഡയറക്ടറി പ്രയോജനപ്പെടുത്താം. Next.js ഡെവലപ്‌മെന്റിന്റെ ഭാവി ആപ്പ് ഡയറക്ടറിയിലാണ്, അത് സ്വീകരിക്കുന്നത് അത്യാധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു തന്ത്രപരമായ നീക്കമാണ്. ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്ക് ഇതൊരു ശക്തമായ ഉപകരണമാണ്.

Next.js ഇക്കോസിസ്റ്റം വികസിക്കുന്നത് തുടരുമ്പോൾ, കരുത്തുറ്റതും, വിപുലീകരിക്കാവുന്നതും, പ്രകടനക്ഷമവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള നിലവാരമായി ആപ്പ് ഡയറക്ടറി മാറാൻ ഒരുങ്ങുകയാണ്. മാറ്റത്തെ സ്വീകരിക്കുക, സാധ്യതകൾ പര്യവേക്ഷണം ചെയ്യുക, Next.js-ന്റെ പൂർണ്ണമായ സാധ്യതകൾ അൺലോക്ക് ചെയ്യുക!