నెక్స్ట్.js యాప్ రౌటర్: ఫైల్-ఆధారిత రౌటింగ్‌పై ఒక సమగ్ర గైడ్

నెక్స్ట్.js యాప్ రౌటర్, నెక్స్ట్.js 13లో పరిచయం చేయబడి, తర్వాతి వెర్షన్లలో ప్రామాణికంగా మారింది. ఇది అప్లికేషన్‌లను మనం ఎలా నిర్మించాలి మరియు నావిగేట్ చేయాలో విప్లవాత్మకంగా మార్చింది. ఇది ఒక శక్తివంతమైన మరియు సహజమైన ఫైల్-ఆధారిత రౌటింగ్ వ్యవస్థను పరిచయం చేస్తుంది. ఇది డెవలప్‌మెంట్‌ను సులభతరం చేస్తుంది, పనితీరును మెరుగుపరుస్తుంది మరియు మొత్తం డెవలపర్ అనుభవాన్ని పెంచుతుంది. ఈ సమగ్ర గైడ్ యాప్ రౌటర్ యొక్క ఫైల్-ఆధారిత రౌటింగ్ గురించి లోతుగా వివరిస్తుంది, మీకు దృఢమైన మరియు స్కేలబుల్ నెక్స్ట్.js అప్లికేషన్‌లను నిర్మించడానికి అవసరమైన జ్ఞానం మరియు నైపుణ్యాలను అందిస్తుంది.

ఫైల్-ఆధారిత రౌటింగ్ అంటే ఏమిటి?

ఫైల్-ఆధారిత రౌటింగ్ అనేది ఒక రౌటింగ్ వ్యవస్థ, ఇక్కడ మీ అప్లికేషన్ యొక్క రూట్‌ల నిర్మాణం నేరుగా మీ ఫైల్స్ మరియు డైరెక్టరీల అమరిక ద్వారా నిర్ణయించబడుతుంది. నెక్స్ట్.js యాప్ రౌటర్‌లో, మీరు `app` డైరెక్టరీలో ఫైల్స్ సృష్టించడం ద్వారా రూట్‌లను నిర్వచిస్తారు. ప్రతి ఫోల్డర్ ఒక రూట్ విభాగాన్ని సూచిస్తుంది మరియు ఆ ఫోల్డర్‌లలోని ప్రత్యేక ఫైల్స్ ఆ రూట్ విభాగం ఎలా నిర్వహించబడాలో నిర్వచిస్తాయి. ఈ పద్ధతి అనేక ప్రయోజనాలను అందిస్తుంది:

• సహజమైన నిర్మాణం: ఫైల్ సిస్టమ్ అప్లికేషన్ యొక్క రూట్ నిర్మాణాన్ని ప్రతిబింబిస్తుంది, ఇది అర్థం చేసుకోవడానికి మరియు నావిగేట్ చేయడానికి సులభం చేస్తుంది.
• ఆటోమేటిక్ రౌటింగ్: నెక్స్ట్.js మీ ఫైల్ నిర్మాణం ఆధారంగా రూట్‌లను ఆటోమేటిక్‌గా రూపొందిస్తుంది, మాన్యువల్ కాన్ఫిగరేషన్ అవసరాన్ని తొలగిస్తుంది.
• కోడ్ కో-లొకేషన్: రూట్ హ్యాండ్లర్లు మరియు UI కాంపోనెంట్లు ఒకేచోట ఉంటాయి, ఇది కోడ్ ఆర్గనైజేషన్ మరియు మెయింటెనబిలిటీని మెరుగుపరుస్తుంది.
• అంతర్నిర్మిత ఫీచర్లు: యాప్ రౌటర్ లేఅవుట్‌లు, డైనమిక్ రూట్‌లు, డేటా ఫెచింగ్ మరియు మరిన్నింటికి అంతర్నిర్మిత మద్దతును అందిస్తుంది, సంక్లిష్ట రౌటింగ్ దృశ్యాలను సులభతరం చేస్తుంది.

యాప్ రౌటర్‌తో ప్రారంభించడం

యాప్ రౌటర్‌ను ఉపయోగించడానికి, మీరు కొత్త నెక్స్ట్.js ప్రాజెక్ట్‌ను సృష్టించాలి లేదా ఇప్పటికే ఉన్న ప్రాజెక్ట్‌ను మైగ్రేట్ చేయాలి. మీరు నెక్స్ట్.js వెర్షన్ 13 లేదా తర్వాతి వెర్షన్‌ను ఉపయోగిస్తున్నారని నిర్ధారించుకోండి.

కొత్త ప్రాజెక్ట్‌ను సృష్టించడం:

మీరు కింది కమాండ్‌ను ఉపయోగించి యాప్ రౌటర్‌తో కొత్త నెక్స్ట్.js ప్రాజెక్ట్‌ను సృష్టించవచ్చు:

npx create-next-app@latest my-app --example with-app

ఇప్పటికే ఉన్న ప్రాజెక్ట్‌ను మైగ్రేట్ చేయడం:

ఇప్పటికే ఉన్న ప్రాజెక్ట్‌ను మైగ్రేట్ చేయడానికి, మీరు మీ పేజీలను `pages` డైరెక్టరీ నుండి `app` డైరెక్టరీకి తరలించాలి. మీరు మీ రౌటింగ్ లాజిక్‌ను తదనుగుణంగా సర్దుబాటు చేయాల్సి రావచ్చు. ఈ ప్రక్రియలో మీకు సహాయం చేయడానికి నెక్స్ట్.js ఒక మైగ్రేషన్ గైడ్ను అందిస్తుంది.

ఫైల్-ఆధారిత రౌటింగ్ యొక్క ముఖ్య భావనలు

