Next.js இணையான பாதைகள்: மாறும் பக்க அமைப்புகளை உருவாக்குதல்

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

இணையான பாதைகள் என்றால் என்ன?

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

இது மிகவும் சிக்கலான மற்றும் மாறும் பயனர் இடைமுகங்களை உருவாக்குவதற்கான பல சாத்தியங்களைத் திறக்கிறது. உதாரணமாக, இணையான பாதைகளைப் பயன்படுத்தி நீங்கள்:

• பிரதான உள்ளடக்கத்துடன் ஒரு நிலையான வழிசெலுத்தல் பட்டியைப் പ്രദർശിപ്പിക്കുക.
• பிரதான பக்க ஓட்டத்தை பாதிக்காமல் மோடல் சாளரங்கள் அல்லது பக்கப் பட்டைகளை செயல்படுத்தலாம்.
• தனித்தனியாக ஏற்றப்பட்டு புதுப்பிக்கக்கூடிய சுயாதீன விட்ஜெட்களுடன் டாஷ்போர்டுகளை உருவாக்கலாம்.
• ஒட்டுமொத்த பக்க கட்டமைப்பை பாதிக்காமல் ஒரு கூறுவின் வெவ்வேறு பதிப்புகளை A/B சோதனை செய்யலாம்.

கருத்தைப் புரிந்துகொள்வது: இடங்கள்

இணையான பாதைகளின் மையக் கருத்து "இடங்கள்" என்ற கருத்தாகும். ஒரு இடம் என்பது உங்கள் தளவமைப்பில் பெயரிடப்பட்ட பகுதியாகும், அங்கு ஒரு குறிப்பிட்ட பாதைப் பகுதி வழங்கப்படுகிறது. @ சின்னத்தைத் தொடர்ந்து இடத்தின் பெயரைப் பயன்படுத்தி உங்கள் app கோப்பகத்தில் இந்த இடங்களை வரையறுக்கிறீர்கள். உதாரணமாக, @sidebar என்பது "sidebar" என்ற பெயரிடப்பட்ட இடத்தைக் குறிக்கிறது.

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

செயல்படுத்துதல்: ஒரு நடைமுறை உதாரணம்

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

1. கோப்பக அமைப்பு

முதலில், எங்கள் பயன்பாட்டிற்கான கோப்பக கட்டமைப்பை வரையறுப்போம்:

app/
  product/
    [id]/
      @cart/
        page.js  // ஷாப்பிங் கார்ட் கூறு
      page.js      // தயாரிப்பு விவரங்கள் கூறு
    layout.js   // தயாரிப்பு தளவமைப்பு
  layout.js     // ரூட் தளவமைப்பு

ஒவ்வொரு கோப்பும் எதை பிரதிபலிக்கிறது என்பது இங்கே:

• app/layout.js: முழு பயன்பாட்டிற்கான ரூட் தளவமைப்பு.
• app/product/[id]/layout.js: தயாரிப்பு விவரங்கள் பக்கத்திற்கான ஒரு குறிப்பிட்ட தளவமைப்பு. இங்கே நாம் எங்கள் இடங்களை வரையறுப்போம்.
• app/product/[id]/page.js: பிரதான தயாரிப்பு விவரங்கள் கூறு.
• app/product/[id]/@cart/page.js: ஷாப்பிங் கார்ட் கூறு, இது @cart இடத்தில் வழங்கப்படும்.

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

ரூட் தளவமைப்பில் பொதுவாக தலைப்புகள் மற்றும் அடிக்குறிப்புகள் போன்ற முழு பயன்பாட்டிலும் பகிரப்படும் கூறுகள் உள்ளன.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
My E-commerce App
        {children}
        
      
    
  );
}

3. தயாரிப்பு தளவமைப்பு (app/product/[id]/layout.js)

இது எங்கள் இடங்களை வரையறுக்கும் முக்கியமான பகுதி. பிரதான தயாரிப்பு பக்கம் மற்றும் வண்டி ஆகியவற்றுக்கான கூறுகளை நாங்கள் முட்டுகள் எனப் பெறுகிறோம், அவை முறையே page.js மற்றும் @cart/page.js உடன் ஒத்திருக்கின்றன.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}
      
    
  );
}

