Next.js ஆப் டைரக்டரி: ஒரு கோப்பு அடிப்படையிலான ரூட்டிங் புரட்சி

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

Next.js-இல் ரூட்டிங்கின் பரிணாமத்தைப் புரிந்துகொள்ளுதல்

ஆப் டைரக்டரிக்கு முன்பு, Next.js ரூட்டிங்கிற்காக பேஜஸ் டைரக்டரி-ஐ நம்பியிருந்தது. இது திறம்பட செயல்பட்டாலும், இந்த அணுகுமுறையில் சில வரம்புகள் இருந்தன. பேஜஸ் டைரக்டரி ஒரு எளிய கோப்பு அடிப்படையிலான ரூட்டிங் முறையைப் பயன்படுத்தியது, இதில் `pages` டைரக்டரியில் உள்ள ஒவ்வொரு கோப்பும் ஒரு ரூட்டுடன் தொடர்புடையது. எடுத்துக்காட்டாக, `pages/about.js` `/about` ரூட்டுடன் இணைக்கப்படும்.

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

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

ஆப் டைரக்டரியை அறிமுகப்படுத்துகிறோம்: ரூட்டிங்கிற்கான ஒரு புதிய முன்னுதாரணம்

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

இந்த அணுகுமுறை பல முக்கிய நன்மைகளை வழங்குகிறது:

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

ஆப் டைரக்டரியின் ரூட்டிங் அமைப்பில் உள்ள முக்கிய கருத்துகள்

ஆப் டைரக்டரியின் ரூட்டிங் முறையை திறம்பட பயன்படுத்த, அதன் செயல்பாட்டிற்கு அடிப்படையாக இருக்கும் முக்கிய கருத்துக்களைப் புரிந்துகொள்வது அவசியம்:

1. ரூட் செக்மென்ட்கள் மற்றும் கோப்புறைகள்

`app` டைரக்டரிக்குள் உள்ள ஒவ்வொரு கோப்புறையும் ஒரு ரூட் செக்மென்ட்-ஐக் குறிக்கிறது. கோப்புறையின் பெயர் URL-இல் உள்ள பாதை செக்மென்டுடன் தொடர்புடையது. எடுத்துக்காட்டாக, `app/blog/posts` என்ற கோப்புறை அமைப்பு `/blog/posts` ரூட்டுடன் இணைக்கப்படும்.

இந்த கட்டமைப்பைக் கவனியுங்கள்:

app/
  blog/
    posts/
      page.js

இந்த அமைப்பு `/blog/posts` இல் ஒரு ரூட்டை வரையறுக்கிறது. `posts` கோப்புறையில் உள்ள `page.js` கோப்பு ரூட் செக்மென்ட் காம்போனென்ட் ஆகும், இது அந்த ரூட்டிற்கான உள்ளடக்கத்தை வழங்குகிறது.

2. `page.js` கோப்பு: ரூட் உள்ளடக்கத்தை ரெண்டர் செய்தல்

page.js (அல்லது டைப்ஸ்கிரிப்டிற்கு page.tsx) கோப்பு ஒரு குறிப்பிட்ட ரூட் செக்மென்ட்டிற்கு ரெண்டர் செய்யப்பட வேண்டிய உள்ளடக்கத்தை வரையறுக்கும் ஒரு சிறப்பு கோப்பு. இது அந்த ரூட்டின் நுழைவுப் புள்ளி. இந்த கோப்பு அதன் இயல்புநிலை ஏற்றுமதியாக ஒரு ரியாக்ட் காம்போனென்ட்டை ஏற்றுமதி செய்ய வேண்டும்.

உதாரணம்:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <p>List of blog posts will be displayed here.</p>
    </div>
  );
}

3. லேஅவுட்கள்: பகிரப்பட்ட UI-ஐ வரையறுத்தல்

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

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

உதாரணம்:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Home</a> |
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Copyright 2023</p>
        </footer>
      </body>
    </html>
  );
}

இந்த எடுத்துக்காட்டில், `RootLayout` முழு பயன்பாட்டிற்கான அடிப்படை HTML கட்டமைப்பு, தலைப்பு, அடிக்குறிப்பு மற்றும் வழிசெலுத்தலை வரையறுக்கிறது. `app` டைரக்டரிக்குள் ரெண்டர் செய்யப்படும் எந்தப் பக்கமும் இந்த லேஅவுட்டால் சூழப்பட்டிருக்கும்.

4. டெம்ப்ளேட்கள்: ரூட்களுக்கு இடையில் நிலையைப் பாதுகாத்தல்

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

