Next.js ஆப் ரவுட்டரில் தேர்ச்சி பெறுதல்: ரூட் குழுக்கள் மற்றும் இணை வழித்தடங்களின் கட்டமைப்பில் ஒரு ஆழமான பார்வை

Next.js ஆப் ரவுட்டரின் வெளியீடு, பிரபலமான React கட்டமைப்பைக் கொண்டு டெவலப்பர்கள் வலைச் செயலிகளை உருவாக்கும் முறையில் ஒரு பெரும் மாற்றத்தைக் குறித்தது. Pages Router-இன் கோப்பு அடிப்படையிலான மரபுகளிலிருந்து விலகி, ஆப் ரவுட்டர் மிகவும் சக்திவாய்ந்த, நெகிழ்வான மற்றும் சர்வர்-மைய மாதிரியை அறிமுகப்படுத்தியது. இந்த பரிணாம வளர்ச்சி, அதிக கட்டுப்பாடு மற்றும் அமைப்புடன் மிகவும் சிக்கலான மற்றும் செயல்திறன் மிக்க பயனர் இடைமுகங்களை உருவாக்க நமக்கு அதிகாரம் அளிக்கிறது. அறிமுகப்படுத்தப்பட்ட மிகவும் மாற்றத்தக்க அம்சங்களில் ரூட் குழுக்கள் (Route Groups) மற்றும் இணை வழித்தடங்கள் (Parallel Routes) ஆகியவை அடங்கும்.

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

Next.js ஆப் ரவுட்டரைப் புரிந்துகொள்ளுதல்: ஒரு விரைவான மீள்பார்வை

நாம் விவரங்களுக்குள் செல்வதற்கு முன், ஆப் ரவுட்டரின் முக்கிய கொள்கைகளை சுருக்கமாக மீண்டும் பார்ப்போம். அதன் கட்டமைப்பு ஒரு அடைவு (directory) அடிப்படையிலான அமைப்பில் கட்டமைக்கப்பட்டுள்ளது, அங்கு கோப்புறைகள் URL பிரிவுகளை வரையறுக்கின்றன. இந்த கோப்புறைகளுக்குள் உள்ள சிறப்பு கோப்புகள் அந்தப் பிரிவுக்கான UI மற்றும் நடத்தையை வரையறுக்கின்றன:

• page.js: ஒரு வழித்தடத்திற்கான முதன்மை UI கூறு, அதை பொதுவில் அணுகக்கூடியதாக ஆக்குகிறது.
• layout.js: துணை தளவமைப்புகள் அல்லது பக்கங்களைச் சுற்றும் ஒரு UI கூறு. தலைப்புகள் மற்றும் அடிக்குறிப்புகள் போன்ற பல வழித்தடங்களில் UI-ஐப் பகிர்வதற்கு இது முக்கியமானது.
• loading.js: பக்க உள்ளடக்கம் ஏற்றப்படும்போது காட்டப்படும் ஒரு விருப்ப UI, இது React Suspense-ஐ அடிப்படையாகக் கொண்டது.
• error.js: பிழைகள் ஏற்பட்டால் காட்டப்படும் ஒரு விருப்ப UI, வலுவான பிழை எல்லைகளை உருவாக்குகிறது.

இந்த அமைப்பு, React Server Components (RSCs)-இன் இயல்புநிலை பயன்பாட்டுடன் இணைந்து, செயல்திறன் மற்றும் தரவுப் பெறுதல் முறைகளை கணிசமாக மேம்படுத்தக்கூடிய ஒரு சர்வர்-முதல் அணுகுமுறையை ஊக்குவிக்கிறது. ரூட் குழுக்கள் மற்றும் இணை வழித்தடங்கள் இந்த அடித்தளத்தின் மீது கட்டமைக்கப்படும் மேம்பட்ட மரபுகளாகும்.

ரூட் குழுக்களைப் புரிந்துகொள்ளுதல்: உங்கள் திட்டத்தை எளிமை மற்றும் அளவிற்காக ஒழுங்கமைத்தல்

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