యాప్ రౌటర్ మీ రూట్‌లు ఎలా నిర్వహించబడాలో నిర్వచించే అనేక ప్రత్యేక ఫైల్స్ మరియు సంప్రదాయాలను పరిచయం చేస్తుంది:

1. `app` డైరెక్టరీ

`app` డైరెక్టరీ మీ అప్లికేషన్ యొక్క రూట్‌ల మూలం. ఈ డైరెక్టరీలోని అన్ని ఫైల్స్ మరియు ఫోల్డర్‌లు రూట్‌లను రూపొందించడానికి ఉపయోగించబడతాయి. `app` డైరెక్టరీ వెలుపల ఉన్న ఏదైనా (మీరు మైగ్రేట్ చేస్తుంటే `pages` డైరెక్టరీ వంటివి) యాప్ రౌటర్ ద్వారా విస్మరించబడుతుంది.

2. `page.js` ఫైల్

`page.js` (లేదా `page.jsx`, `page.ts`, `page.tsx`) ఫైల్ యాప్ రౌటర్‌లో అత్యంత ప్రాథమిక భాగం. ఇది ఒక నిర్దిష్ట రూట్ విభాగానికి రెండర్ చేయబడే UI కాంపోనెంట్‌ను నిర్వచిస్తుంది. మీరు నేరుగా యాక్సెస్ చేయాలనుకునే ఏ రూట్ విభాగానికైనా ఇది ఒక **అవసరమైన** ఫైల్.

ఉదాహరణ:

మీకు ఇలాంటి ఫైల్ నిర్మాణం ఉంటే:

app/
  about/
    page.js

ఒక వినియోగదారు `/about`కు నావిగేట్ చేసినప్పుడు `app/about/page.js` నుండి ఎక్స్‌పోర్ట్ చేయబడిన కాంపోనెంట్ రెండర్ చేయబడుతుంది.

// app/about/page.js
import React from 'react';

export default function AboutPage() {
  return (
    <div>
      <h1>మా గురించి</h1>
      <p>మా కంపెనీ గురించి మరింత తెలుసుకోండి.</p>
    </div>
  );
}

3. `layout.js` ఫైల్

`layout.js` (లేదా `layout.jsx`, `layout.ts`, `layout.tsx`) ఫైల్ ఒక రూట్ విభాగంలోని బహుళ పేజీలలో పంచుకోబడే ఒక UIని నిర్వచిస్తుంది. బహుళ పేజీలలో ఉండాల్సిన స్థిరమైన హెడర్‌లు, ఫుటర్‌లు, సైడ్‌బార్‌లు మరియు ఇతర అంశాలను సృష్టించడానికి లేఅవుట్‌లు ఉపయోగపడతాయి.

ఉదాహరణ:

మీరు `/about` పేజీ మరియు ఒక ఊహాజనిత `/about/team` పేజీ రెండింటికీ హెడర్ జోడించాలనుకుంటే. మీరు `app/about` డైరెక్టరీలో `layout.js` ఫైల్‌ను సృష్టించవచ్చు:

// app/about/layout.js
import React from 'react';

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>మా కంపెనీ గురించి</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

`children` ప్రాప్ అదే డైరెక్టరీలో లేదా ఏవైనా నెస్టెడ్ డైరెక్టరీలలోని `page.js` ఫైల్ ద్వారా రెండర్ చేయబడిన UIతో భర్తీ చేయబడుతుంది.

4. `template.js` ఫైల్

`template.js` ఫైల్ `layout.js` లాంటిదే, కానీ ఇది ప్రతి చైల్డ్ రూట్ కోసం కాంపోనెంట్ యొక్క కొత్త ఇన్‌స్టాన్స్‌ను సృష్టిస్తుంది. ఇది చైల్డ్ రూట్‌ల మధ్య నావిగేట్ చేసేటప్పుడు కాంపోనెంట్ స్టేట్‌ను నిర్వహించడానికి లేదా రీ-రెండర్‌లను నివారించడానికి ఉపయోగపడుతుంది. లేఅవుట్‌ల వలె కాకుండా, టెంప్లేట్లు నావిగేషన్‌పై రీ-రెండర్ అవుతాయి. నావిగేషన్‌పై ఎలిమెంట్‌లను యానిమేట్ చేయడానికి టెంప్లేట్‌లను ఉపయోగించడం చాలా బాగుంటుంది.

ఉదాహరణ:

// app/template.js
'use client'

import { useState } from 'react'

export default function Template({ children }) {
  const [count, setCount] = useState(0)

  return (
    <main>
      <p>టెంప్లేట్: {count}</p>
      <button onClick={() => setCount(count + 1)}>టెంప్లేట్‌ను అప్‌డేట్ చేయండి</button>
      {children}
    </main>
  )
}

5. `loading.js` ఫైల్

`loading.js` (లేదా `loading.jsx`, `loading.ts`, `loading.tsx`) ఫైల్ ఒక రూట్ విభాగం లోడ్ అవుతున్నప్పుడు ప్రదర్శించబడే ఒక లోడింగ్ UIని సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది డేటాను ఫెచ్ చేసేటప్పుడు లేదా ఇతర అసమకాలిక కార్యకలాపాలను చేసేటప్పుడు మెరుగైన వినియోగదారు అనుభవాన్ని అందించడానికి ఉపయోగపడుతుంది.

ఉదాహరణ:

// app/about/loading.js
import React from 'react';

export default function Loading() {
  return <p>మా గురించి సమాచారం లోడ్ అవుతోంది...</p>;
}

