Next.js இடைமறிப்பு வழிகள்: மோடல் மற்றும் ஓவர்லே பேட்டர்ன்களில் தேர்ச்சி பெறுதல்

Next.js, ஒரு பிரபலமான ரியாக்ட் ஃபிரேம்வொர்க், செயல்திறன் மிக்க மற்றும் அளவிடக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க சக்திவாய்ந்த அம்சங்களை வழங்குகிறது. அவற்றில் ஒன்றான, இடைமறிப்பு வழிகள் (Interception Routes), சிக்கலான ரூட்டிங் சூழ்நிலைகளைக் கையாள ஒரு நுட்பமான வழியை வழங்குகிறது, குறிப்பாக மோடல் மற்றும் ஓவர்லே பேட்டர்ன்களை செயல்படுத்தும்போது. இந்த விரிவான வழிகாட்டி, தடையற்ற மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்க இடைமறிப்பு வழிகளை எவ்வாறு பயன்படுத்துவது என்பதை ஆராய்கிறது.

இடைமறிப்பு வழிகள் என்றால் என்ன?

இடைமறிப்பு வழிகள், உலாவியில் URL-ஐ மாற்றாமல் ஒரு வழியை இடைமறித்து வேறு பயனர் இடைமுகத்தை (UI) ரெண்டர் செய்ய உங்களை அனுமதிக்கின்றன. இதை பயனர் அனுபவத்தை மேம்படுத்தும் ஒரு தற்காலிக மாற்றுப்பாதையாகக் கருதலாம். இது குறிப்பாகப் பின்வருவனவற்றிற்கு பயனுள்ளதாக இருக்கும்:

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

மோடல்கள் மற்றும் ஓவர்லேக்களுக்கு இடைமறிப்பு வழிகளை ஏன் பயன்படுத்த வேண்டும்?

மோடல்கள் மற்றும் ஓவர்லேக்களைக் கையாளும் பாரம்பரிய முறைகள் பெரும்பாலும் ஒரு காம்போனென்டிற்குள் ஸ்டேட்டை நிர்வகிப்பதை உள்ளடக்கியது, இது சிக்கலானதாக மாறி செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். இடைமறிப்பு வழிகள் பல நன்மைகளை வழங்குகின்றன:

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

Next.js-இல் இடைமறிப்பு வழிகளை அமைத்தல்

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

திட்ட அமைப்பு

முதலில், டைரக்டரி கட்டமைப்பை வரையறுப்போம். ஒவ்வொரு தயாரிப்புக்கும் ஒரு தனித்துவமான ஐடி கொண்ட ஒரு `products` டைரக்டரி இருப்பதாக வைத்துக்கொள்வோம்.

app/
  products/
    [id]/
      page.js       // தயாரிப்பு விவரங்கள் பக்கம்
    @modal/
      [id]/
        page.js   // தயாரிப்பு விவரங்களுக்கான மோடல் உள்ளடக்கம்
    default.js  // products டைரக்டரிக்கான லேஅவுட்
  page.js           // முகப்பு பக்கம்

விளக்கம்

• `app/products/[id]/page.js`: இது முக்கிய தயாரிப்பு விவரங்கள் பக்கம்.
• `app/products/@modal/[id]/page.js`: இது மோடல் உள்ளடக்கத்தை ரெண்டர் செய்யும் இடைமறிப்பு வழியை வரையறுக்கிறது. `@modal` மரபைக் கவனியுங்கள் – Next.js இடைமறிப்பு வழியை அடையாளம் காண இது முக்கியமானது.
• `app/products/default.js`: இது `products` டைரக்டரிக்கான லேஅவுட். இந்த லேஅவுட்டிற்குள் `@modal` வழியை வைப்பது அவசியம்.
• `app/page.js`: முகப்பு பக்கம், இது எங்கள் தயாரிப்புகளுக்கான இணைப்புகளைக் கொண்டிருக்கும்.

குறியீடு செயல்படுத்தல்

