Next.js એપ રાઉટર: ફાઈલ-આધારિત રાઉટિંગ માટે એક વિસ્તૃત માર્ગદર્શિકા

Next.js એપ રાઉટર, જે Next.js 13 માં રજૂ કરવામાં આવ્યું હતું અને પછીના વર્ઝનમાં સ્ટાન્ડર્ડ બન્યું છે, તે આપણે એપ્લિકેશન્સનું સ્ટ્રક્ચર અને નેવિગેશન કેવી રીતે કરીએ છીએ તેમાં ક્રાંતિ લાવે છે. તે એક શક્તિશાળી અને સાહજિક ફાઈલ-આધારિત રાઉટિંગ સિસ્ટમ રજૂ કરે છે જે ડેવલપમેન્ટને સરળ બનાવે છે, પર્ફોર્મન્સ સુધારે છે, અને એકંદરે ડેવલપરના અનુભવને વધારે છે. આ વિસ્તૃત માર્ગદર્શિકા એપ રાઉટરના ફાઈલ-આધારિત રાઉટિંગમાં ઊંડાણપૂર્વક જશે, અને તમને મજબૂત અને સ્કેલેબલ Next.js એપ્લિકેશન્સ બનાવવા માટે જરૂરી જ્ઞાન અને કુશળતા પ્રદાન કરશે.

ફાઈલ-આધારિત રાઉટિંગ શું છે?

ફાઈલ-આધારિત રાઉટિંગ એ એક રાઉટિંગ સિસ્ટમ છે જ્યાં તમારી એપ્લિકેશનના રૂટ્સનું માળખું સીધું તમારી ફાઈલો અને ડિરેક્ટરીઓની ગોઠવણ દ્વારા નક્કી થાય છે. Next.js એપ રાઉટરમાં, તમે `app` ડિરેક્ટરીની અંદર ફાઈલો બનાવીને રૂટ્સને વ્યાખ્યાયિત કરો છો. દરેક ફોલ્ડર એક રૂટ સેગમેન્ટનું પ્રતિનિધિત્વ કરે છે, અને તે ફોલ્ડર્સની અંદરની ખાસ ફાઈલો વ્યાખ્યાયિત કરે છે કે તે રૂટ સેગમેન્ટને કેવી રીતે હેન્ડલ કરવામાં આવશે. આ અભિગમ ઘણા ફાયદાઓ પ્રદાન કરે છે:

• સાહજિક માળખું: ફાઈલ સિસ્ટમ એપ્લિકેશનના રૂટ સ્ટ્રક્ચરને પ્રતિબિંબિત કરે છે, જે તેને સમજવા અને નેવિગેટ કરવાનું સરળ બનાવે છે.
• ઓટોમેટિક રાઉટિંગ: Next.js તમારા ફાઈલ સ્ટ્રક્ચરના આધારે આપમેળે રૂટ્સ જનરેટ કરે છે, જે મેન્યુઅલ કન્ફિગરેશનની જરૂરિયાતને દૂર કરે છે.
• કોડ કોલોકેશન: રૂટ હેન્ડલર્સ અને UI કમ્પોનન્ટ્સ એકસાથે સ્થિત હોય છે, જે કોડની ગોઠવણ અને જાળવણીક્ષમતામાં સુધારો કરે છે.
• બિલ્ટ-ઇન સુવિધાઓ: એપ રાઉટર લેઆઉટ, ડાયનેમિક રૂટ્સ, ડેટા ફેચિંગ અને વધુ માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે, જે જટિલ રાઉટિંગ પરિસ્થિતિઓને સરળ બનાવે છે.

એપ રાઉટર સાથે પ્રારંભ કરવું

એપ રાઉટરનો ઉપયોગ કરવા માટે, તમારે નવો Next.js પ્રોજેક્ટ બનાવવાની અથવા હાલના પ્રોજેક્ટને માઇગ્રેટ કરવાની જરૂર છે. ખાતરી કરો કે તમે Next.js વર્ઝન 13 અથવા તેના પછીના વર્ઝનનો ઉપયોગ કરી રહ્યા છો.

નવો પ્રોજેક્ટ બનાવવો:

તમે નીચેના કમાન્ડનો ઉપયોગ કરીને એપ રાઉટર સાથે નવો Next.js પ્રોજેક્ટ બનાવી શકો છો:

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

હાલના પ્રોજેક્ટને માઇગ્રેટ કરવો:

હાલના પ્રોજેક્ટને માઇગ્રેટ કરવા માટે, તમારે તમારા પેજીસને `pages` ડિરેક્ટરીમાંથી `app` ડિરેક્ટરીમાં ખસેડવાની જરૂર છે. તમારે તે મુજબ તમારી રાઉટિંગ લોજિકને એડજસ્ટ કરવાની જરૂર પડી શકે છે. Next.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` ગ્રુપ હેઠળ છે. URLs અનુક્રમે `/about`, `/contact`, અને `/products` જ રહે છે.

8. ડાયનેમિક રૂટ્સ

ડાયનેમિક રૂટ્સ તમને ચલ સેગમેન્ટ્સ સાથે રૂટ્સ બનાવવાની મંજૂરી આપે છે. ડેટાબેઝ અથવા API માંથી મેળવેલા ડેટાના આધારે સામગ્રી પ્રદર્શિત કરવા માટે આ ઉપયોગી છે. ડાયનેમિક રૂટ સેગમેન્ટ્સ સેગમેન્ટના નામને ચોરસ કૌંસ (દા.ત., `[id]`) માં લપેટીને વ્યાખ્યાયિત કરવામાં આવે છે.

ઉદાહરણ:

માની લો કે તમે બ્લોગ પોસ્ટ્સને તેમની ID ના આધારે પ્રદર્શિત કરવા માટે રૂટ બનાવવા માંગો છો. તમે આના જેવું ફાઈલ સ્ટ્રક્ચર બનાવી શકો છો:

app/
  blog/
    [id]/
      page.js

`[id]` સેગમેન્ટ એ ડાયનેમિક સેગમેન્ટ છે. જ્યારે કોઈ વપરાશકર્તા `/blog/123` અથવા `/blog/456` જેવા URL પર નેવિગેટ કરે છે ત્યારે `app/blog/[id]/page.js` માંથી એક્સપોર્ટ થયેલ કમ્પોનન્ટ રેન્ડર થશે. `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. કેચ-ઓલ સેગમેન્ટ્સ