ఒక వినియోగదారు `/about`కు నావిగేట్ చేసినప్పుడు, `page.js` కాంపోనెంట్ పూర్తిగా రెండర్ అయ్యే వరకు `Loading` కాంపోనెంట్ ప్రదర్శించబడుతుంది.

6. `error.js` ఫైల్

`error.js` (లేదా `error.jsx`, `error.ts`, `error.tsx`) ఫైల్ ఒక రూట్ విభాగంలో లోపం సంభవించినప్పుడు ప్రదర్శించబడే ఒక కస్టమ్ ఎర్రర్ UIని సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది మరింత యూజర్-ఫ్రెండ్లీ ఎర్రర్ సందేశాన్ని అందించడానికి మరియు మొత్తం అప్లికేషన్ క్రాష్ అవ్వకుండా నిరోధించడానికి ఉపయోగపడుతుంది.

ఉదాహరణ:

// app/about/error.js
'use client'

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>ఒక లోపం సంభవించింది!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>మళ్లీ ప్రయత్నించండి</button>
    </div>
  );
}

`/about` పేజీని రెండర్ చేసేటప్పుడు లోపం సంభవిస్తే, `Error` కాంపోనెంట్ ప్రదర్శించబడుతుంది. `error` ప్రాప్‌లో లోపం గురించి సమాచారం ఉంటుంది, మరియు `reset` ఫంక్షన్ వినియోగదారుని పేజీని మళ్లీ లోడ్ చేయడానికి ప్రయత్నించడానికి అనుమతిస్తుంది.

7. రూట్ గ్రూప్స్

రూట్ గ్రూప్స్ `(groupName)` URL నిర్మాణాన్ని ప్రభావితం చేయకుండా మీ రూట్‌లను ఆర్గనైజ్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. అవి ఫోల్డర్ పేరును బ్రాకెట్లలో ఉంచడం ద్వారా సృష్టించబడతాయి. ఇది లేఅవుట్‌లు మరియు షేర్డ్ కాంపోనెంట్‌లను ఆర్గనైజ్ చేయడానికి ప్రత్యేకంగా సహాయపడుతుంది.

ఉదాహరణ:

app/
  (marketing)/
    about/
      page.js
    contact/
      page.js
  (shop)/
    products/
      page.js

ఈ ఉదాహరణలో, `about` మరియు `contact` పేజీలు `marketing` గ్రూప్ కింద గ్రూప్ చేయబడ్డాయి, మరియు `products` పేజీ `shop` గ్రూప్ కింద ఉంది. URLలు వరుసగా `/about`, `/contact`, మరియు `/products` గా ఉంటాయి.

8. డైనమిక్ రూట్‌లు

డైనమిక్ రూట్‌లు వేరియబుల్ విభాగాలతో రూట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి. ఇది డేటాబేస్ లేదా API నుండి ఫెచ్ చేయబడిన డేటా ఆధారంగా కంటెంట్‌ను ప్రదర్శించడానికి ఉపయోగపడుతుంది. డైనమిక్ రూట్ విభాగాలు విభాగం పేరును చదరపు బ్రాకెట్లలో (ఉదా., `[id]`) ఉంచడం ద్వారా నిర్వచించబడతాయి.

ఉదాహరణ:

మీరు వారి ID ఆధారంగా వ్యక్తిగత బ్లాగ్ పోస్ట్‌లను ప్రదర్శించడానికి ఒక రూట్‌ను సృష్టించాలనుకుంటే. మీరు ఇలాంటి ఫైల్ నిర్మాణాన్ని సృష్టించవచ్చు:

app/
  blog/
    [id]/
      page.js

`[id]` విభాగం ఒక డైనమిక్ విభాగం. `app/blog/[id]/page.js` నుండి ఎక్స్‌పోర్ట్ చేయబడిన కాంపోనెంట్ ఒక వినియోగదారు `/blog/123` లేదా `/blog/456` వంటి URLకు నావిగేట్ చేసినప్పుడు రెండర్ చేయబడుతుంది. `id` పారామీటర్ విలువ కాంపోనెంట్ యొక్క `params` ప్రాప్‌లో అందుబాటులో ఉంటుంది.

// app/blog/[id]/page.js
import React from 'react';

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

  // ఇవ్వబడిన IDతో బ్లాగ్ పోస్ట్ కోసం డేటాను ఫెచ్ చేయండి
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>బ్లాగ్ పోస్ట్ కనుగొనబడలేదు.</p>;
  }

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

async function fetchBlogPost(id) {
  // డేటాబేస్ లేదా API నుండి డేటాను ఫెచ్ చేయడాన్ని అనుకరించండి
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'నా మొదటి బ్లాగ్ పోస్ట్', content: 'ఇది నా మొదటి బ్లాగ్ పోస్ట్ యొక్క కంటెంట్.' },
        '456': { title: 'మరొక బ్లాగ్ పోస్ట్', content: 'ఇది మరికొంత ఉత్తేజకరమైన కంటెంట్.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

మీరు ఒక రూట్‌లో బహుళ డైనమిక్ విభాగాలను కూడా ఉపయోగించవచ్చు. ఉదాహరణకు, మీకు `/blog/[category]/[id]` వంటి రూట్ ఉండవచ్చు.

9. క్యాచ్-ఆల్ సెగ్మెంట్స్

క్యాచ్-ఆల్ సెగ్మెంట్స్ ఏ సంఖ్యలోనైనా సెగ్మెంట్లకు సరిపోయే రూట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి. URL నిర్మాణం వినియోగదారుచే నిర్ణయించబడే CMSను సృష్టించడం వంటి దృశ్యాలకు ఇది ఉపయోగపడుతుంది. క్యాచ్-ఆల్ సెగ్మెంట్లు సెగ్మెంట్ పేరుకు ముందు మూడు చుక్కలు (ఉదా., `[...slug]`) జోడించడం ద్వారా నిర్వచించబడతాయి.

ఉదాహరణ:

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

`[...slug]` సెగ్మెంట్ `/docs` తర్వాత ఏ సంఖ్యలోనైనా సెగ్మెంట్లకు సరిపోతుంది. ఉదాహరణకు, ఇది `/docs/getting-started`, `/docs/api/users`, మరియు `/docs/advanced/configuration`లకు సరిపోతుంది. `slug` పారామీటర్ విలువ సరిపోలిన సెగ్మెంట్లను కలిగి ఉన్న ఒక అర్రే అవుతుంది.

// app/docs/[...slug]/page.js
import React from 'react';

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

  return (
    <div>
      <h1>డాక్స్</h1>
      <p>స్లగ్: {slug ? slug.join('/') : 'స్లగ్ లేదు'}</p>
    </div>
  );
}

