Next.js ആപ്പ് റൂട്ടർ: ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗിനെക്കുറിച്ചുള്ള ഒരു സമഗ്രമായ ഗൈഡ്

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

എന്താണ് ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗ്?

ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗ് എന്നത് ഒരു റൂട്ടിംഗ് സിസ്റ്റമാണ്, അവിടെ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ റൂട്ടുകളുടെ ഘടന നിങ്ങളുടെ ഫയലുകളുടെയും ഡയറക്ടറികളുടെയും ഓർഗനൈസേഷനാൽ നേരിട്ട് നിർണ്ണയിക്കപ്പെടുന്നു. Next.js ആപ്പ് റൂട്ടറിൽ, `app` ഡയറക്ടറിക്കുള്ളിൽ ഫയലുകൾ ഉണ്ടാക്കി നിങ്ങൾ റൂട്ടുകൾ നിർവചിക്കുന്നു. ഓരോ ഫോൾഡറും ഒരു റൂട്ട് സെഗ്‌മെൻ്റിനെ പ്രതിനിധീകരിക്കുന്നു, ആ ഫോൾഡറുകളിലെ പ്രത്യേക ഫയലുകൾ ആ റൂട്ട് സെഗ്‌മെൻ്റ് എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് നിർവചിക്കുന്നു. ഈ സമീപനം നിരവധി ഗുണങ്ങൾ നൽകുന്നു:

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

ആപ്പ് റൂട്ടർ ഉപയോഗിച്ച് തുടങ്ങാം

ആപ്പ് റൂട്ടർ ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ ഒരു പുതിയ 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`) ഫയൽ ആപ്പ് റൂട്ടറിൻ്റെ ഏറ്റവും അടിസ്ഥാനപരമായ ഭാഗമാണ്. ഇത് ഒരു പ്രത്യേക റൂട്ട് സെഗ്‌മെൻ്റിനായി റെൻഡർ ചെയ്യപ്പെടുന്ന യുഐ കമ്പോണൻ്റിനെ നിർവചിക്കുന്നു. നിങ്ങൾ നേരിട്ട് ആക്‌സസ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഏതൊരു റൂട്ട് സെഗ്‌മെൻ്റിനും ഇത് ഒരു **ആവശ്യമായ** ഫയലാണ്.

ഉദാഹരണം:

നിങ്ങൾക്ക് ഇതുപോലൊരു ഫയൽ ഘടനയുണ്ടെങ്കിൽ:

app/
  about/
    page.js

`app/about/page.js`-ൽ നിന്ന് എക്‌സ്‌പോർട്ട് ചെയ്‌ത കമ്പോണൻ്റ്, ഒരു ഉപയോക്താവ് `/about`-ലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ റെൻഡർ ചെയ്യപ്പെടും.

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

export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company.</p>
    </div>
  );
}

3. `layout.js` ഫയൽ

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

ഉദാഹരണം:

നിങ്ങൾക്ക് `/about` പേജിലും സാങ്കൽപ്പികമായ `/about/team` പേജിലും ഒരു ഹെഡർ ചേർക്കണമെന്ന് കരുതുക. നിങ്ങൾക്ക് `app/about` ഡയറക്ടറിയിൽ ഒരു `layout.js` ഫയൽ ഉണ്ടാക്കാം:

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

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>About Our Company</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

`children` പ്രോപ്പ്, അതേ ഡയറക്ടറിയിലോ അല്ലെങ്കിൽ നെസ്റ്റഡ് ഡയറക്ടറികളിലോ ഉള്ള `page.js` ഫയൽ റെൻഡർ ചെയ്യുന്ന യുഐ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കപ്പെടും.

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`) ഫയൽ ഒരു റൂട്ട് സെഗ്‌മെൻ്റ് ലോഡ് ചെയ്യുമ്പോൾ പ്രദർശിപ്പിക്കുന്ന ഒരു ലോഡിംഗ് യുഐ ഉണ്ടാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഡാറ്റ ലഭ്യമാക്കുമ്പോഴോ മറ്റ് അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ നടത്തുമ്പോഴോ മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

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

export default function Loading() {
  return <p>Loading about information...</p>;
}

ഒരു ഉപയോക്താവ് `/about`-ലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ, `page.js` കമ്പോണൻ്റ് പൂർണ്ണമായി റെൻഡർ ചെയ്യുന്നതുവരെ `Loading` കമ്പോണൻ്റ് പ്രദർശിപ്പിക്കും.

6. `error.js` ഫയൽ