1. முகப்பு பக்கம் (app/page.js)

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

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'மடிக்கணினி' },
 { id: '2', name: 'ஸ்மார்ட்போன்' },
 { id: '3', name: 'டேப்லெட்' },
];

export default function Home() {
 return (
 

 
தயாரிப்பு பட்டியல்
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. தயாரிப்பு விவரங்கள் பக்கம் (app/products/[id]/page.js)

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

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
தயாரிப்பு விவரங்கள்
 
தயாரிப்பு ஐடி: {id}
 
இது முழு தயாரிப்பு விவரங்கள் பக்கம்.
 தயாரிப்பு பட்டியலுக்குத் திரும்பு
 
 );
}

3. மோடல் உள்ளடக்கம் (app/products/@modal/[id]/page.js)

இது முக்கியமான பகுதி – இடைமறிப்பு வழி. இது அதே தயாரிப்பு ஐடியைப் பயன்படுத்தி மோடல் உள்ளடக்கத்தை ரெண்டர் செய்கிறது. ஐடியை அணுக `useParams` ஹூக்கைப் பயன்படுத்துவதைக் கவனியுங்கள்.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
தயாரிப்பு மோடல்
 
தயாரிப்பு ஐடி: {id}
 
இந்த உள்ளடக்கம் ஒரு மோடலில் ரெண்டர் செய்யப்படுகிறது!
  history.back()}>மோடலை மூடு
 
 
 );
}

குறிப்பு: `'use client';` டைரக்டிவ் கிளையன்ட் பக்க ஊடாட்டத்திற்கு அவசியம், குறிப்பாக `useParams` ஐப் பயன்படுத்தும்போது.

ஸ்டைலிங் (modal.module.css): அடிப்படை மோடல் ஸ்டைலிங்கிற்கு ஒரு எளிய CSS மாட்யூல் பயன்படுத்தப்படுகிறது. மோடலை சரியாக நிலைநிறுத்த இது முக்கியமானது.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* இது மேலே இருப்பதை உறுதிசெய்யவும் */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. லேஅவுட் (app/products/default.js)

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

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

இது எப்படி வேலை செய்கிறது

1. ஒரு பயனர் முகப்பு பக்கத்தில் ஒரு தயாரிப்பு இணைப்பைக் கிளிக் செய்யும்போது (எ.கா., `/products/1`), Next.js இதை `products` டைரக்டரிக்குள் ஒரு வழியாக அடையாளம் காண்கிறது.
2. `@modal` இடைமறிப்பு வழி இருப்பதால், Next.js `@modal` இன் கீழ் பொருந்தும் வழி உள்ளதா என்று சரிபார்க்கிறது.
3. ஒரு பொருத்தம் கண்டறியப்பட்டால் (எ.கா., `/products/@modal/1`), Next.js `app/products/@modal/[id]/page.js` இலிருந்து உள்ளடக்கத்தை தற்போதைய பக்கத்திற்குள் ரெண்டர் செய்கிறது. உலாவியில் URL `/products/1` ஆகவே இருக்கும்.
4. `modalOverlay` ஸ்டைல்கள் மோடலை கீழே உள்ள உள்ளடக்கத்தின் மேல் நிலைநிறுத்துகின்றன.
5. "மோடலை மூடு" என்பதைக் கிளிக் செய்வது `history.back()` ஐப் பயன்படுத்தி பின்னோக்கிச் செல்கிறது, திறம்பட மோடலை மூடி முந்தைய நிலைக்குத் திரும்புகிறது.

மேம்பட்ட இடைமறிப்பு வழி நுட்பங்கள்

1. பின் பொத்தானைக் கையாளுதல்

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

எடுத்துக்காட்டில் பயன்படுத்தப்படும் `history.back()` முறை உலாவியின் வரலாற்றில் ஒரு படி பின்னோக்கிச் செல்வதன் மூலம் இந்த விளைவை அடைகிறது. இருப்பினும், மிகவும் சிக்கலான சூழ்நிலைகளுக்கு, தற்போதைய ரூட்டிங் ஸ்டேட்டைக் கருத்தில் கொள்ளும் ஒரு தனிப்பயன் பின் பொத்தான் ஹேண்ட்லரை நீங்கள் செயல்படுத்த வேண்டியிருக்கலாம்.