ఆప్షనల్ క్యాచ్-ఆల్ సెగ్మెంట్లను సెగ్మెంట్ పేరును డబుల్ స్క్వేర్ బ్రాకెట్లలో `[[...slug]]` జోడించడం ద్వారా సృష్టించవచ్చు. ఇది రూట్ సెగ్మెంట్‌ను ఆప్షనల్‌గా చేస్తుంది. ఉదాహరణ:

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

ఈ సెటప్ `/blog` మరియు `/blog/any/number/of/segments` రెండింటిలోనూ page.js కాంపోనెంట్‌ను రెండర్ చేస్తుంది.

10. ప్యారలల్ రూట్స్

ప్యారలల్ రూట్స్ ఒకే లేఅవుట్‌లో ఒకటి లేదా అంతకంటే ఎక్కువ పేజీలను ఏకకాలంలో రెండర్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. డాష్‌బోర్డ్‌లు వంటి సంక్లిష్ట లేఅవుట్‌లకు ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది, ఇక్కడ పేజీలోని విభిన్న విభాగాలు స్వతంత్రంగా లోడ్ చేయబడతాయి. ప్యారలల్ రూట్స్ `@` చిహ్నం తర్వాత స్లాట్ పేరు (ఉదా., `@sidebar`, `@main`) ఉపయోగించి నిర్వచించబడతాయి.

ఉదాహరణ:

app/
  @sidebar/
    page.js  // సైడ్‌బార్ కోసం కంటెంట్
  @main/
    page.js  // ప్రధాన విభాగం కోసం కంటెంట్
  default.js // అవసరం: ప్యారలల్ రూట్స్ కోసం డిఫాల్ట్ లేఅవుట్‌ను నిర్వచిస్తుంది

ప్యారలల్ రూట్స్ ఉపయోగిస్తున్నప్పుడు `default.js` ఫైల్ అవసరం. ఇది విభిన్న స్లాట్‌లు తుది లేఅవుట్‌ను సృష్టించడానికి ఎలా కలపబడాలో నిర్వచిస్తుంది.

// app/default.js
export default function RootLayout({ children: { sidebar, main } }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', backgroundColor: '#f0f0f0' }}>
        {sidebar}
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>
        {main}
      </main>
    </div>
  );
}

11. ఇంటర్‌సెప్టింగ్ రూట్స్

ఇంటర్‌సెప్టింగ్ రూట్స్ మీ అప్లికేషన్‌లోని వేరే భాగం నుండి ఒక రూట్‌ను ప్రస్తుత లేఅవుట్‌లో లోడ్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. ఇది మోడల్స్, ఇమేజ్ గ్యాలరీలు మరియు ఇప్పటికే ఉన్న పేజీ కంటెంట్ పైన కనిపించాల్సిన ఇతర UI ఎలిమెంట్‌లను సృష్టించడానికి ఉపయోగపడుతుంది. ఇంటర్‌సెప్టింగ్ రూట్స్ `(..)` సింటాక్స్‌ను ఉపయోగించి నిర్వచించబడతాయి, ఇది ఇంటర్‌సెప్ట్ చేయబడిన రూట్‌ను కనుగొనడానికి డైరెక్టరీ ట్రీలో ఎన్ని స్థాయిలు పైకి వెళ్లాలో సూచిస్తుంది.

ఉదాహరణ:

app/
  (.)photos/
    [id]/
      page.js  // ఇంటర్‌సెప్ట్ చేయబడిన రూట్
  feed/
    page.js  // ఫోటో మోడల్ ప్రదర్శించబడే పేజీ

ఈ ఉదాహరణలో, ఒక వినియోగదారు `/feed` పేజీలోని ఫోటోపై క్లిక్ చేసినప్పుడు, `app/(.)photos/[id]/page.js` రూట్ ఇంటర్‌సెప్ట్ చేయబడి `/feed` పేజీ పైన మోడల్‌గా ప్రదర్శించబడుతుంది. `(.)` సింటాక్స్ నెక్స్ట్.jsకు `photos/[id]` రూట్‌ను కనుగొనడానికి ఒక స్థాయి పైకి (`app` డైరెక్టరీకి) చూడమని చెబుతుంది.

యాప్ రౌటర్‌తో డేటా ఫెచింగ్

యాప్ రౌటర్ సర్వర్ కాంపోనెంట్స్ మరియు క్లయింట్ కాంపోనెంట్స్ ఉపయోగించి డేటా ఫెచింగ్ కోసం అంతర్నిర్మిత మద్దతును అందిస్తుంది. సర్వర్ కాంపోనెంట్స్ సర్వర్‌లో రెండర్ చేయబడతాయి, అయితే క్లయింట్ కాంపోనెంట్స్ క్లయింట్‌లో రెండర్ చేయబడతాయి. ఇది ప్రతి కాంపోనెంట్ యొక్క అవసరాల ఆధారంగా ఉత్తమ విధానాన్ని ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.