5. ரூட் குழுக்கள்: URL செக்மென்ட்கள் இல்லாமல் ரூட்களை ஒழுங்கமைத்தல்

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

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

உதாரணம்:

app/
  (marketing)/
    home/
      page.js  // /home-இல் அணுகலாம்
    about/
      page.js  // /about-இல் அணுகலாம்
  (app)/
    dashboard/
      page.js  // /dashboard-இல் அணுகலாம்

6. டைனமிக் ரூட்கள்: மாறி செக்மென்ட்களைக் கையாளுதல்

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

உதாரணம்:

app/
  blog/
    [slug]/
      page.js

இந்த எடுத்துக்காட்டில், `[slug]` ஒரு டைனமிக் ரூட் செக்மென்ட் ஆகும். `/blog/my-first-post` போன்ற ஒரு URL இந்த ரூட்டுடன் பொருந்தும், மற்றும் `slug` அளவுரு `my-first-post` ஆக அமைக்கப்படும். `page.js` காம்போனென்டிற்குள் `params` ப்ராப்பைப் பயன்படுத்தி `slug` அளவுருவை நீங்கள் அணுகலாம்.

// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

இந்த டைனமிக் ரூட்களுக்கான சாத்தியமான மதிப்புகளை நீங்கள் உருவாக்க வேண்டும். Next.js ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) மற்றும் சர்வர்-சைட் ரெண்டரிங் (SSR) ஆகியவற்றிற்காக `generateStaticParams` செயல்பாட்டை வழங்குகிறது. இந்த செயல்பாடு எந்த டைனமிக் ரூட்கள் பில்ட் நேரத்தில் முன்-ரெண்டர் செய்யப்பட வேண்டும் என்பதைக் குறிப்பிட உங்களை அனுமதிக்கிறது.

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

7. கேட்ச்-ஆல் செக்மென்ட்கள்: அறியப்படாத ரூட்களைக் கையாளுதல்

கேட்ச்-ஆல் செக்மென்ட்கள் ஒரு URL-இல் உள்ள எந்த எண்ணிக்கையிலான செக்மென்ட்களையும் பொருத்த உங்களை அனுமதிக்கும் ஒரு வகை டைனமிக் ரூட் ஆகும். அவை செக்மென்ட் பெயருக்கு முன்னால் மூன்று புள்ளிகளைச் சேர்ப்பதன் மூலம் வரையறுக்கப்படுகின்றன, எ.கா., `[...path]`. பல்வேறு URL கட்டமைப்புகளைக் கையாளக்கூடிய நெகிழ்வான ரூட்களை உருவாக்க கேட்ச்-ஆல் செக்மென்ட்கள் பயனுள்ளதாக இருக்கும்.

உதாரணம்:

app/
  docs/
    [...path]/
      page.js

இந்த எடுத்துக்காட்டில், `[...path]` ஒரு கேட்ச்-ஆல் செக்மென்ட் ஆகும். `/docs/introduction`, `/docs/api/reference`, மற்றும் `/docs/examples/basic` போன்ற URL-கள் அனைத்தும் இந்த ரூட்டுடன் பொருந்தும். `path` அளவுரு பொருந்திய செக்மென்ட்களைக் கொண்ட ஒரு வரிசையாக இருக்கும்.

// app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Documentation</h1>
      <p>Path: {path.join('/')}</p>
    </div>
  );
}

8. இணை ரூட்கள்: ஒரே நேரத்தில் பல பக்கங்களை ரெண்டர் செய்தல்

இணை ரூட்கள் ஒரே லேஅவுட்டில் ஒரே நேரத்தில் பல பக்கங்களை ரெண்டர் செய்ய உங்களை அனுமதிக்கின்றன. பல பேனல்கள் கொண்ட டேஷ்போர்டுகள் அல்லது தற்போதைய பக்கத்தின் மேல் தோன்றும் மோடல் உரையாடல்கள் போன்ற சிக்கலான UI வடிவங்களை உருவாக்க இது மிகவும் பயனுள்ளதாக இருக்கும். இணை ரூட்கள் @ சின்னத்தைப் பயன்படுத்தி வரையறுக்கப்படுகின்றன, எ.கா., `@children`, `@modal`. அவை நேரடியாக URL-இல் குறிப்பிடப்படலாம் அல்லது `useRouter` ஹூக்கைப் பயன்படுத்தி செல்லலாம்.

உதாரணம்:

app/
  @children/
    page.js // முக்கிய உள்ளடக்கத்தை வழங்குகிறது
  @modal/
    login/
      page.js // உள்நுழைவு மோடலை வழங்குகிறது

இணை ரூட்களைக் காட்ட, `` காம்போனென்ட்டைப் பயன்படுத்தவும்.

9. இடைமறிக்கும் ரூட்கள்: அதிநவீன UI மாற்றங்களை உருவாக்குதல்

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

ஆப் டைரக்டரியில் தரவுப் பெறுதல்

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

1. சர்வர் காம்போனென்ட்களில் தரவுப் பெறுதல்

சர்வர் காம்போனென்ட்கள், ஆப் டைரக்டரியில் இயல்பானவை, நேரடியாக தரவுத்தளங்கள் அல்லது API-களிலிருந்து தரவைப் பெறலாம். இது காம்போனென்ட் செயல்பாட்டிற்குள் ரெண்டரிங் செய்வதற்கு முன்பு செய்யப்படுகிறது. சர்வர் காம்போனென்ட்கள் சர்வரில் இயங்குவதால், ரகசிய விசைகள் மற்றும் நற்சான்றிதழ்களை கிளையண்டிற்கு வெளிப்படுத்தாமல் பாதுகாப்பாகச் சேர்க்கலாம். `fetch` API தானாகவே மெமோயிஸ் செய்யப்படுகிறது, அதாவது ஒரே மாதிரியான தரவுக் கோரிக்கைகள் நகலெடுக்கப்படுவதில்லை, இது செயல்திறனை மேலும் மேம்படுத்துகிறது.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // திரும்பும் மதிப்பு சீரியலைஸ் செய்யப்படவில்லை
  // நீங்கள் Date, Map, Set, போன்றவற்றையும் திரும்பப் பெறலாம்.

  if (!res.ok) {
    // இது அருகிலுள்ள `error.js` Error Boundary-ஐச் செயல்படுத்தும்
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2. கிளையன்ட் காம்போனென்ட்களில் தரவுப் பெறுதல்

கிளையன்ட் காம்போனென்ட்கள், கோப்பின் மேலே உள்ள 'use client' உத்தரவின் மூலம் சுட்டிக்காட்டப்படுகிறது, பயனரின் உலாவியில் இயங்குகின்றன. கிளையன்ட் காம்போனென்ட்களில் தரவுப் பெறுதல் பொதுவாக `useEffect` ஹூக் மற்றும் `axios` அல்லது `fetch` API போன்ற ஒரு லைப்ரரியைப் பயன்படுத்துவதை உள்ளடக்கியது. சர்வர் ஆக்சன்ஸ் கிளையன்ட் காம்போனென்ட்களிலிருந்து சர்வர் தரவை பாதுகாப்பாக மாற்ற ஒரு வழியை வழங்குகிறது. இது கிளையன்ட் காம்போனென்ட்கள் நேரடியாக API எண்ட்பாயிண்ட்களை வெளிப்படுத்தாமல் சர்வரில் உள்ள தரவுகளுடன் தொடர்புகொள்வதற்கான ஒரு பாதுகாப்பான வழியை வழங்குகிறது.

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data.title}</div>;
}

ஆப் டைரக்டரியுடன் எஸ்.இ.ஓ பரிசீலனைகள்

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

மெட்டாடேட்டா: உங்கள் லேஅவுட்கள் மற்றும் பக்கங்களுக்குள் <head> டேக்கைப் பயன்படுத்தி தலைப்பு, விளக்கம் மற்றும் முக்கிய வார்த்தைகள் போன்ற மெட்டாடேட்டாவை வரையறுக்கவும். Next.js `Metadata` API மூலம் மெட்டாடேட்டாவை நிர்வகிக்க உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது.
செமான்டிக் HTML: உங்கள் உள்ளடக்கத்தை தர்க்கரீதியாக கட்டமைக்கவும் மற்றும் தேடுபொறிகளுக்கு சூழலை வழங்கவும் செமான்டிக் HTML உறுப்புகளை (எ.கா., <article>, <nav>, <aside>) பயன்படுத்தவும்.
அணுகல்தன்மை: உங்கள் பயன்பாடு குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். இது படங்களுக்கு மாற்று உரையை வழங்குதல், சரியான தலைப்புப் படிநிலையைப் பயன்படுத்துதல் மற்றும் போதுமான வண்ண வேறுபாட்டை உறுதி செய்தல் ஆகியவற்றை உள்ளடக்கியது.
செயல்திறன்: பயனர் அனுபவம் மற்றும் தேடுபொறி தரவரிசைகளை மேம்படுத்த உங்கள் பயன்பாட்டின் செயல்திறனை மேம்படுத்தவும். இது கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்டைக் குறைத்தல், படங்களை மேம்படுத்துதல் மற்றும் கேச்சிங்கைப் பயன்படுத்துதல் ஆகியவற்றை உள்ளடக்கியது.

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

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

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