કેચ-ઓલ સેગમેન્ટ્સ તમને એવા રૂટ્સ બનાવવાની મંજૂરી આપે છે જે કોઈપણ સંખ્યાના સેગમેન્ટ્સ સાથે મેળ ખાય છે. આ CMS બનાવવા જેવી પરિસ્થિતિઓ માટે ઉપયોગી છે જ્યાં URL સ્ટ્રક્ચર વપરાશકર્તા દ્વારા નક્કી કરવામાં આવે છે. કેચ-ઓલ સેગમેન્ટ્સ સેગમેન્ટના નામ પહેલાં ત્રણ બિંદુઓ (દા.ત., `[...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

આ સેટઅપ page.js કમ્પોનન્ટને `/blog` અને `/blog/any/number/of/segments` બંને પર રેન્ડર કરશે.

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` પેજની ઉપર મોડલ તરીકે પ્રદર્શિત થાય છે. `(.)` સિન્ટેક્સ Next.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 ક્લાયન્ટને મોકલતા પહેલા ડેટા ફેચ કરવામાં આવે છે.

ક્લાયન્ટ કમ્પોનન્ટ્સ

ક્લાયન્ટ કમ્પોનન્ટ્સ ક્લાયન્ટ પર રેન્ડર થાય છે અને તમને ઇવેન્ટ લિસનર્સ, સ્ટેટ અને બ્રાઉઝર APIs જેવી ક્લાયન્ટ-સાઇડ સુવિધાઓનો ઉપયોગ કરવાની મંજૂરી આપે છે. ક્લાયન્ટ કમ્પોનન્ટનો ઉપયોગ કરવા માટે, તમારે ફાઈલની ટોચ પર `'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'` નિર્દેશ Next.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 માટે લેઆઉટનો ઉપયોગ કરો: હેડર, ફૂટર, સાઇડબાર અને અન્ય ઘટકો માટે લેઆઉટ બનાવો જે બહુવિધ પેજીસ પર શેર કરવામાં આવે છે.
• લોડિંગ UIs નો ઉપયોગ કરો: ડેટા ફેચ કરતા અથવા અન્ય એસિંક્રોનસ ઓપરેશન્સ કરતા રૂટ્સ માટે લોડિંગ UIs પ્રદાન કરો.
• એરર્સને ગ્રેસફૂલી હેન્ડલ કરો: એરર થાય ત્યારે વધુ સારો વપરાશકર્તા અનુભવ પ્રદાન કરવા માટે કસ્ટમ એરર UIs બનાવો.
• સંગઠન માટે રૂટ ગ્રુપ્સનો ઉપયોગ કરો: URL સ્ટ્રક્ચરને અસર કર્યા વિના તમારા રૂટ્સને ગોઠવવા માટે રૂટ ગ્રુપ્સનો ઉપયોગ કરો.
• પર્ફોર્મન્સ માટે સર્વર કમ્પોનન્ટ્સનો લાભ લો: સર્વર પર ડેટા ફેચ કરવા અને UI રેન્ડર કરવા માટે સર્વર કમ્પોનન્ટ્સનો ઉપયોગ કરો, જે પર્ફોર્મન્સ અને SEO માં સુધારો કરે છે.
• જ્યારે જરૂરી હોય ત્યારે ક્લાયન્ટ કમ્પોનન્ટ્સનો ઉપયોગ કરો: જ્યારે તમારે ઇવેન્ટ લિસનર્સ, સ્ટેટ અને બ્રાઉઝર APIs જેવી ક્લાયન્ટ-સાઇડ સુવિધાઓનો ઉપયોગ કરવાની જરૂર હોય ત્યારે ક્લાયન્ટ કમ્પોનન્ટ્સનો ઉપયોગ કરો.

Next.js એપ રાઉટર સાથે આંતરરાષ્ટ્રીયકરણના ઉદાહરણો

Next.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` જેવી લાઇબ્રેરીઓનો ઉપયોગ કરવામાં આવે છે.

Next.js એપ રાઉટર અને ગ્લોબલ એક્સેસિબિલિટી

વૈશ્વિક સ્તરે સુલભ વેબ એપ્લિકેશન્સ બનાવવા માટે એક્સેસિબિલિટી (a11y) સિદ્ધાંતો પર કાળજીપૂર્વક વિચારણા કરવી જરૂરી છે. Next.js એપ રાઉટર સુલભ અનુભવો બનાવવા માટે એક મજબૂત પાયો પૂરો પાડે છે, પરંતુ તમારી એપ્લિકેશન દરેક માટે, તેમની ક્ષમતાઓને ધ્યાનમાં લીધા વિના, ઉપયોગી છે તેની ખાતરી કરવા માટે શ્રેષ્ઠ પ્રથાઓ અમલમાં મૂકવી આવશ્યક છે.

મુખ્ય એક્સેસિબિલિટી વિચારણાઓ

1. સિમેન્ટિક HTML: તમારી સામગ્રીને સ્ટ્રક્ચર કરવા માટે સિમેન્ટિક HTML તત્વો (દા.ત., `<article>`, `<nav>`, `<aside>`, `<main>`) નો ઉપયોગ કરો. આ સહાયક તકનીકોને અર્થ પ્રદાન કરે છે અને વપરાશકર્તાઓને તમારી સાઇટને વધુ સરળતાથી નેવિગેટ કરવામાં મદદ કરે છે.
2. ARIA એટ્રિબ્યુટ્સ: કસ્ટમ કમ્પોનન્ટ્સ અને વિજેટ્સની સુલભતા વધારવા માટે ARIA (એક્સેસિબલ રિચ ઈન્ટરનેટ એપ્લિકેશન્સ) એટ્રિબ્યુટ્સનો ઉપયોગ કરો. ARIA એટ્રિબ્યુટ્સ સહાયક તકનીકોને તત્વોની ભૂમિકા, સ્થિતિ અને ગુણધર્મો વિશે વધારાની માહિતી પ્રદાન કરે છે.
3. કીબોર્ડ નેવિગેશન: ખાતરી કરો કે બધા ઇન્ટરેક્ટિવ તત્વો કીબોર્ડ દ્વારા સુલભ છે. વપરાશકર્તાઓ `Tab` કીનો ઉપયોગ કરીને તમારી એપ્લિકેશન દ્વારા નેવિગેટ કરી શકવા જોઈએ અને `Enter` અથવા `Space` કીનો ઉપયોગ કરીને તત્વો સાથે ક્રિયાપ્રતિક્રિયા કરી શકવા જોઈએ.
4. કલર કોન્ટ્રાસ્ટ: દ્રષ્ટિની ક્ષતિઓવાળા વપરાશકર્તાઓ માટે વાંચનક્ષમતા સુનિશ્ચિત કરવા માટે ટેક્સ્ટ અને બેકગ્રાઉન્ડ વચ્ચે પૂરતા કલર કોન્ટ્રાસ્ટનો ઉપયોગ કરો. વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ (WCAG) સામાન્ય ટેક્સ્ટ માટે ઓછામાં ઓછા 4.5:1 અને મોટા ટેક્સ્ટ માટે 3:1 ના કોન્ટ્રાસ્ટ રેશિયોની ભલામણ કરે છે.
5. ઇમેજ ઓલ્ટ ટેક્સ્ટ: બધી છબીઓ માટે વર્ણનાત્મક ઓલ્ટ ટેક્સ્ટ પ્રદાન કરો. ઓલ્ટ ટેક્સ્ટ છબીઓ માટે ટેક્સ્ટ વિકલ્પ પૂરો પાડે છે જે સ્ક્રીન રીડર્સ દ્વારા વાંચી શકાય છે.
6. ફોર્મ લેબલ્સ: `<label>` તત્વનો ઉપયોગ કરીને ફોર્મ લેબલ્સને તેમના સંબંધિત ઇનપુટ ફીલ્ડ્સ સાથે જોડો. આ વપરાશકર્તાઓને સ્પષ્ટ કરે છે કે દરેક ફીલ્ડમાં કઈ માહિતીની અપેક્ષા છે.
7. સ્ક્રીન રીડર ટેસ્ટિંગ: તમારી એપ્લિકેશન દ્રષ્ટિની ક્ષતિઓવાળા વપરાશકર્તાઓ માટે સુલભ છે તેની ખાતરી કરવા માટે સ્ક્રીન રીડર સાથે પરીક્ષણ કરો. લોકપ્રિય સ્ક્રીન રીડર્સમાં NVDA, JAWS અને VoiceOver નો સમાવેશ થાય છે.

Next.js એપ રાઉટરમાં એક્સેસિબિલિટીનો અમલ

1. Next.js લિંક કમ્પોનન્ટનો ઉપયોગ કરો: નેવિગેશન માટે `<Link>` કમ્પોનન્ટનો ઉપયોગ કરો. તે પ્રીફેચિંગ અને ફોકસ મેનેજમેન્ટ જેવી બિલ્ટ-ઇન એક્સેસિબિલિટી સુવિધાઓ પ્રદાન કરે છે.
2. ફોકસ મેનેજમેન્ટ: પેજીસ વચ્ચે નેવિગેટ કરતી વખતે અથવા મોડલ્સ ખોલતી વખતે, ખાતરી કરો કે ફોકસ યોગ્ય રીતે સંચાલિત છે. ફોકસ નવા પેજ અથવા મોડલ પર સૌથી તાર્કિક તત્વ પર સેટ થવો જોઈએ.
3. સુલભ કસ્ટમ કમ્પોનન્ટ્સ: કસ્ટમ કમ્પોનન્ટ્સ બનાવતી વખતે, ખાતરી કરો કે તેઓ ઉપર દર્શાવેલ સિદ્ધાંતોનું પાલન કરીને સુલભ છે. તમારા કમ્પોનન્ટ્સને દરેક માટે ઉપયોગી બનાવવા માટે સિમેન્ટિક HTML, ARIA એટ્રિબ્યુટ્સ અને કીબોર્ડ નેવિગેશનનો ઉપયોગ કરો.
4. લિંટિંગ અને ટેસ્ટિંગ: તમારા કોડમાં સંભવિત એક્સેસિબિલિટી સમસ્યાઓ ઓળખવા માટે ESLint જેવા લિંટિંગ સાધનોનો એક્સેસિબિલિટી પ્લગઇન્સ સાથે ઉપયોગ કરો. ઉપરાંત, તમારી એપ્લિકેશનને એક્સેસિબિલિટી ઉલ્લંઘનો માટે પરીક્ષણ કરવા માટે સ્વચાલિત પરીક્ષણ સાધનોનો ઉપયોગ કરો.

નિષ્કર્ષ

Next.js એપ રાઉટરની ફાઈલ-આધારિત રાઉટિંગ સિસ્ટમ તમારી એપ્લિકેશન્સને સ્ટ્રક્ચર અને નેવિગેટ કરવાની એક શક્તિશાળી અને સાહજિક રીત પ્રદાન કરે છે. આ માર્ગદર્શિકામાં દર્શાવેલ મુખ્ય ખ્યાલો અને શ્રેષ્ઠ પ્રથાઓને સમજીને, તમે મજબૂત, સ્કેલેબલ અને જાળવણીક્ષમ Next.js એપ્લિકેશન્સ બનાવી શકો છો. એપ રાઉટરની વિવિધ સુવિધાઓ સાથે પ્રયોગ કરો અને જાણો કે તે તમારા ડેવલપમેન્ટ વર્કફ્લોને કેવી રીતે સરળ બનાવી શકે છે અને વપરાશકર્તાના અનુભવને સુધારી શકે છે.