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>டெம்ப்ளேட்: {count}</p>
      <button onClick={() => setCount(count + 1)}>டெம்ப்ளேட்டை புதுப்பிக்கவும்</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. ரூட் குழுக்கள்

ரூட் குழுக்கள் `(குழுபெயர்)` 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]` பிரிவு ஒரு டைனமிக் பிரிவு. பயனர் `/blog/123` அல்லது `/blog/456` போன்ற ஒரு URL க்குச் செல்லும்போது `app/blog/[id]/page.js` இலிருந்து ஏற்றுமதி செய்யப்பட்ட காம்போனென்ட் வழங்கப்படும். `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) {
  // ஒரு தரவுத்தளம் அல்லது API இலிருந்து டேட்டாவைப் பெறுவதை உருவகப்படுத்துங்கள்
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'எனது முதல் வலைப்பதிவு இடுகை', content: 'இது எனது முதல் வலைப்பதிவு இடுகையின் உள்ளடக்கம்.' },
        '456': { title: 'மற்றொரு வலைப்பதிவு இடுகை', content: 'இது இன்னும் சில அற்புதமான உள்ளடக்கம்.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

நீங்கள் ஒரு ரூட்டில் பல டைனமிக் பிரிவுகளையும் பயன்படுத்தலாம். எடுத்துக்காட்டாக, நீங்கள் `/blog/[category]/[id]` போன்ற ஒரு ரூட்டைக் கொண்டிருக்கலாம்.

9. கேட்ச்-ஆல் செக்மென்ட்கள்

கேட்ச்-ஆல் செக்மென்ட்கள் எந்த எண்ணிக்கையிலான பிரிவுகளுடன் பொருந்தும் ரூட்களை உருவாக்க உங்களை அனுமதிக்கின்றன. இது ஒரு CMS ஐ உருவாக்கும் போன்ற சூழ்நிலைகளுக்குப் பயன்படுகிறது, அங்கு 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>ஆவணங்கள்</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() {
  // ஒரு தரவுத்தளம் அல்லது API இலிருந்து டேட்டாவைப் பெறுவதை உருவகப்படுத்துங்கள்
  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 கிளையன்டிற்கு அனுப்பப்படுவதற்கு முன்பு டேட்டா பெறப்படுகிறது.

கிளையன்ட் காம்போனென்ட்கள்

கிளையன்ட் காம்போனென்ட்கள் கிளையன்டில் ரெண்டர் செய்யப்படுகின்றன மற்றும் நிகழ்வு கேட்பவர்கள், நிலை மற்றும் உலாவி 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>எண்ணி</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: 'ஜான் டோ' },
    { id: 2, name: 'ஜேன் டோ' },
  ];

  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  // மார்க்கெட்டிங் லேஅவுட்
    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();
}

// மேலும் அறிய கீழே உள்ள "பொருந்தும் பாதைகள்" என்பதைப் பார்க்கவும்
export const config = {
  matcher: '/admin/:path*',
}

இந்த எடுத்துக்காட்டு, `/admin` இன் கீழ் எந்த ரூட்டையும் அணுகுவதற்கு முன்பு பயனர் அங்கீகரிக்கப்பட்டுள்ளாரா என்பதைச் சரிபார்க்கும் மிடில்வேரை வரையறுக்கிறது. பயனர் அங்கீகரிக்கப்படவில்லை என்றால், அவர்கள் `/login` பக்கத்திற்கு திருப்பி விடப்படுவார்கள்.

கோப்பு அடிப்படையிலான ரூட்டிங்கிற்கான சிறந்த நடைமுறைகள்

ஆப் ரௌட்டரின் கோப்பு அடிப்படையிலான ரூட்டிங் அமைப்பை最大限மாகப் பயன்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