ஆப் டைரக்டரி ரூட்டிங்கின் நடைமுறை எடுத்துக்காட்டுகள்

ஆப் டைரக்டரியின் ரூட்டிங் அமைப்பின் சக்தி மற்றும் நெகிழ்வுத்தன்மையை விளக்க, சில நடைமுறை எடுத்துக்காட்டுகளைக் கருத்தில் கொள்வோம்:

1. டைனமிக் ரூட்களுடன் ஒரு எளிய வலைப்பதிவை உருவாக்குதல்

ஒரு வலைப்பதிவு பயன்பாட்டைக் கவனியுங்கள், அதில் ஒவ்வொரு வலைப்பதிவு இடுகைக்கும் அதன் ஸ்லக்கின் அடிப்படையில் ஒரு தனித்துவமான URL உள்ளது. ஆப் டைரக்டரியுடன், இதை டைனமிக் ரூட்களைப் பயன்படுத்தி எளிதாகச் செயல்படுத்தலாம்:

app/
  blog/
    [slug]/
      page.js

`[slug]` டைரக்டரி ஒரு டைனமிக் ரூட் செக்மென்ட்டைக் குறிக்கிறது, இது `/blog/` பாதையின் கீழ் உள்ள எந்த URL உடனும் பொருந்தும். `[slug]` டைரக்டரிக்குள் உள்ள `page.js` கோப்பு அதனுடன் தொடர்புடைய வலைப்பதிவு இடுகைக்கான உள்ளடக்கத்தை ரெண்டர் செய்யும்.

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  // தரவுத்தளம் அல்லது API-இலிருந்து அனைத்து வலைப்பதிவு இடுகைகளையும் பெறவும்
  const posts = await fetchPosts();

  // இடுகைகளை ஸ்லக் அளவுருக்களின் வரிசையாக மாற்றவும்
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const { slug } = params;

  // பொருந்தும் ஸ்லக்குடன் வலைப்பதிவு இடுகையைப் பெறவும்
  const post = await fetchPost(slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

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

2. இடைமறிக்கும் ரூட்களுடன் ஒரு மோடல் உரையாடலைச் செயல்படுத்துதல்

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

app/
  (.)photos/
    [id]/
      @modal/
        page.js
  page.js

இங்கே, `(.)photos/[id]/@modal/page.js` தற்போதைய பக்கத்திலிருந்து `photos/[id]` க்குச் செல்லும் கோரிக்கைகளை இடைமறிக்கிறது. ஒரு பயனர் ஒரு குறிப்பிட்ட புகைப்படத்திற்கான இணைப்பைக் கிளிக் செய்யும் போது, மோடல் உரையாடல் ஒரு புதிய பக்கத்திற்குச் செல்வதற்குப் பதிலாக தற்போதைய பக்கத்தின் மேல் தோன்றும்.

3. இணை ரூட்களுடன் ஒரு டேஷ்போர்டு லேஅவுட்டை உருவாக்குதல்

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

app/
  @analytics/
    page.js       // பகுப்பாய்வு டேஷ்போர்டு
  @settings/
    page.js       // அமைப்புகள் பேனல்
  page.js           // முக்கிய டேஷ்போர்டு லேஅவுட்

இந்த கட்டமைப்பில், `@analytics` மற்றும் `@settings` ஆகியவை முக்கிய டேஷ்போர்டு லேஅவுட்டிற்குள் ரெண்டர் செய்யப்படும் இணை ரூட்களைக் குறிக்கின்றன. ஒவ்வொரு இணை ரூட்டிற்கும் அதன் சொந்த page.js கோப்பு உள்ளது, இது அந்த பேனலுக்கான உள்ளடக்கத்தை வரையறுக்கிறது. லேஅவுட் <Slot> காம்போனென்ட்டைப் பயன்படுத்தி இவற்றை எங்கு வைப்பது என்று தீர்மானிக்கலாம்.

பேஜஸ் டைரக்டரியிலிருந்து ஆப் டைரக்டரிக்கு இடம்பெயர்தல்

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

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

முடிவுரை

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

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