தமிழ்

Next.js ரூட் குழுக்களைப் பயன்படுத்தி உங்கள் வலைப் பயன்பாடுகளுக்கு சுத்தமான, ஒழுங்கமைக்கப்பட்ட மற்றும் பராமரிக்கக்கூடிய URL அமைப்பை உருவாக்குவது எப்படி என்பதை அறியுங்கள். SEO மற்றும் பயனர் அனுபவத்திற்காக ரூட்டிங்கை மேம்படுத்துங்கள்.

Next.js ரூட் குழுக்கள்: URL அமைப்பு மற்றும் ஒழுங்கமைப்பில் தேர்ச்சி பெறுதல்

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

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

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

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

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

ரூட் குழுக்களைப் பயன்படுத்துவதன் நன்மைகள்

ரூட் குழுக்களைப் பயன்படுத்துவது பல நன்மைகளை வழங்குகிறது:

Next.js இல் ரூட் குழுக்களை செயல்படுத்துவது எப்படி

Next.js இல் ரூட் குழுக்களை செயல்படுத்துவது நேரடியானது. இதோ ஒரு படிப்படியான வழிகாட்டி:

  1. ஒரு புதிய கோப்புறையை உருவாக்கவும்: உங்கள் app கோப்புறையில் (அல்லது நீங்கள் பழைய `pages` ரவுட்டரைப் பயன்படுத்தினால் pages கோப்புறையில்) ஒரு புதிய கோப்புறையை உருவாக்கி, கோப்புறை பெயரை அடைப்புக்குறிக்குள் வைக்கவும். எடுத்துக்காட்டாக: (blog), (admin), அல்லது (marketing).
  2. ரூட் கோப்புகளை உள்ளே வைக்கவும்: ரூட் கோப்புகளை (எ.கா., page.js, layout.js) ரூட் குழு கோப்புறையின் உள்ளே வைக்கவும். இந்த கோப்புகள் அந்தக் குழுவிற்கான ரூட்களை வரையறுக்கும்.
  3. ரூட்களை வரையறுக்கவும்: கோப்பு முறைமை ரூட்டிங் மரபைப் பயன்படுத்தி, Next.js இல் நீங்கள் சாதாரணமாக செய்வது போல் ரூட்களை வரையறுக்கவும்.

எடுத்துக்காட்டு: ரூட் குழுக்களுடன் வலைப்பதிவு பயன்பாடு

தொழில்நுட்பம், பயணம் மற்றும் உணவு ஆகிய வகைகளைக் கொண்ட ஒரு வலைப்பதிவு பயன்பாட்டை நீங்கள் உருவாக்குகிறீர்கள் என்று வைத்துக்கொள்வோம். ஒவ்வொரு வகைக்கான கோப்புகளையும் பின்வருமாறு ஒழுங்கமைக்க ரூட் குழுக்களைப் பயன்படுத்தலாம்:

app/
  (technology)/
    page.js        // /technology
    [slug]/page.js // /technology/[slug]
  (travel)/
    page.js        // /travel
    [slug]/page.js // /travel/[slug]
  (food)/
    page.js        // /food
    [slug]/page.js // /food/[slug]
  page.js        // /

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

மேம்பட்ட ரூட் குழுவாக்க நுட்பங்கள்

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

உள்ளமைக்கப்பட்ட ரூட் குழுக்கள்

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

app/
  (admin)/
    (users)/
      page.js        // /admin/users
      [id]/page.js // /admin/users/[id]
    (products)/
      page.js        // /admin/products
      [id]/page.js // /admin/products/[id]

இந்த எடுத்துக்காட்டில், (admin) ரூட் குழுவில் இரண்டு உள்ளமைக்கப்பட்ட ரூட் குழுக்கள் உள்ளன: (users) மற்றும் (products). இது நிர்வாக குழுவின் ஒவ்வொரு பகுதிக்கும் கோப்புகளை தனித்தனியாக ஒழுங்கமைக்க உங்களை அனுமதிக்கிறது.

ரூட் குழுக்களை சாதாரண ரூட்களுடன் இணைத்தல்

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

app/
  (blog)/
    page.js        // /blog
    [slug]/page.js // /blog/[slug]
  about/page.js   // /about
  contact/page.js // /contact

இந்த எடுத்துக்காட்டில், (blog) ரூட் குழு வலைப்பதிவுப் பகுதிக்கான ரூட்களைக் கொண்டுள்ளது, அதே நேரத்தில் about மற்றும் contact கோப்புறைகள் தனித்தனி பக்கங்களை வரையறுக்கின்றன.

ரூட் குழு பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

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

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

ரூட் குழுக்கள் பரந்த அளவிலான சூழ்நிலைகளில் பொருந்தும். இங்கே சில நிஜ உலக எடுத்துக்காட்டுகள்:

ரூட் குழுக்களை மற்ற Next.js ரூட்டிங் அம்சங்களுடன் ஒப்பிடுதல்

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

இணை ரூட்கள்

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

இடைமறிப்பு ரூட்கள்

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

தளவமைப்புகள்

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

ரூட் குழுக்களுக்கு இடம்பெயர்தல்

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

  1. குழுவாக்க வேண்டிய ரூட்களை அடையாளம் காணவும்: அவற்றின் செயல்பாடு அல்லது வகையின் அடிப்படையில் நீங்கள் குழுவாக்க விரும்பும் ரூட்களை அடையாளம் காணவும்.
  2. ரூட் குழு கோப்புறைகளை உருவாக்கவும்: ஒவ்வொரு ரூட் குழுவிற்கும் புதிய கோப்புறைகளை உருவாக்கி, கோப்புறை பெயர்களை அடைப்புக்குறிக்குள் வைக்கவும்.
  3. ரூட் கோப்புகளை நகர்த்தவும்: ரூட் கோப்புகளை பொருத்தமான ரூட் குழு கோப்புறைகளுக்கு நகர்த்தவும்.
  4. உங்கள் பயன்பாட்டைச் சோதிக்கவும்: எல்லா ரூட்களும் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டை முழுமையாக சோதிக்கவும்.
  5. இணைப்புகளைப் புதுப்பிக்கவும்: உங்களிடம் ஏதேனும் ஹார்ட்கோட் செய்யப்பட்ட இணைப்புகள் இருந்தால், புதிய ரூட் கட்டமைப்பைப் பிரதிபலிக்கும் வகையில் அவற்றைப் புதுப்பிக்கவும் (இருப்பினும், நீங்கள் `Link` கூறுகளைப் பயன்படுத்தினால், அது தானாகவே மாற்றங்களைக் கையாள வேண்டும்).

பொதுவான சிக்கல்களை சரிசெய்தல்

ரூட் குழுக்கள் பொதுவாகப் பயன்படுத்த எளிதானவை என்றாலும், நீங்கள் சில பொதுவான சிக்கல்களை சந்திக்க நேரிடலாம். இங்கே சில சரிசெய்தல் குறிப்புகள்:

Next.js இல் ரூட்டிங்கின் எதிர்காலம்

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

முடிவுரை

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

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