உங்கள் கோப்பு கட்டமைப்பை ஒழுங்கமைப்பாக வைத்திருங்கள்: அர்த்தமுள்ள கோப்புறைப் பெயர்களைப் பயன்படுத்தவும் மற்றும் தொடர்புடைய கோப்புகளை ஒன்றாகக் குழுவாக வைக்கவும்.
பகிரப்பட்ட UI க்கு லேஅவுட்களைப் பயன்படுத்தவும்: தலைப்புகள், அடிக்குறிப்புகள், பக்க பட்டிகள் மற்றும் பல பக்கங்களில் பகிரப்படும் பிற கூறுகளுக்கு லேஅவுட்களை உருவாக்கவும்.
ஏற்றுதல் UI களைப் பயன்படுத்தவும்: டேட்டாவைப் பெறும் அல்லது பிற ஒத்திசைவற்ற செயல்பாடுகளைச் செய்யும் ரூட்களுக்கு ஏற்றுதல் UI களை வழங்கவும்.
பிழைகளை நளினமாகக் கையாளவும்: பிழைகள் ஏற்படும்போது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்க தனிப்பயன் பிழை UI களை உருவாக்கவும்.
அமைப்புக்காக ரூட் குழுக்களைப் பயன்படுத்தவும்: URL கட்டமைப்பைப் பாதிக்காமல் உங்கள் ரூட்களை ஒழுங்கமைக்க ரூட் குழுக்களைப் பயன்படுத்தவும்.
செயல்திறனுக்காக சர்வர் காம்போனென்ட்களைப் பயன்படுத்தவும்: சர்வரில் டேட்டாவைப் பெறவும் UI ஐ ரெண்டர் செய்யவும் சர்வர் காம்போனென்ட்களைப் பயன்படுத்தவும், இது செயல்திறன் மற்றும் SEO ஐ மேம்படுத்துகிறது.
தேவைப்படும்போது கிளையன்ட் காம்போனென்ட்களைப் பயன்படுத்தவும்: நிகழ்வு கேட்பவர்கள், நிலை மற்றும் உலாவி APIகள் போன்ற கிளையன்ட் பக்க அம்சங்களைப் பயன்படுத்த வேண்டியிருக்கும்போது கிளையன்ட் காம்போனென்ட்களைப் பயன்படுத்தவும்.

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

இந்த மிடில்வேர் கோரப்பட்ட பாதையில் மொழி முன்னொட்டு உள்ளதா என்று சரிபார்க்கிறது. இல்லையென்றால், இது `Accept-Language` ஹெடரைப் பயன்படுத்தி பயனரின் விருப்பமான மொழியைக் கண்டறிந்து, பொருத்தமான மொழி-குறிப்பிட்ட பாதைக்கு அவர்களைத் திருப்பிவிடுகிறது. `@formatjs/intl-localematcher` மற்றும் `negotiator` போன்ற நூலகங்கள் மொழி பேச்சுவார்த்தையைக் கையாளப் பயன்படுத்தப்படுகின்றன.

Next.js ஆப் ரௌட்டர் மற்றும் உலகளாவிய அணுகல்தன்மை

உலகளவில் அணுகக்கூடிய வலைச் செயலிகளை உருவாக்குவதற்கு அணுகல்தன்மை (a11y) கொள்கைகளை கவனமாகப் பரிசீலிக்க வேண்டும். Next.js ஆப் ரௌட்டர் அணுகக்கூடிய அனுபவங்களை உருவாக்குவதற்கான ஒரு திடமான அடித்தளத்தை வழங்குகிறது, ஆனால் உங்கள் செயலி அவர்களின் திறன்களைப் பொருட்படுத்தாமல் அனைவராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய சிறந்த நடைமுறைகளைச் செயல்படுத்துவது அவசியம்.

முக்கிய அணுகல்தன்மை பரிசீலனைகள்

சொற்பொருள் HTML: உங்கள் உள்ளடக்கத்தை கட்டமைக்க சொற்பொருள் HTML கூறுகளை (எ.கா., `<article>`, `<nav>`, `<aside>`, `<main>`) பயன்படுத்தவும். இது உதவித் தொழில்நுட்பங்களுக்கு அர்த்தத்தை வழங்குகிறது மற்றும் பயனர்கள் உங்கள் தளத்தில் எளிதாக செல்ல உதவுகிறது.
ARIA பண்புக்கூறுகள்: தனிப்பயன் காம்போனென்ட்கள் மற்றும் விட்ஜெட்களின் அணுகல்தன்மையை மேம்படுத்த ARIA (அணுகக்கூடிய ரிச் இணையப் பயன்பாடுகள்) பண்புக்கூறுகளைப் பயன்படுத்தவும். ARIA பண்புக்கூறுகள் கூறுகளின் பங்கு, நிலை மற்றும் பண்புகள் பற்றிய கூடுதல் தகவல்களை உதவித் தொழில்நுட்பங்களுக்கு வழங்குகின்றன.
விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை வழியாக அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். பயனர்கள் `Tab` விசையைப் பயன்படுத்தி உங்கள் செயலி வழியாக செல்லவும், `Enter` அல்லது `Space` விசையைப் பயன்படுத்தி கூறுகளுடன் தொடர்பு கொள்ளவும் வேண்டும்.
வண்ண வேறுபாடு: பார்வை குறைபாடு உள்ள பயனர்களுக்குப் படிக்க எளிதாக இருக்க, உரைக்கும் பின்னணிக்கும் இடையில் போதுமான வண்ண வேறுபாட்டைப் பயன்படுத்தவும். வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG) சாதாரண உரைக்கு குறைந்தது 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 என்ற வேறுபாடு விகிதத்தைப் பரிந்துரைக்கின்றன.
பட மாற்று உரை: அனைத்துப் படங்களுக்கும் விளக்கமான மாற்று உரையை வழங்கவும். மாற்று உரை படங்களுக்கு ஒரு உரை மாற்றீட்டை வழங்குகிறது, அதை ஸ்கிரீன் ரீடர்களால் படிக்க முடியும்.
படிவ லேபிள்கள்: படிவ லேபிள்களை அவற்றின் தொடர்புடைய உள்ளீட்டுப் புலங்களுடன் `<label>` கூறுகளைப் பயன்படுத்தி இணைக்கவும். இது ஒவ்வொரு புலத்திலும் என்ன தகவல் எதிர்பார்க்கப்படுகிறது என்பதை பயனர்களுக்குத் தெளிவுபடுத்துகிறது.
ஸ்கிரீன் ரீடர் சோதனை: உங்கள் செயலி பார்வை குறைபாடு உள்ள பயனர்களுக்கு அணுகக்கூடியதா என்பதை உறுதிப்படுத்த ஒரு ஸ்கிரீன் ரீடருடன் சோதிக்கவும். பிரபலமான ஸ்கிரீன் ரீடர்களில் NVDA, JAWS மற்றும் VoiceOver ஆகியவை அடங்கும்.