2. டைனமிக் மோடல் உள்ளடக்கம்

நிஜ உலக பயன்பாடுகளில், மோடல் உள்ளடக்கம் பெரும்பாலும் டைனமிக்காக இருக்கும், தயாரிப்பு ஐடியின் அடிப்படையில் ஒரு ஏபிஐ அல்லது தரவுத்தளத்திலிருந்து பெறப்படும். தேவையான தரவைப் பெற மோடல் காம்போனென்டிற்குள் `fetch` ஏபிஐ அல்லது SWR அல்லது React Query போன்ற தரவுப் பெறும் லைப்ரரியைப் பயன்படுத்தலாம்.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // உங்கள் ஏபிஐ எண்ட்பாயிண்டுடன் மாற்றவும்
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
ஏற்றப்படுகிறது...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... மற்ற தயாரிப்பு விவரங்கள் ... */}
  history.back()}>மோடலை மூடு
 
 );
}

3. அடுக்கு மோடல்கள்

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

4. 404 பிழைகளைக் கையாளுதல்

ஒரு பயனர் செல்லாத தயாரிப்பு ஐடியுடன் ஒரு மோடல் URL க்குச் செல்லும் சூழ்நிலையைக் கவனியுங்கள் (எ.கா., `/products/@modal/nonexistent`). ஒரு பயனர் நட்பு 404 பக்கத்தைக் காண்பிக்க அல்லது பயனரை ஒரு செல்லுபடியாகும் தயாரிப்பு பக்கத்திற்குத் திருப்பிவிட சரியான பிழை கையாளுதலை நீங்கள் செயல்படுத்த வேண்டும்.

// app/products/@modal/[id]/page.js

// ... (காம்போனென்டின் மீதி)

 if (!product) {
 return 
தயாரிப்பு கிடைக்கவில்லை.
; // அல்லது ஒரு 404 பக்கத்திற்குத் திருப்பிவிடவும்
 }

// ... (காம்போனென்டின் மீதி)

5. ஓவர்லே பேட்டர்ன்கள்

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

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

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

எடுத்துக்காட்டு: சர்வதேச இ-காமர்ஸ் தளம் ஒரு உலகளாவிய இ-காமர்ஸ் தளத்தை கற்பனை செய்து பாருங்கள். ஒரு பயனர் ஒரு தயாரிப்பைக் கிளிக் செய்யும்போது, விவரங்கள் ஒரு மோடலில் திறக்கப்படுகின்றன. URL `/products/[product_id]` ஆக மாறுகிறது, இது நேரடி இணைப்பு மற்றும் எஸ்சிஓ நன்மைகளை அனுமதிக்கிறது. பயனர் மோடல் பக்கத்தில் மொழிகளை மாற்றினால் (எ.கா., ஆங்கிலத்திலிருந்து ஸ்பானிஷ் வரை), தயாரிப்பு விவரங்கள் தேர்ந்தெடுக்கப்பட்ட மொழியில் பெறப்பட்டு, மோடல் உள்ளடக்கம் தடையின்றி புதுப்பிக்கப்படுகிறது. மேலும், தளம் பயனரின் இருப்பிடத்தைக் கண்டறிந்து (ஒப்புதலுடன்) அவர்களின் பிராந்தியத்திற்குப் பொருத்தமான ஷிப்பிங் தகவலை மோடலில் காண்பிக்கலாம்.

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

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

இடைமறிப்பு வழிகளுக்கான மாற்று வழிகள்

இடைமறிப்பு வழிகள் மோடல் மற்றும் ஓவர்லே பேட்டர்ன்களுக்கு ஒரு சக்திவாய்ந்த தீர்வை வழங்கினாலும், மற்ற அணுகுமுறைகளையும் கருத்தில் கொள்ளலாம்:

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

முடிவுரை

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

கூடுதல் ஆதாரங்கள்

• Next.js இடைமறிப்பு வழிகள் ஆவணம்
• ரியாக்ட் ஆவணம்