`error.js` (അല്ലെങ്കിൽ `error.jsx`, `error.ts`, `error.tsx`) ഫയൽ ഒരു റൂട്ട് സെഗ്‌മെൻ്റിനുള്ളിൽ ഒരു പിശക് സംഭവിക്കുമ്പോൾ പ്രദർശിപ്പിക്കുന്ന ഒരു കസ്റ്റം എറർ യുഐ ഉണ്ടാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. കൂടുതൽ ഉപയോക്തൃ-സൗഹൃദമായ പിശക് സന്ദേശം നൽകുന്നതിനും മുഴുവൻ ആപ്ലിക്കേഷനും ക്രാഷ് ആകുന്നത് തടയുന്നതിനും ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

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

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>An error occurred!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</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` ഗ്രൂപ്പിന് കീഴിലുമാണ്. URL-കൾ യഥാക്രമം `/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;

  // Fetch data for the blog post with the given ID
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>Blog post not found.</p>;
  }

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

async function fetchBlogPost(id) {
  // Simulate fetching data from a database or API
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'My First Blog Post', content: 'This is the content of my first blog post.' },
        '456': { title: 'Another Blog Post', content: 'This is some more exciting content.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

നിങ്ങൾക്ക് ഒരു റൂട്ടിൽ ഒന്നിലധികം ഡൈനാമിക് സെഗ്‌മെൻ്റുകൾ ഉപയോഗിക്കാനും കഴിയും. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് `/blog/[category]/[id]` പോലുള്ള ഒരു റൂട്ട് ഉണ്ടാകാം.

9. ക്യാച്ച്-ഓൾ സെഗ്മെൻ്റുകൾ

ക്യാച്ച്-ഓൾ സെഗ്മെൻ്റുകൾ എത്ര സെഗ്മെൻ്റുകളുമായും പൊരുത്തപ്പെടുന്ന റൂട്ടുകൾ ഉണ്ടാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. URL ഘടന ഉപയോക്താവ് നിർണ്ണയിക്കുന്ന ഒരു CMS ഉണ്ടാക്കുന്നത് പോലുള്ള സാഹചര്യങ്ങളിൽ ഇത് ഉപയോഗപ്രദമാണ്. ക്യാച്ച്-ഓൾ സെഗ്മെൻ്റുകൾ സെഗ്‌മെൻ്റ് പേരിന് മുമ്പ് മൂന്ന് ഡോട്ടുകൾ ([...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 ? slug.join('/') : 'No slug'}</p>
    </div>
  );
}

ഓപ്ഷണൽ ക്യാച്ച്-ഓൾ സെഗ്മെൻ്റുകൾ ഡബിൾ സ്ക്വയർ ബ്രാക്കറ്റിൽ `[[...slug]]` സെഗ്‌മെൻ്റ് പേര് ചേർത്തുകൊണ്ട് ഉണ്ടാക്കാം. ഇത് റൂട്ട് സെഗ്മെൻ്റിനെ ഓപ്ഷണൽ ആക്കുന്നു. ഉദാഹരണം:

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

ഈ സജ്ജീകരണം `/blog`-ലും `/blog/any/number/of/segments`-ലും page.js കമ്പോണൻ്റിനെ റെൻഡർ ചെയ്യും.

10. പാരലൽ റൂട്ടുകൾ

പാരലൽ റൂട്ടുകൾ ഒരേ ലേഔട്ടിൽ ഒരേ സമയം ഒന്നോ അതിലധികമോ പേജുകൾ റെൻഡർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഡാഷ്‌ബോർഡുകൾ പോലുള്ള സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്, അവിടെ പേജിൻ്റെ വിവിധ ഭാഗങ്ങൾ സ്വതന്ത്രമായി ലോഡ് ചെയ്യാൻ കഴിയും. പാരലൽ റൂട്ടുകൾ `@` ചിഹ്നവും തുടർന്ന് ഒരു സ്ലോട്ട് പേരും ഉപയോഗിച്ച് നിർവചിക്കുന്നു (ഉദാഹരണത്തിന്, `@sidebar`, `@main`).

ഉദാഹരണം:

app/
  @sidebar/
    page.js  // Content for the sidebar
  @main/
    page.js  // Content for the main section
  default.js // Required: Defines the default layout for parallel routes