Next.js ஆப் ரௌட்டரில் அணுகல்தன்மையை செயல்படுத்துதல்

Next.js Link காம்போனென்டைப் பயன்படுத்தவும்: வழிசெலுத்தலுக்கு `<Link>` காம்போனென்டைப் பயன்படுத்தவும். இது முன் ஏற்றுதல் மற்றும் ஃபோகஸ் மேலாண்மை போன்ற உள்ளமைக்கப்பட்ட அணுகல்தன்மை அம்சங்களை வழங்குகிறது.
ஃபோகஸ் மேலாண்மை: பக்கங்களுக்கு இடையில் செல்லும்போது அல்லது மோடல்களைத் திறக்கும்போது, ஃபோகஸ் சரியாக நிர்வகிக்கப்படுவதை உறுதிப்படுத்தவும். ஃபோகஸ் புதிய பக்கம் அல்லது மோடலில் உள்ள மிகவும் தர்க்கரீதியான உறுப்புக்கு அமைக்கப்பட வேண்டும்.
அணுகக்கூடிய தனிப்பயன் காம்போனென்ட்கள்: தனிப்பயன் காம்போனென்ட்களை உருவாக்கும்போது, மேலே கோடிட்டுக் காட்டப்பட்டுள்ள கொள்கைகளைப் பின்பற்றி அவை அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். உங்கள் காம்போனென்ட்களை அனைவராலும் பயன்படுத்தக்கூடியதாக மாற்ற சொற்பொருள் HTML, ARIA பண்புக்கூறுகள் மற்றும் விசைப்பலகை வழிசெலுத்தல் ஆகியவற்றைப் பயன்படுத்தவும்.
லிண்டிங் மற்றும் சோதனை: உங்கள் குறியீட்டில் சாத்தியமான அணுகல்தன்மை சிக்கல்களை அடையாளம் காண ESLint போன்ற லிண்டிங் கருவிகளை அணுகல்தன்மை செருகுநிரல்களுடன் பயன்படுத்தவும். மேலும், உங்கள் செயலியை அணுகல்தன்மை மீறல்களுக்காக சோதிக்க தானியங்கி சோதனை கருவிகளைப் பயன்படுத்தவும்.

முடிவுரை

Next.js ஆப் ரௌட்டரின் கோப்பு அடிப்படையிலான ரூட்டிங் அமைப்பு உங்கள் செயலிகளைக் கட்டமைக்கவும் வழிநடத்தவும் ஒரு சக்திவாய்ந்த மற்றும் உள்ளுணர்வு வழியை வழங்குகிறது. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள முக்கிய கருத்துக்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், நீங்கள் வலுவான, அளவிடக்கூடிய மற்றும் பராமரிக்கக்கூடிய Next.js செயலிகளை உருவாக்கலாம். ஆப் ரௌட்டரின் வெவ்வேறு அம்சங்களுடன் பரிசோதனை செய்து, அது உங்கள் மேம்பாட்டு பணிப்பாய்வுகளை எவ்வாறு எளிதாக்கலாம் மற்றும் பயனர் அனுபவத்தை மேம்படுத்தலாம் என்பதைக் கண்டறியவும்.