సర్వర్ కాంపోనెంట్స్

సర్వర్ కాంపోనెంట్స్ యాప్ రౌటర్‌లో డిఫాల్ట్. అవి ప్రత్యేక API రూట్‌ల అవసరం లేకుండా మీ కాంపోనెంట్లలో నేరుగా డేటాను ఫెచ్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి. ఇది పనితీరును మెరుగుపరుస్తుంది మరియు మీ కోడ్‌ను సులభతరం చేస్తుంది.

ఉదాహరణ:

// app/products/page.js
import React from 'react';

export default async function ProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <h1>ఉత్పత్తులు</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // డేటాబేస్ లేదా API నుండి డేటాను ఫెచ్ చేయడాన్ని అనుకరించండి
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'ఉత్పత్తి A' },
        { id: 2, name: 'ఉత్పత్తి B' },
        { id: 3, name: 'ఉత్పత్తి C' },
      ];
      resolve(products);
    }, 500);
  });
}

ఈ ఉదాహరణలో, `fetchProducts` ఫంక్షన్ నేరుగా `ProductsPage` కాంపోనెంట్‌లో కాల్ చేయబడుతుంది. కాంపోనెంట్ సర్వర్‌లో రెండర్ చేయబడుతుంది, మరియు HTML క్లయింట్‌కు పంపబడటానికి ముందు డేటా ఫెచ్ చేయబడుతుంది.

క్లయింట్ కాంపోనెంట్స్

క్లయింట్ కాంపోనెంట్స్ క్లయింట్‌లో రెండర్ చేయబడతాయి మరియు ఈవెంట్ లిజనర్లు, స్టేట్, మరియు బ్రౌజర్ APIలు వంటి క్లయింట్-సైడ్ ఫీచర్లను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తాయి. ఒక క్లయింట్ కాంపోనెంట్‌ను ఉపయోగించడానికి, మీరు ఫైల్ పైభాగంలో `'use client'` డైరెక్టివ్‌ను జోడించాలి.

ఉదాహరణ:

// app/counter/page.js
'use client'

import React, { useState } from 'react';

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>కౌంటర్</h1>
      <p>కౌంట్: {count}</p>
      <button onClick={() => setCount(count + 1)}>పెంచండి</button>
    </div>
  );
}

ఈ ఉదాహరణలో, `CounterPage` కాంపోనెంట్ `useState` హుక్‌ను ఉపయోగిస్తున్నందున ఒక క్లయింట్ కాంపోనెంట్. `'use client'` డైరెక్టివ్ నెక్స్ట్.jsకు ఈ కాంపోనెంట్‌ను క్లయింట్‌లో రెండర్ చేయమని చెబుతుంది.

అధునాతన రౌటింగ్ టెక్నిక్స్

యాప్ రౌటర్ అనేక అధునాతన రౌటింగ్ టెక్నిక్‌లను అందిస్తుంది, వీటిని సంక్లిష్టమైన మరియు అధునాతన అప్లికేషన్‌లను సృష్టించడానికి ఉపయోగించవచ్చు.

1. రూట్ హ్యాండ్లర్స్

రూట్ హ్యాండ్లర్స్ మీ `app` డైరెక్టరీలో API ఎండ్‌పాయింట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి. ఇది ప్రత్యేక `pages/api` డైరెక్టరీ అవసరాన్ని తొలగిస్తుంది. రూట్ హ్యాండ్లర్స్ `route.js` (లేదా `route.ts`) అనే ఫైల్స్‌లో నిర్వచించబడతాయి మరియు విభిన్న HTTP పద్ధతులను (ఉదా., `GET`, `POST`, `PUT`, `DELETE`) హ్యాండిల్ చేసే ఫంక్షన్‌లను ఎక్స్‌పోర్ట్ చేస్తాయి.

ఉదాహరణ:

// app/api/users/route.js
import { NextResponse } from 'next/server'