ரூட் குழுக்கள் என்றால் என்ன?

ரூட் குழு என்பது உங்கள் கோப்புகள் மற்றும் வழித்தடப் பிரிவுகளை URL கட்டமைப்பைப் பாதிக்காமல் தர்க்கரீதியான குழுக்களாக ஒழுங்கமைப்பதற்கான ஒரு வழிமுறையாகும். ஒரு கோப்புறையின் பெயரை அடைப்புக்குறிக்குள் வைப்பதன் மூலம் நீங்கள் ஒரு ரூட் குழுவை உருவாக்குகிறீர்கள், எடுத்துக்காட்டாக, (marketing) அல்லது (app).

அடைப்புக்குறிக்குள் உள்ள கோப்புறையின் பெயர் முற்றிலும் அமைப்பு நோக்கங்களுக்காக மட்டுமே. URL பாதையை தீர்மானிக்கும்போது Next.js அதை முற்றிலும் புறக்கணிக்கிறது. எடுத்துக்காட்டாக, app/(marketing)/about/page.js இல் உள்ள கோப்பு /about என்ற URL இல் வழங்கப்படும், /(marketing)/about இல் அல்ல.

ரூட் குழுக்களின் முக்கிய பயன்பாடுகள் மற்றும் நன்மைகள்

எளிய அமைப்பு ஒரு நன்மையாக இருந்தாலும், ரூட் குழுக்களின் உண்மையான சக்தி, உங்கள் செயலியை தனித்துவமான, பகிரப்பட்ட தளவமைப்புகளுடன் கூடிய பிரிவுகளாகப் பிரிக்கும் திறனில் உள்ளது.

1. வழித்தடப் பிரிவுகளுக்கு வெவ்வேறு தளவமைப்புகளை உருவாக்குதல்

இது மிகவும் பொதுவான மற்றும் சக்திவாய்ந்த பயன்பாட்டு வழக்கு. இரண்டு முதன்மைப் பிரிவுகளைக் கொண்ட ஒரு வலைச் செயலியை கற்பனை செய்து பாருங்கள்:

• ஒரு பொது முகப்பு மார்க்கெட்டிங் தளம் (முகப்பு, பற்றி, விலை நிர்ணயம்) ஒரு உலகளாவிய தலைப்பு மற்றும் அடிக்குறிப்புடன்.
• ஒரு தனிப்பட்ட, அங்கீகரிக்கப்பட்ட பயனர் டாஷ்போர்டு (டாஷ்போர்டு, அமைப்புகள், சுயவிவரம்) ஒரு பக்கப்பட்டி, பயனர்-குறிப்பிட்ட வழிசெலுத்தல் மற்றும் வேறுபட்ட ஒட்டுமொத்த அமைப்புடன்.

ரூட் குழுக்கள் இல்லாமல், இந்த பிரிவுகளுக்கு வெவ்வேறு ரூட் தளவமைப்புகளைப் பயன்படுத்துவது சிக்கலானதாக இருக்கும். ரூட் குழுக்களுடன், இது நம்பமுடியாத அளவிற்கு இயல்பானது. ஒவ்வொரு குழுவிற்கும் உள்ளே ஒரு தனித்துவமான 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> குறிச்சொற்களுக்கு)

இந்த கட்டமைப்பில்:

• (marketing) குழுவிற்குள் உள்ள எந்த வழித்தடமும் (marketing)/layout.js ஆல் சூழப்பட்டிருக்கும்.
• (app) குழுவிற்குள் உள்ள எந்த வழித்தடமும் (app)/layout.js ஆல் சூழப்பட்டிருக்கும்.
• இரண்டு குழுக்களும் ரூட் app/layout.js ஐப் பகிர்ந்து கொள்கின்றன, இது உலகளாவிய HTML கட்டமைப்பை வரையறுக்க ஏற்றது.

2. ஒரு பகிரப்பட்ட தளவமைப்பிலிருந்து ஒரு பிரிவைத் தவிர்த்தல்