പാരലൽ റൂട്ടുകൾ ഉപയോഗിക്കുമ്പോൾ `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. ഇൻ്റർസെപ്റ്റിംഗ് റൂട്ടുകൾ

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

ഉദാഹരണം:

app/
  (.)photos/
    [id]/
      page.js  // The intercepted route
  feed/
    page.js  // The page where the photo modal is displayed

ഈ ഉദാഹരണത്തിൽ, ഒരു ഉപയോക്താവ് `/feed` പേജിലെ ഒരു ഫോട്ടോയിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, `app/(.)photos/[id]/page.js` റൂട്ട് ഇൻ്റർസെപ്റ്റ് ചെയ്യുകയും `/feed` പേജിന് മുകളിൽ ഒരു മോഡലായി പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. `(.)` സിൻ്റാക്സ്, `photos/[id]` റൂട്ട് കണ്ടെത്താൻ ഒരു ലെവൽ മുകളിലേക്ക് (`app` ഡയറക്ടറിയിലേക്ക്) നോക്കാൻ Next.js-നോട് പറയുന്നു.

ആപ്പ് റൂട്ടർ ഉപയോഗിച്ച് ഡാറ്റ ഫെച്ചിംഗ്

സെർവർ കമ്പോണൻ്റുകളും ക്ലയിൻ്റ് കമ്പോണൻ്റുകളും ഉപയോഗിച്ച് ഡാറ്റ ലഭ്യമാക്കുന്നതിന് ആപ്പ് റൂട്ടർ ഇൻ-ബിൽറ്റ് പിന്തുണ നൽകുന്നു. സെർവർ കമ്പോണൻ്റുകൾ സെർവറിൽ റെൻഡർ ചെയ്യുന്നു, അതേസമയം ക്ലയിൻ്റ് കമ്പോണൻ്റുകൾ ക്ലയിൻ്റിൽ റെൻഡർ ചെയ്യുന്നു. ഇത് ഓരോ കമ്പോണൻ്റിൻ്റെയും ആവശ്യകതകളെ അടിസ്ഥാനമാക്കി മികച്ച സമീപനം തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

സെർവർ കമ്പോണൻ്റുകൾ

സെർവർ കമ്പോണൻ്റുകൾ ആപ്പ് റൂട്ടറിലെ ഡിഫോൾട്ടാണ്. പ്രത്യേക API റൂട്ടുകളുടെ ആവശ്യമില്ലാതെ നിങ്ങളുടെ കമ്പോണൻ്റുകളിൽ നേരിട്ട് ഡാറ്റ ലഭ്യമാക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് പ്രകടനം മെച്ചപ്പെടുത്താനും നിങ്ങളുടെ കോഡ് ലളിതമാക്കാനും കഴിയും.

ഉദാഹരണം:

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

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

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // Simulate fetching data from a database or API
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Product A' },
        { id: 2, name: 'Product B' },
        { id: 3, name: 'Product C' },
      ];
      resolve(products);
    }, 500);
  });
}

ഈ ഉദാഹരണത്തിൽ, `fetchProducts` ഫംഗ്ഷൻ `ProductsPage` കമ്പോണൻ്റിനുള്ളിൽ നേരിട്ട് വിളിക്കപ്പെടുന്നു. കമ്പോണൻ്റ് സെർവറിൽ റെൻഡർ ചെയ്യുകയും, HTML ക്ലയിൻ്റിന് അയയ്‌ക്കുന്നതിന് മുമ്പ് ഡാറ്റ ലഭ്യമാക്കുകയും ചെയ്യുന്നു.

ക്ലയിൻ്റ് കമ്പോണൻ്റുകൾ

ക്ലയിൻ്റ് കമ്പോണൻ്റുകൾ ക്ലയിൻ്റിൽ റെൻഡർ ചെയ്യുകയും ഇവൻ്റ് ലിസണറുകൾ, സ്റ്റേറ്റ്, ബ്രൗസർ API-കൾ പോലുള്ള ക്ലയിൻ്റ്-സൈഡ് ഫീച്ചറുകൾ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു. ഒരു ക്ലയിൻ്റ് കമ്പോണൻ്റ് ഉപയോഗിക്കുന്നതിന്, ഫയലിൻ്റെ മുകളിൽ `'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>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</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) {
  // Simulate fetching users from a database
  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('Received data:', body)
  return NextResponse.json({ message: 'User created' }, { status: 201 })
}

ഈ ഉദാഹരണം `/api/users`-ൽ `GET`, `POST` അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്ന ഒരു റൂട്ട് ഹാൻഡ്‌ലർ നിർവചിക്കുന്നു. `GET` ഫംഗ്ഷൻ ഉപയോക്താക്കളുടെ ഒരു ലിസ്റ്റ് നൽകുന്നു, `POST` ഫംഗ്ഷൻ ഒരു പുതിയ ഉപയോക്താവിനെ ഉണ്ടാക്കുന്നു.

2. ഒന്നിലധികം ലേഔട്ടുകളുള്ള റൂട്ട് ഗ്രൂപ്പുകൾ

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ വിവിധ ഭാഗങ്ങൾക്കായി വ്യത്യസ്ത ലേഔട്ടുകൾ ഉണ്ടാക്കുന്നതിന് നിങ്ങൾക്ക് റൂട്ട് ഗ്രൂപ്പുകളെ ലേഔട്ടുകളുമായി സംയോജിപ്പിക്കാം. നിങ്ങളുടെ സൈറ്റിൻ്റെ വിവിധ ഭാഗങ്ങൾക്കായി വ്യത്യസ്ത ഹെഡറോ സൈഡ്‌ബാറോ വേണമെന്നുള്ള സാഹചര്യങ്ങളിൽ ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