export async function GET(request) {
  // డేటాబేస్ నుండి వినియోగదారులను ఫెచ్ చేయడాన్ని అనుకరించండి
  const users = [
    { id: 1, name: 'జాన్ డో' },
    { id: 2, name: 'జేన్ డో' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('స్వీకరించిన డేటా:', body)
  return NextResponse.json({ message: 'వినియోగదారు సృష్టించబడ్డారు' }, { status: 201 })
}

ఈ ఉదాహరణ `/api/users` వద్ద `GET` మరియు `POST` అభ్యర్థనలను రెండింటినీ హ్యాండిల్ చేసే ఒక రూట్ హ్యాండ్లర్‌ను నిర్వచిస్తుంది. `GET` ఫంక్షన్ వినియోగదారుల జాబితాను తిరిగి ఇస్తుంది, మరియు `POST` ఫంక్షన్ కొత్త వినియోగదారుని సృష్టిస్తుంది.

2. బహుళ లేఅవుట్‌లతో రూట్ గ్రూప్స్

మీ అప్లికేషన్‌లోని విభిన్న విభాగాల కోసం విభిన్న లేఅవుట్‌లను సృష్టించడానికి మీరు రూట్ గ్రూప్స్‌ను లేఅవుట్‌లతో కలపవచ్చు. మీ సైట్‌లోని విభిన్న భాగాలకు వేర్వేరు హెడర్ లేదా సైడ్‌బార్ ఉండాలనుకునే దృశ్యాలకు ఇది ఉపయోగపడుతుంది.

ఉదాహరణ:

app/
  (marketing)/
    layout.js  // మార్కెటింగ్ లేఅవుట్
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // అడ్మిన్ లేఅవుట్
    dashboard/
      page.js

ఈ ఉదాహరణలో, `about` మరియు `contact` పేజీలు `marketing` లేఅవుట్‌ను ఉపయోగిస్తాయి, అయితే `dashboard` పేజీ `admin` లేఅవుట్‌ను ఉపయోగిస్తుంది.

3. మిడిల్‌వేర్

మిడిల్‌వేర్ మీ అప్లికేషన్ ద్వారా ఒక అభ్యర్థన హ్యాండిల్ చేయబడటానికి ముందు కోడ్‌ను అమలు చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది ప్రామాణీకరణ, అధికారం, లాగింగ్ మరియు వారి స్థానం లేదా పరికరం ఆధారంగా వినియోగదారులను దారి మళ్లించడం వంటి పనులకు ఉపయోగపడుతుంది.

మిడిల్‌వేర్ మీ ప్రాజెక్ట్ యొక్క మూలంలో `middleware.js` (లేదా `middleware.ts`) అనే ఫైల్‌లో నిర్వచించబడుతుంది.

ఉదాహరణ:

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  // వినియోగదారు ప్రామాణీకరించబడ్డాడా అని తనిఖీ చేయండి
  const isAuthenticated = false; // మీ ప్రామాణీకరణ లాజిక్‌తో భర్తీ చేయండి

  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// మరింత తెలుసుకోవడానికి "మ్యాచింగ్ పాత్స్" చూడండి
export const config = {
  matcher: '/admin/:path*',
}

ఈ ఉదాహరణ వినియోగదారు `/admin` కింద ఏ రూట్‌నైనా యాక్సెస్ చేయడానికి ముందు ప్రామాణీకరించబడ్డాడా అని తనిఖీ చేసే మిడిల్‌వేర్‌ను నిర్వచిస్తుంది. వినియోగదారు ప్రామాణీకరించబడకపోతే, వారు `/login` పేజీకి దారి మళ్లించబడతారు.

ఫైల్-ఆధారిత రౌటింగ్ కోసం ఉత్తమ పద్ధతులు

యాప్ రౌటర్ యొక్క ఫైల్-ఆధారిత రౌటింగ్ వ్యవస్థ నుండి అత్యధిక ప్రయోజనం పొందడానికి, కింది ఉత్తమ పద్ధతులను పరిగణించండి:

• మీ ఫైల్ నిర్మాణాన్ని వ్యవస్థీకృతంగా ఉంచండి: అర్థవంతమైన ఫోల్డర్ పేర్లను ఉపయోగించండి మరియు సంబంధిత ఫైల్స్‌ను కలిసి గ్రూప్ చేయండి.
• షేర్డ్ UI కోసం లేఅవుట్‌లను ఉపయోగించండి: బహుళ పేజీలలో షేర్ చేయబడిన హెడర్‌లు, ఫుటర్‌లు, సైడ్‌బార్‌లు మరియు ఇతర ఎలిమెంట్‌ల కోసం లేఅవుట్‌లను సృష్టించండి.
• లోడింగ్ UIలను ఉపయోగించండి: డేటాను ఫెచ్ చేసే లేదా ఇతర అసమకాలిక ఆపరేషన్‌లను చేసే రూట్‌ల కోసం లోడింగ్ UIలను అందించండి.
• లోపాలను సున్నితంగా నిర్వహించండి: లోపాలు సంభవించినప్పుడు మెరుగైన వినియోగదారు అనుభవాన్ని అందించడానికి కస్టమ్ ఎర్రర్ UIలను సృష్టించండి.
• సంస్థ కోసం రూట్ గ్రూప్స్‌ను ఉపయోగించండి: URL నిర్మాణాన్ని ప్రభావితం చేయకుండా మీ రూట్‌లను ఆర్గనైజ్ చేయడానికి రూట్ గ్రూప్స్‌ను ఉపయోగించండి.
• పనితీరు కోసం సర్వర్ కాంపోనెంట్స్‌ను ఉపయోగించుకోండి: సర్వర్‌లో డేటాను ఫెచ్ చేయడానికి మరియు UIని రెండర్ చేయడానికి సర్వర్ కాంపోనెంట్స్‌ను ఉపయోగించండి, ఇది పనితీరు మరియు SEOని మెరుగుపరుస్తుంది.
• అవసరమైనప్పుడు క్లయింట్ కాంపోనెంట్స్‌ను ఉపయోగించండి: మీకు ఈవెంట్ లిజనర్లు, స్టేట్, మరియు బ్రౌజర్ APIలు వంటి క్లయింట్-సైడ్ ఫీచర్లు అవసరమైనప్పుడు క్లయింట్ కాంపోనెంట్స్‌ను ఉపయోగించండి.

నెక్స్ట్.js యాప్ రౌటర్‌తో అంతర్జాతీయీకరణ ఉదాహరణలు

నెక్స్ట్.js యాప్ రౌటర్ ఫైల్-ఆధారిత రౌటింగ్ ద్వారా అంతర్జాతీయీకరణను (i18n) సులభతరం చేస్తుంది. ఇక్కడ మీరు i18nను ఎలా సమర్థవంతంగా అమలు చేయవచ్చో చూడండి:

1. సబ్-పాత్ రౌటింగ్

సబ్-పాత్‌లను ఉపయోగించి లోకేల్ ఆధారంగా మీ రూట్‌లను ఆర్గనైజ్ చేయండి. ఉదాహరణకు:

app/
  [locale]/
    page.tsx         // లోకేల్ కోసం హోమ్ పేజీ
    about/
      page.tsx     // లోకేల్ కోసం గురించి పేజీ

// app/[locale]/page.tsx
import { getTranslations } from './dictionaries';

export default async function HomePage({ params: { locale } }) {
  const t = await getTranslations(locale);
  return (<h1>{t.home.title}</h1>);
}

// dictionaries.js
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  es: () => import('./dictionaries/es.json').then((module) => module.default),
};

export const getTranslations = async (locale) => {
  try {
    return dictionaries[locale]() ?? dictionaries.en();
  } catch (error) {
    console.error(`లోకేల్ ${locale} కోసం అనువాదాలు లోడ్ చేయడంలో విఫలమయ్యాయి`, error);
    return dictionaries.en();
  }
};

ఈ సెటప్‌లో, `[locale]` డైనమిక్ రూట్ సెగ్మెంట్ విభిన్న లోకేల్స్‌ను (ఉదా., `/en`, `/es`) నిర్వహిస్తుంది. అనువాదాలు లోకేల్ ఆధారంగా డైనమిక్‌గా లోడ్ చేయబడతాయి.

2. డొమైన్ రౌటింగ్

మరింత అధునాతన విధానం కోసం, మీరు ప్రతి లోకేల్ కోసం వేర్వేరు డొమైన్‌లు లేదా సబ్‌డొమైన్‌లను ఉపయోగించవచ్చు. దీనికి తరచుగా మీ హోస్టింగ్ ప్రొవైడర్‌తో అదనపు కాన్ఫిగరేషన్ అవసరం.

3. లోకేల్ డిటెక్షన్ కోసం మిడిల్‌వేర్

వినియోగదారు యొక్క ఇష్టపడే లోకేల్‌ను ఆటోమేటిక్‌గా గుర్తించి, వారిని తదనుగుణంగా దారి మళ్లించడానికి మిడిల్‌వేర్‌ను ఉపయోగించండి.

// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

let locales = ['en', 'es', 'fr'];

function getLocale(request) {
  const negotiatorHeaders = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
  let languages = new Negotiator({ headers: negotiatorHeaders }).languages();

  try {
      return match(languages, locales, 'en'); // "en"ని డిఫాల్ట్ లోకేల్‌గా ఉపయోగించండి
  } catch (error) {
      console.error("లోకేల్ మ్యాచింగ్‌లో లోపం:", error);
      return 'en'; // మ్యాచింగ్ విఫలమైతే ఇంగ్లీషుకు ఫాల్‌బ్యాక్
  }
}

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    );
  }
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