சில நேரங்களில், ஒரு குறிப்பிட்ட பக்கம் அல்லது பகுதி பெற்றோர் தளவமைப்பிலிருந்து முழுமையாக விடுபட வேண்டும். ஒரு பொதுவான உதாரணம், ஒரு செக்அவுட் செயல்முறை அல்லது முக்கிய தளத்தின் வழிசெலுத்தல் இல்லாத ஒரு சிறப்பு லேண்டிங் பக்கம். உயர்-நிலை தளவமைப்பைப் பகிராத ஒரு குழுவில் வழித்தடத்தை வைப்பதன் மூலம் இதை நீங்கள் அடையலாம். இது சிக்கலானதாகத் தோன்றினாலும், ரூட் தளவமைப்பிலிருந்து `children`-ஐ ரெண்டர் செய்யாத அதன் சொந்த உயர்-நிலை layout.js-ஐ ஒரு ரூட் குழுவிற்கு வழங்குவதைக் குறிக்கிறது.

நடைமுறை உதாரணம்: ஒரு பல-தளவமைப்பு செயலியை உருவாக்குதல்

மேலே விவரிக்கப்பட்ட மார்க்கெட்டிங்/ஆப் கட்டமைப்பின் ஒரு சிறிய பதிப்பை உருவாக்குவோம்.

1. ரூட் தளவமைப்பு (app/layout.js)

இந்த தளவமைப்பு மிகக் குறைவானது மற்றும் ஒவ்வொரு பக்கத்திற்கும் பொருந்தும். இது அத்தியாவசிய HTML கட்டமைப்பை வரையறுக்கிறது.

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

2. மார்க்கெட்டிங் தளவமைப்பு (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>
  );
}