app/
  (marketing)/
    layout.js  // Marketing layout
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // Admin layout
    dashboard/
      page.js

ഈ ഉദാഹരണത്തിൽ, `about`, `contact` പേജുകൾ `marketing` ലേഔട്ട് ഉപയോഗിക്കും, അതേസമയം `dashboard` പേജ് `admin` ലേഔട്ട് ഉപയോഗിക്കും.

3. മിഡിൽവെയർ

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

നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ റൂട്ടിൽ `middleware.js` (അല്ലെങ്കിൽ `middleware.ts`) എന്ന് പേരുള്ള ഒരു ഫയലിലാണ് മിഡിൽവെയർ നിർവചിക്കുന്നത്.

ഉദാഹരണം:

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

export function middleware(request) {
  // Check if the user is authenticated
  const isAuthenticated = false; // Replace with your authentication logic

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

  return NextResponse.next();
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/admin/:path*',
}

ഈ ഉദാഹരണം, ഉപയോക്താവ് `/admin`-ന് കീഴിലുള്ള ഏതെങ്കിലും റൂട്ടിലേക്ക് പ്രവേശിക്കുന്നതിന് മുമ്പ് ആധികാരികത പരിശോധിക്കുന്ന മിഡിൽവെയർ നിർവചിക്കുന്നു. ഉപയോക്താവ് ആധികാരികതയുള്ളവനല്ലെങ്കിൽ, അവരെ `/login` പേജിലേക്ക് റീഡയറക്ട് ചെയ്യുന്നു.

ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗിനായുള്ള മികച്ച രീതികൾ

ആപ്പ് റൂട്ടറിൻ്റെ ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗ് സിസ്റ്റം പരമാവധി പ്രയോജനപ്പെടുത്തുന്നതിന്, താഴെ പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കുക:

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

Next.js ആപ്പ് റൂട്ടർ ഉപയോഗിച്ചുള്ള ഇൻ്റർനാഷണലൈസേഷൻ ഉദാഹരണങ്ങൾ

Next.js ആപ്പ് റൂട്ടർ ഫയൽ-ബേസ്ഡ് റൂട്ടിംഗിലൂടെ ഇൻ്റർനാഷണലൈസേഷൻ (i18n) ലളിതമാക്കുന്നു. നിങ്ങൾക്ക് i18n എങ്ങനെ ഫലപ്രദമായി നടപ്പിലാക്കാം എന്നത് ഇതാ:

1. സബ്-പാത്ത് റൂട്ടിംഗ്

സബ്-പാത്തുകൾ ഉപയോഗിച്ച് ഭാഷയുടെ അടിസ്ഥാനത്തിൽ നിങ്ങളുടെ റൂട്ടുകൾ ഓർഗനൈസ് ചെയ്യുക. ഉദാഹരണത്തിന്:

app/
  [locale]/
    page.tsx         // Home page for the locale
    about/
      page.tsx     // About page for the locale

// 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'); // Use "en" as the default locale
  } catch (error) {
      console.error("Error matching locale:", error);
      return 'en'; // Fallback to English if matching fails
  }
}

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 config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

അഭ്യർത്ഥിച്ച പാത്തിൽ ഒരു ഭാഷാ പ്രിഫിക്‌സ് ഉണ്ടോ എന്ന് ഈ മിഡിൽവെയർ പരിശോധിക്കുന്നു. ഇല്ലെങ്കിൽ, `Accept-Language` ഹെഡർ ഉപയോഗിച്ച് ഉപയോക്താവിൻ്റെ ഇഷ്ടപ്പെട്ട ഭാഷ കണ്ടെത്തുകയും അവരെ അനുയോജ്യമായ ഭാഷാ-നിർദ്ദിഷ്ട പാത്തിലേക്ക് റീഡയറക്ട് ചെയ്യുകയും ചെയ്യുന്നു. ഭാഷാ ചർച്ചകൾ കൈകാര്യം ചെയ്യാൻ `@formatjs/intl-localematcher`, `negotiator` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുന്നു.

Next.js ആപ്പ് റൂട്ടറും ആഗോള പ്രവേശനക്ഷമതയും

ആഗോളതലത്തിൽ പ്രവേശനക്ഷമമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് പ്രവേശനക്ഷമത (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 ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. ആപ്പ് റൂട്ടറിൻ്റെ വിവിധ സവിശേഷതകൾ പരീക്ഷിച്ച്, അത് നിങ്ങളുടെ വികസന വർക്ക്ഫ്ലോ ലളിതമാക്കാനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താനും എങ്ങനെ സഹായിക്കുമെന്ന് കണ്ടെത്തുക.