ఈ మిడిల్‌వేర్ అభ్యర్థించిన పాత్‌లో లోకేల్ ప్రిఫిక్స్ ఉందో లేదో తనిఖీ చేస్తుంది. లేకపోతే, ఇది `Accept-Language` హెడర్‌ను ఉపయోగించి వినియోగదారు యొక్క ఇష్టపడే లోకేల్‌ను గుర్తించి, వారిని తగిన లోకేల్-నిర్దిష్ట పాత్‌కు దారి మళ్లిస్తుంది. లోకేల్ నెగోషియేషన్‌ను నిర్వహించడానికి `@formatjs/intl-localematcher` మరియు `negotiator` వంటి లైబ్రరీలు ఉపయోగించబడతాయి.

నెక్స్ట్.js యాప్ రౌటర్ మరియు గ్లోబల్ యాక్సెసిబిలిటీ

ప్రపంచవ్యాప్తంగా అందుబాటులో ఉండే వెబ్ అప్లికేషన్‌లను సృష్టించడానికి యాక్సెసిబిలిటీ (a11y) సూత్రాలను జాగ్రత్తగా పరిగణనలోకి తీసుకోవాలి. నెక్స్ట్.js యాప్ రౌటర్ యాక్సెస్ చేయగల అనుభవాలను నిర్మించడానికి ఒక దృఢమైన పునాదిని అందిస్తుంది, కానీ మీ అప్లికేషన్ అందరికీ, వారి సామర్థ్యాలతో సంబంధం లేకుండా ఉపయోగపడేలా ఉత్తమ పద్ధతులను అమలు చేయడం చాలా అవసరం.

ముఖ్యమైన యాక్సెసిబిలిటీ పరిగణనలు