3. ஆப் டாஷ்போர்டு தளவமைப்பு (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` என்பது ஒரு மறைமுகமான ஸ்லாட், இது அடைவில் உள்ள நிலையான `page.js`-க்கு ஒத்திருக்கிறது. `team` மற்றும் `analytics` ஆகியவை வெளிப்படையான ஸ்லாட்டுகள், அவை கோப்பு அமைப்பில் `@` முன்னொட்டுடன் உருவாக்கப்பட வேண்டும்.

முக்கிய அம்சங்கள் மற்றும் நன்மைகள்

• சுதந்திரமான வழித்தடக் கையாளுதல்: ஒவ்வொரு இணை வழித்தடமும் (ஸ்லாட்) அதன் சொந்த ஏற்றுதல் மற்றும் பிழை நிலைகளைக் கொண்டிருக்கலாம். இதன் பொருள், உங்கள் பகுப்பாய்வு பேனல் ஒரு ஏற்றுதல் சுழலலைக் காட்ட முடியும், அதே நேரத்தில் குழு ஊட்டம் ஏற்கனவே ரெண்டர் செய்யப்பட்டிருக்கும், இது ஒரு சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.
• நிபந்தனைக்குட்பட்ட ரெண்டரிங்: பயனர் அங்கீகார நிலை அல்லது அனுமதிகள் போன்ற சில நிபந்தனைகளின் அடிப்படையில் எந்த ஸ்லாட்டுகளை ரெண்டர் செய்வது என்பதை நீங்கள் நிரல்ரீதியாக தீர்மானிக்கலாம்.
• துணை-வழிசெலுத்தல்: ஒவ்வொரு ஸ்லாட்டையும் மற்ற ஸ்லாட்டுகளைப் பாதிக்காமல் சுயாதீனமாக வழிநடத்த முடியும். இது தாவலாக்கப்பட்ட இடைமுகங்கள் அல்லது ஒரு பேனலின் நிலை மற்றொரு பேனலில் இருந்து முற்றிலும் தனித்தனியாக இருக்கும் டாஷ்போர்டுகளுக்கு ஏற்றது.

ஒரு நிஜ-உலக காட்சி: ஒரு சிக்கலான டாஷ்போர்டை உருவாக்குதல்

/dashboard என்ற URL-இல் ஒரு டாஷ்போர்டை வடிவமைப்போம். இது ஒரு முக்கிய உள்ளடக்கப் பகுதி, ஒரு குழு செயல்பாட்டுப் பேனல் மற்றும் ஒரு செயல்திறன் பகுப்பாய்வு பேனலைக் கொண்டிருக்கும்.

கோப்பு அமைப்பு:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // பகுப்பாய்வு ஸ்லாட்டிற்கான UI
    │   └── loading.js     // குறிப்பாக பகுப்பாய்விற்கான ஏற்றுதல் UI
    ├── @team/
    │   └── page.js          // குழு ஸ்லாட்டிற்கான UI
    ├── layout.js            // ஸ்லாட்டுகளை ஒருங்கிணைக்கும் தளவமைப்பு
    └── page.js              // மறைமுகமான 'children' ஸ்லாட் (முக்கிய உள்ளடக்கம்)

1. டாஷ்போர்டு தளவமைப்பு (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>
  );
}

2. ஸ்லாட் பக்கங்கள் (எ.கா., 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` ஆகியவற்றிலிருந்து ரெண்டர் செய்யப்பட்ட உள்ளடக்கத்தை ப்ராப்ஸாகப் பெற்று அவற்றை அதற்கேற்ப வைக்கும். முக்கியமாக, பகுப்பாய்வு பேனல் மீதமுள்ள டாஷ்போர்டின் ரெண்டரிங்கைத் தடுக்காமல் 3 வினாடிகளுக்கு அதன் சொந்த `loading.js` நிலையைக் காண்பிக்கும்.

பொருந்தாத வழித்தடங்களை `default.js` உடன் கையாளுதல்

ஒரு முக்கியமான கேள்வி எழுகிறது: தற்போதைய URL-க்கான ஒரு ஸ்லாட்டின் செயலில் உள்ள நிலையை Next.js-ஆல் மீட்டெடுக்க முடியாவிட்டால் என்ன நடக்கும்? எடுத்துக்காட்டாக, ஒரு ஆரம்ப சுமை அல்லது ஒரு பக்க மறுஏற்றத்தின் போது, 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` என்ற பெயரில் ஒரு இணை வழித்தட ஸ்லாட்டை உருவாக்குகிறோம்.
• விசித்திரமாகத் தோன்றும் பாதை (..)(..)photos/[id], "கேட்ச்-ஆல் செக்மெண்ட்ஸ்" எனப்படும் ஒரு மரபைப் பயன்படுத்தி `photos/[id]` வழித்தடத்தை இரண்டு நிலைகளுக்கு மேலே இருந்து (ரூட்டிலிருந்து) பொருத்தப் பயன்படுகிறது.
• ஒரு பயனர் முக்கிய கேலரி பக்கத்திலிருந்து (`/`) ஒரு புகைப்படத்திற்கு செல்லும்போது, Next.js இந்த வழிசெலுத்தலை இடைமறித்து, முழு பக்க வழிசெலுத்தல் செய்வதற்குப் பதிலாக `@modal` ஸ்லாட்டிற்குள் மோடலின் பக்கத்தை ரெண்டர் செய்கிறது.
• முக்கிய கேலரி பக்கம் தளவமைப்பின் `children` ப்ராப்பில் தெரியும்.
• பயனர் நேரடியாக `/photos/123`-க்குச் சென்றால், இடைமறிப்பு தூண்டப்படாது, மற்றும் `photos/[id]/page.js`-இல் உள்ள பிரத்யேக பக்கம் சாதாரணமாக ரெண்டர் செய்யப்படும்.

இந்த முறை, இணை வழித்தடங்களை (`@modal` ஸ்லாட்) மேம்பட்ட ரூட்டிங் மரபுகளுடன் இணைத்து, கைமுறையாக செயல்படுத்துவதற்கு மிகவும் சிக்கலான ஒரு தடையற்ற பயனர் அனுபவத்தை உருவாக்குகிறது.

சிறந்த நடைமுறைகள் மற்றும் பொதுவான தவறுகள்

ரூட் குழுக்கள் சிறந்த நடைமுறைகள்

• விளக்கமான பெயர்களைப் பயன்படுத்துங்கள்: உங்கள் திட்டக் கட்டமைப்பை சுய-ஆவணப்படுத்தும் வகையில் (auth), (marketing), அல்லது (protected) போன்ற அர்த்தமுள்ள பெயர்களைத் தேர்ந்தெடுக்கவும்.
• முடிந்தவரை தட்டையாக வைத்திருங்கள்: ரூட் குழுக்களை அதிகமாக உள்ளிணைப்பதைத் தவிர்க்கவும். ஒரு தட்டையான கட்டமைப்பு பொதுவாக புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதானது.
• அவற்றின் நோக்கத்தை நினைவில் கொள்ளுங்கள்: அவற்றை தளவமைப்புப் பகிர்வு மற்றும் அமைப்புக்காகப் பயன்படுத்தவும், URL பிரிவுகளை உருவாக்குவதற்காக அல்ல.

இணை வழித்தடங்கள் சிறந்த நடைமுறைகள்

• எப்போதும் ஒரு `default.js`-ஐ வழங்கவும்: இணை வழித்தடங்களின் எந்தவொரு முக்கியமற்ற பயன்பாட்டிற்கும், ஆரம்ப சுமைகள் மற்றும் பொருந்தாத நிலைகளை நளினமாகக் கையாள ஒரு `default.js` கோப்பைச் சேர்க்கவும்.
• நுணுக்கமான ஏற்றுதல் நிலைகளைப் பயன்படுத்தவும்: பயனருக்கு உடனடி பின்னூட்டம் வழங்கவும், UI நீர்வீழ்ச்சிகளைத் தடுக்கவும் ஒவ்வொரு ஸ்லாட்டின் அடைவிலும் ஒரு `loading.js` கோப்பை வைக்கவும்.
• சுதந்திரமான UI-க்குப் பயன்படுத்தவும்: ஒவ்வொரு ஸ்லாட்டின் உள்ளடக்கமும் உண்மையாகவே சுதந்திரமாக இருக்கும்போது இணை வழித்தடங்கள் பிரகாசிக்கின்றன. பேனல்கள் ஆழமாக ஒன்றோடொன்று இணைக்கப்பட்டிருந்தால், ஒரு ஒற்றை கூறு மரம் வழியாக ப்ராப்ஸ்களை அனுப்புவது ஒரு எளிய தீர்வாக இருக்கலாம்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

• மரபுகளை மறந்துவிடுதல்: ஒரு பொதுவான தவறு, ரூட் குழுக்களுக்கு அடைப்புக்குறிகளையும் `()` அல்லது இணை வழித்தட ஸ்லாட்டுகளுக்கு அட்-சின்னத்தையும் `@` மறந்துவிடுவது. இது அவை சாதாரண URL பிரிவுகளாகக் கருதப்படுவதற்கு வழிவகுக்கும்.
• `default.js`-ஐத் தவறவிடுதல்: இணை வழித்தடங்களில் மிகவும் அடிக்கடி ஏற்படும் சிக்கல், பொருந்தாத ஸ்லாட்டுகளுக்கு ஒரு பின்னடைவு `default.js` வழங்கப்படாததால் எதிர்பாராத 404 பிழைகளைக் காண்பது.
• `children`-ஐத் தவறாகப் புரிந்துகொள்ளுதல்: இணை வழித்தடங்களைப் பயன்படுத்தும் ஒரு தளவமைப்பில், `children` என்பது ஸ்லாட்டுகளில் ஒன்று மட்டுமே என்பதை நினைவில் கொள்ளுங்கள், இது அதே அடைவில் உள்ள `page.js` அல்லது உள்ளிணைக்கப்பட்ட தளவமைப்புடன் மறைமுகமாக மேப் செய்யப்படுகிறது.

முடிவுரை: வலைச் செயலிகளின் எதிர்காலத்தைக் கட்டமைத்தல்

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

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