இந்த எடுத்துக்காட்டில், பிரதான தயாரிப்பு உள்ளடக்கம் மற்றும் வண்டி பக்கப் பட்டையை பக்கவாட்டில் நிலைநிறுத்த ஒரு எளிய flexbox தளவமைப்பைப் பயன்படுத்துகிறோம். children முட்டில் app/product/[id]/page.js இன் வழங்கப்பட்ட வெளியீடு இருக்கும், மேலும் cart முட்டில் app/product/[id]/@cart/page.js இன் வழங்கப்பட்ட வெளியீடு இருக்கும்.

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

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

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // ID அடிப்படையில் தயாரிப்பு தரவை எடுக்கவும்
  const product = await fetchProduct(id);

  return (
    

      
Product Details
      
{product.name}
      
{product.description}
      
Price: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // உங்கள் உண்மையான தரவு மீட்டெடுக்கும் தர்க்கத்துடன் மாற்றவும்
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Product ${id}`, description: `Description of Product ${id}`, price: 99.99 });
  }, 500));
}

5. ஷாப்பிங் கார்ட் கூறு (app/product/[id]/@cart/page.js)

இந்த கூறு ஷாப்பிங் கார்ட்டைக் குறிக்கிறது, இது @cart இடத்தில் வழங்கப்படும்.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
Shopping Cart
      
Items in cart: 3
      Checkout
    
  );
}

விளக்கம்

பயனர் /product/123 க்கு செல்லும்போது, Next.js:

1. ரூட் தளவமைப்பை வழங்கவும் (app/layout.js).
2. தயாரிப்பு தளவமைப்பை வழங்கவும் (app/product/[id]/layout.js).
3. தயாரிப்பு தளவமைப்பிற்குள், தயாரிப்பு விவரங்கள் கூறுகளை (app/product/[id]/page.js) children முட்டில் வழங்கவும்.
4. அதே நேரத்தில், ஷாப்பிங் கார்ட் கூறு (app/product/[id]/@cart/page.js) cart முட்டில் வழங்கவும்.

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

இணையான பாதைகளைப் பயன்படுத்துவதன் நன்மைகள்

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

கருத்தில் கொள்ள வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

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

மேம்பட்ட பயன்பாடு: நிபந்தனை ரெண்டரிங் மற்றும் டைனமிக் ஸ்லாட்டுகள்

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

நிபந்தனை ரெண்டரிங்

பயனர் பாத்திரங்கள், அங்கீகார நிலை அல்லது பிற காரணிகளின் அடிப்படையில் ஒரு ஸ்லாட்டில் வெவ்வேறு கூறுகளை நிபந்தனையுடன் ரெண்டர் செய்யலாம்.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}
      
    
  );
}

function AdminPanel() {
  return (
    

      
Admin Panel
      
Manage product details here.
    
  );
}

இந்த எடுத்துக்காட்டில், பயனருக்கு 'admin' பங்கு இருந்தால், ஷாப்பிங் கார்டுக்கு பதிலாக @cart ஸ்லாட்டில் AdminPanel கூறு ரெண்டர் செய்யப்படும்.

டைனமிக் ஸ்லாட்டுகள்

குறைவாக பொதுவானதாக இருந்தாலும், நீங்கள் *கோட்பாட்டளவில்* ஸ்லாட் பெயர்களை மாறும் வகையில் உருவாக்க *முடியும்*, ஆனால் சிக்கலான தன்மை மற்றும் சாத்தியமான செயல்திறன் தாக்கங்கள் காரணமாக இது பொதுவாக ஊக்கமளிக்கப்படுவதில்லை. முன்னரே வரையறுக்கப்பட்ட மற்றும் நன்கு புரிந்துகொள்ளப்பட்ட ஸ்லாட்டுகளைப் பயன்படுத்துவது நல்லது. மாறும் "ஸ்லாட்டுகளுக்கான" தேவை ஏற்பட்டால், முட்டுகள் மற்றும் நிபந்தனை ரெண்டரிங் கொண்ட நிலையான React கூறுகளைப் பயன்படுத்துவது போன்ற மாற்று தீர்வுகளைக் கவனியுங்கள்.

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

வெவ்வேறு வகையான பயன்பாடுகளில் இணையான பாதைகள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான சில உண்மையான உலக எடுத்துக்காட்டுகளை ஆராய்வோம்:

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

முடிவு

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

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