1. సెమాంటిక్ HTML: మీ కంటెంట్‌ను నిర్మించడానికి సెమాంటిక్ HTML ఎలిమెంట్‌లను (ఉదా., `<article>`, `<nav>`, `<aside>`, `<main>`) ఉపయోగించండి. ఇది సహాయక టెక్నాలజీలకు అర్థాన్ని అందిస్తుంది మరియు వినియోగదారులు మీ సైట్‌ను సులభంగా నావిగేట్ చేయడానికి సహాయపడుతుంది.
2. ARIA అట్రిబ్యూట్స్: కస్టమ్ కాంపోనెంట్లు మరియు విడ్జెట్ల యాక్సెసిబిలిటీని పెంచడానికి ARIA (Accessible Rich Internet Applications) అట్రిబ్యూట్స్‌ను ఉపయోగించండి. ARIA అట్రిబ్యూట్స్ సహాయక టెక్నాలజీలకు ఎలిమెంట్‌ల పాత్ర, స్థితి మరియు లక్షణాల గురించి అదనపు సమాచారాన్ని అందిస్తాయి.
3. కీబోర్డ్ నావిగేషన్: అన్ని ఇంటరాక్టివ్ ఎలిమెంట్లు కీబోర్డ్ ద్వారా యాక్సెస్ చేయగలవని నిర్ధారించుకోండి. వినియోగదారులు `Tab` కీని ఉపయోగించి మీ అప్లికేషన్ ద్వారా నావిగేట్ చేయగలగాలి మరియు `Enter` లేదా `Space` కీని ఉపయోగించి ఎలిమెంట్‌లతో ఇంటరాక్ట్ అవ్వగలగాలి.
4. రంగు కాంట్రాస్ట్: దృష్టి లోపాలు ఉన్న వినియోగదారులకు చదవడానికి వీలుగా టెక్స్ట్ మరియు బ్యాక్‌గ్రౌండ్ మధ్య తగినంత రంగు కాంట్రాస్ట్‌ను ఉపయోగించండి. వెబ్ కంటెంట్ యాక్సెసిబిలిటీ గైడ్‌లైన్స్ (WCAG) సాధారణ టెక్స్ట్ కోసం కనీసం 4.5:1 మరియు పెద్ద టెక్స్ట్ కోసం 3:1 కాంట్రాస్ట్ రేషియోను సిఫార్సు చేస్తాయి.
5. ఇమేజ్ ఆల్ట్ టెక్స్ట్: అన్ని చిత్రాలకు వివరణాత్మక ఆల్ట్ టెక్స్ట్‌ను అందించండి. ఆల్ట్ టెక్స్ట్ చిత్రాలకు స్క్రీన్ రీడర్ల ద్వారా చదవగలిగే టెక్స్ట్ ప్రత్యామ్నాయాన్ని అందిస్తుంది.
6. ఫారం లేబుల్స్: `<label>` ఎలిమెంట్‌ను ఉపయోగించి ఫారం లేబుల్స్‌ను వాటి సంబంధిత ఇన్‌పుట్ ఫీల్డ్‌లతో అనుబంధించండి. ఇది ప్రతి ఫీల్డ్‌లో ఏ సమాచారం ఆశించబడుతుందో వినియోగదారులకు స్పష్టం చేస్తుంది.
7. స్క్రీన్ రీడర్ టెస్టింగ్: మీ అప్లికేషన్ దృష్టి లోపాలు ఉన్న వినియోగదారులకు అందుబాటులో ఉందో లేదో నిర్ధారించుకోవడానికి స్క్రీన్ రీడర్‌తో పరీక్షించండి. ప్రముఖ స్క్రీన్ రీడర్లలో NVDA, JAWS, మరియు VoiceOver ఉన్నాయి.

నెక్స్ట్.js యాప్ రౌటర్‌లో యాక్సెసిబిలిటీని అమలు చేయడం

1. నెక్స్ట్.js లింక్ కాంపోనెంట్‌ను ఉపయోగించండి: నావిగేషన్ కోసం `<Link>` కాంపోనెంట్‌ను ఉపయోగించండి. ఇది ప్రిఫెచింగ్ మరియు ఫోకస్ మేనేజ్‌మెంట్ వంటి అంతర్నిర్మిత యాక్సెసిబిలిటీ ఫీచర్లను అందిస్తుంది.
2. ఫోకస్ మేనేజ్‌మెంట్: పేజీల మధ్య నావిగేట్ చేసేటప్పుడు లేదా మోడల్స్ తెరిచేటప్పుడు, ఫోకస్ సరిగ్గా నిర్వహించబడుతోందని నిర్ధారించుకోండి. కొత్త పేజీ లేదా మోడల్‌లోని అత్యంత తార్కిక ఎలిమెంట్‌కు ఫోకస్ సెట్ చేయబడాలి.
3. యాక్సెస్ చేయగల కస్టమ్ కాంపోనెంట్లు: కస్టమ్ కాంపోనెంట్లను సృష్టించేటప్పుడు, పైన వివరించిన సూత్రాలను అనుసరించడం ద్వారా అవి యాక్సెస్ చేయగలవని నిర్ధారించుకోండి. మీ కాంపోనెంట్లను అందరికీ ఉపయోగపడేలా చేయడానికి సెమాంటిక్ HTML, ARIA అట్రిబ్యూట్స్ మరియు కీబోర్డ్ నావిగేషన్‌ను ఉపయోగించండి.
4. లింటింగ్ మరియు టెస్టింగ్: మీ కోడ్‌లో సంభావ్య యాక్సెసిబిలిటీ సమస్యలను గుర్తించడానికి ESLint వంటి లింటింగ్ సాధనాలను యాక్సెసిబిలిటీ ప్లగిన్‌లతో ఉపయోగించండి. అలాగే, మీ అప్లికేషన్‌ను యాక్సెసిబిలిటీ ఉల్లంఘనల కోసం పరీక్షించడానికి ఆటోమేటెడ్ టెస్టింగ్ సాధనాలను ఉపయోగించండి.

ముగింపు

నెక్స్ట్.js యాప్ రౌటర్ యొక్క ఫైల్-ఆధారిత రౌటింగ్ వ్యవస్థ మీ అప్లికేషన్‌లను నిర్మించడానికి మరియు నావిగేట్ చేయడానికి ఒక శక్తివంతమైన మరియు సహజమైన మార్గాన్ని అందిస్తుంది. ఈ గైడ్‌లో వివరించిన ముఖ్య భావనలు మరియు ఉత్తమ పద్ధతులను అర్థం చేసుకోవడం ద్వారా, మీరు దృఢమైన, స్కేలబుల్ మరియు నిర్వహించదగిన నెక్స్ట్.js అప్లికేషన్‌లను నిర్మించవచ్చు. యాప్ రౌటర్ యొక్క విభిన్న ఫీచర్లతో ప్రయోగాలు చేయండి మరియు ఇది మీ డెవలప్‌మెంట్ వర్క్‌ఫ్లోను ఎలా సులభతరం చేస్తుందో మరియు వినియోగదారు అనుభవాన్ని ఎలా మెరుగుపరుస్తుందో కనుగొనండి.