Next.js Rakenduse Ruuter: Põhjalik Juhend Failipõhiseks Marsruutimiseks

Next.js Rakenduse Ruuter (App Router), mis võeti kasutusele Next.js 13-s ja muutus standardiks hilisemates versioonides, muudab põhjalikult seda, kuidas me rakendusi struktureerime ja navigeerime. See tutvustab võimsat ja intuitiivset failipõhist marsruutimissüsteemi, mis lihtsustab arendust, parandab jõudlust ja täiustab üldist arendajakogemust. See põhjalik juhend süveneb Rakenduse Ruuteri failipõhisesse marsruutimisse, pakkudes teile teadmisi ja oskusi robustsete ja skaleeritavate Next.js rakenduste ehitamiseks.

Mis on failipõhine marsruutimine?

Failipõhine marsruutimine on marsruutimissüsteem, kus teie rakenduse marsruutide struktuur on otse määratud teie failide ja kaustade korraldusega. Next.js Rakenduse Ruuteris määratlete marsruudid, luues faile `app` kausta. Iga kaust esindab marsruudi segmenti ja nendes kaustades olevad erifailid määravad, kuidas seda marsruudi segmenti käsitletakse. Sellel lähenemisel on mitmeid eeliseid:

• Intuitiivne struktuur: Failisüsteem peegeldab rakenduse marsruudi struktuuri, muutes selle mõistmise ja navigeerimise lihtsaks.
• Automaatne marsruutimine: Next.js genereerib automaatselt marsruute teie failistruktuuri põhjal, välistades vajaduse käsitsi konfigureerimiseks.
• Koodi kolokatsioon: Marsruudi käsitlejad ja kasutajaliidese komponendid asuvad koos, parandades koodi organiseeritust ja hooldatavust.
• Sisseehitatud funktsioonid: Rakenduse Ruuter pakub sisseehitatud tuge paigutustele, dünaamilistele marsruutidele, andmete pärimisele ja muule, lihtsustades keerukaid marsruutimise stsenaariume.

Rakenduse Ruuteriga alustamine

Rakenduse Ruuteri kasutamiseks peate looma uue Next.js projekti või migreerima olemasoleva projekti. Veenduge, et kasutate Next.js versiooni 13 või uuemat.

Uue projekti loomine:

Saate luua uue Next.js projekti koos Rakenduse Ruuteriga, kasutades järgmist käsku:

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

            

              
                Copy
              
            
          

Olemasoleva projekti migreerimine:

Olemasoleva projekti migreerimiseks peate oma lehed teisaldama `pages` kaustast `app` kausta. Võimalik, et peate vastavalt kohandama oma marsruutimise loogikat. Next.js pakub migreerimisjuhendit, mis aitab teid selles protsessis.

Failipõhise marsruutimise põhimõisted

Rakenduse Ruuter tutvustab mitmeid spetsiaalseid faile ja konventsioone, mis määravad, kuidas teie marsruute käsitletakse:

1. `app` kaust

`app` kaust on teie rakenduse marsruutide juur. Kõiki selles kaustas olevaid faile ja kaustu kasutatakse marsruutide genereerimiseks. Rakenduse Ruuter ignoreerib kõike, mis asub väljaspool `app` kausta (näiteks `pages` kaust, kui te migreerite).

2. `page.js` fail

`page.js` (või `page.jsx`, `page.ts`, `page.tsx`) fail on Rakenduse Ruuteri kõige fundamentaalsem osa. See määratleb kasutajaliidese komponendi, mis renderdatakse konkreetse marsruudi segmendi jaoks. See on **nõutav** fail iga marsruudi segmendi jaoks, millele soovite otse juurde pääseda.

Näide:

Kui teil on selline failistruktuur:

            app/
  about/
    page.js

            

              
                Copy
              
            
          

`app/about/page.js` failist eksporditud komponent renderdatakse, kui kasutaja navigeerib aadressile `/about`.

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

export default function AboutPage() {
  return (
    <div>
      <h1>Meist</h1>
      <p>Lisateave meie ettevõtte kohta.</p>
    </div>
  );
}

            

              
                Copy
              
            
          

3. `layout.js` fail

`layout.js` (või `layout.jsx`, `layout.ts`, `layout.tsx`) fail määratleb kasutajaliidese, mis on jagatud mitme lehe vahel marsruudi segmendis. Paigutused on kasulikud ühtsete päiste, jaluste, külgribade ja muude elementide loomiseks, mis peaksid olema mitmel lehel.

Näide:

Oletame, et soovite lisada päise nii `/about` lehele kui ka hüpoteetilisele `/about/team` lehele. Saate luua `layout.js` faili `app/about` kausta:

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

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>Meie ettevõttest</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

            

              
                Copy
              
            
          

Atribuut `children` asendatakse `page.js` faili poolt renderdatud kasutajaliidesega samas kaustas või mis tahes pesastatud kaustades.

4. `template.js` fail

`template.js` fail sarnaneb `layout.js`-ile, kuid see loob komponendi uue instantsi iga alam-marsruudi jaoks. See on kasulik stsenaariumide puhul, kus soovite säilitada komponendi olekut või vältida uuesti renderdamist alam-marsruutide vahel navigeerimisel. Erinevalt paigutustest renderdatakse mallid navigeerimisel uuesti. Mallide kasutamine on suurepärane elementide animeerimiseks navigeerimisel.

Näide:

            // app/template.js
'use client'

import { useState } from 'react'

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

  return (
    <main>
      <p>Mall: {count}</p>
      <button onClick={() => setCount(count + 1)}>Uuenda malli</button>
      {children}
    </main>
  )
}

            

              
                Copy
              
            
          

5. `loading.js` fail

`loading.js` (või `loading.jsx`, `loading.ts`, `loading.tsx`) fail võimaldab teil luua laadimisliidese, mida kuvatakse marsruudi segmendi laadimise ajal. See on kasulik parema kasutajakogemuse pakkumiseks andmete pärimisel või muude asünkroonsete toimingute tegemisel.

Näide:

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

export default function Loading() {
  return <p>Laen teavet...</p>;
}

            

              
                Copy
              
            
          

Kui kasutaja navigeerib aadressile `/about`, kuvatakse `Loading` komponenti seni, kuni `page.js` komponent on täielikult renderdatud.

6. `error.js` fail

`error.js` (või `error.jsx`, `error.ts`, `error.tsx`) fail võimaldab teil luua kohandatud vealiidese, mida kuvatakse vea ilmnemisel marsruudi segmendis. See on kasulik kasutajasõbralikuma veateate pakkumiseks ja kogu rakenduse kokkujooksmise vältimiseks.

Näide:

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

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Tekkis viga!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Proovi uuesti</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Kui `/about` lehe renderdamisel tekib viga, kuvatakse `Error` komponent. Atribuut `error` sisaldab teavet vea kohta ja funktsioon `reset` võimaldab kasutajal proovida lehte uuesti laadida.

7. Marsruudi grupid

Marsruudi grupid `(grupiNimi)` võimaldavad teil oma marsruute organiseerida ilma URL-i struktuuri mõjutamata. Need luuakse kausta nime ümbritsemisega sulgudega. See on eriti kasulik paigutuste ja jagatud komponentide organiseerimiseks.

Näide:

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

            

              
                Copy
              
            
          

Selles näites on `about` ja `contact` lehed grupeeritud `marketing` grupi alla ja `products` leht on `shop` grupi all. URL-id jäävad vastavalt `/about`, `/contact` ja `/products`.

8. Dünaamilised marsruudid

Dünaamilised marsruudid võimaldavad teil luua marsruute muutuvate segmentidega. See on kasulik sisu kuvamiseks, mis põhineb andmebaasist või API-st päritud andmetel. Dünaamilised marsruudi segmendid määratletakse segmendi nime ümbritsemisega nurksulgudega (nt `[id]`).

Näide:

Oletame, et soovite luua marsruudi üksikute blogipostituste kuvamiseks nende ID alusel. Saate luua sellise failistruktuuri:

            app/
  blog/
    [id]/
      page.js

            

              
                Copy
              
            
          

`[id]` segment on dünaamiline segment. Komponent, mis eksporditakse failist `app/blog/[id]/page.js`, renderdatakse, kui kasutaja navigeerib URL-ile nagu `/blog/123` või `/blog/456`. Parameetri `id` väärtus on saadaval komponendi `params` atribuudis.

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

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

  // Fetch data for the blog post with the given ID
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>Blogipostitust ei leitud.</p>;
  }

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

async function fetchBlogPost(id) {
  // Simulate fetching data from a database or API
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'Minu esimene blogipostitus', content: 'See on minu esimese blogipostituse sisu.' },
        '456': { title: 'Veel üks blogipostitus', content: 'See on veel põnevam sisu.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

            

              
                Copy
              
            
          

Saate kasutada ka mitut dünaamilist segmenti ühes marsruudis. Näiteks võiks teil olla marsruut nagu `/blog/[category]/[id]`.

9. Kõikehõlmavad segmendid

Kõikehõlmavad segmendid (catch-all) võimaldavad teil luua marsruute, mis vastavad suvalisele arvule segmentidele. See on kasulik näiteks CMS-i loomisel, kus URL-i struktuuri määrab kasutaja. Kõikehõlmavad segmendid määratletakse kolme punkti lisamisega segmendi nime ette (nt `[...slug]`).

Näide:

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

            

              
                Copy
              
            
          

`[...slug]` segment sobitub mis tahes arvu segmentidega pärast `/docs`. Näiteks sobitub see `/docs/getting-started`, `/docs/api/users` ja `/docs/advanced/configuration`. Parameetri `slug` väärtus on massiiv, mis sisaldab sobitatud segmente.

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

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

  return (
    <div>
      <h1>Dokumendid</h1>
      <p>Slug: {slug ? slug.join('/') : 'Slug puudub'}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Valikulisi kõikehõlmavaid segmente saab luua, lisades segmendi nime topeltnurksulgudesse `[[...slug]]`. See muudab marsruudi segmendi valikuliseks. Näide:

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

            

              
                Copy
              
            
          

See seadistus renderdab page.js komponendi nii aadressil `/blog` kui ka `/blog/any/number/of/segments`.

10. Paralleelsed marsruudid

Paralleelsed marsruudid võimaldavad teil samaaegselt renderdada ühte või mitut lehte samas paigutuses. See on eriti kasulik keerukate paigutuste, näiteks armatuurlaudade puhul, kus lehe erinevaid osi saab laadida iseseisvalt. Paralleelsed marsruudid määratletakse sümboli `@` abil, millele järgneb pesa nimi (nt `@sidebar`, `@main`).

Näide:

            app/
  @sidebar/
    page.js  // Sisu külgribale
  @main/
    page.js  // Sisu põhiosale
  default.js // Nõutav: Määratleb paralleelsete marsruutide vaikekujunduse

            

              
                Copy
              
            
          

`default.js` fail on paralleelsete marsruutide kasutamisel nõutav. See määratleb, kuidas erinevad pesad kombineeritakse lõpliku paigutuse loomiseks.

            // 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>
  );
}

            

              
                Copy
              
            
          

11. Pealtkuulavad marsruudid

Pealtkuulavad marsruudid (Intercepting Routes) võimaldavad teil laadida marsruudi oma rakenduse teisest osast praeguse paigutuse sees. See on kasulik modaalide, pildigaleriide ja muude kasutajaliidese elementide loomiseks, mis peaksid ilmuma olemasoleva lehe sisu peale. Pealtkuulavad marsruudid määratletakse süntaksiga `(..)`, mis näitab, mitu taset kaustapuus ülespoole minna, et leida pealtkuulatav marsruut.

Näide:

            app/
  (.)photos/
    [id]/
      page.js  // Pealtkuulatav marsruut
  feed/
    page.js  // Leht, kus kuvatakse fotomodaal

            

              
                Copy
              
            
          

Selles näites, kui kasutaja klõpsab `/feed` lehel fotol, kuulatakse pealt marsruut `app/(.)photos/[id]/page.js` ja kuvatakse see modaalina `/feed` lehe peal. Süntaks `(.)` ütleb Next.js-ile, et otsida `photos/[id]` marsruuti ühe taseme võrra kõrgemalt (ehk `app` kaustast).

Andmete pärimine Rakenduse Ruuteriga

Rakenduse Ruuter pakub sisseehitatud tuge andmete pärimiseks, kasutades serveri komponente ja kliendi komponente. Serveri komponente renderdatakse serveris, samas kui kliendi komponente renderdatakse kliendis. See võimaldab teil valida iga komponendi jaoks parima lähenemisviisi vastavalt selle nõuetele.

Serveri komponendid

Serveri komponendid on Rakenduse Ruuteris vaikimisi. Need võimaldavad teil andmeid pärida otse oma komponentides ilma eraldi API marsruutideta. See võib parandada jõudlust ja lihtsustada teie koodi.

Näide:

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

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

  return (
    <div>
      <h1>Tooted</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // Simulate fetching data from a database or API
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Toode A' },
        { id: 2, name: 'Toode B' },
        { id: 3, name: 'Toode C' },
      ];
      resolve(products);
    }, 500);
  });
}

            

              
                Copy
              
            
          

Selles näites kutsutakse funktsioon `fetchProducts` otse komponendis `ProductsPage`. Komponent renderdatakse serveris ja andmed päriritakse enne HTML-i saatmist kliendile.

Kliendi komponendid

Kliendi komponente renderdatakse kliendis ja need võimaldavad teil kasutada kliendipoolseid funktsioone, nagu sündmuste kuulajad, olek ja brauseri API-d. Kliendi komponendi kasutamiseks peate faili ülaossa lisama direktiivi `'use client'`.

Näide:

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

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Loendur</h1>
      <p>Arv: {count}</p>
      <button onClick={() => setCount(count + 1)}>Suurenda</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Selles näites on `CounterPage` komponent kliendi komponent, sest see kasutab `useState` hook'i. Direktiiv `'use client'` ütleb Next.js-ile, et see komponent renderdataks kliendis.

Täiustatud marsruutimistehnikad

Rakenduse Ruuter pakub mitmeid täiustatud marsruutimistehnikaid, mida saab kasutada keerukate ja läbimõeldud rakenduste loomiseks.

1. Marsruudi käsitlejad

Marsruudi käsitlejad (Route Handlers) võimaldavad teil luua API lõpp-punkte oma `app` kaustas. See välistab vajaduse eraldi `pages/api` kausta järele. Marsruudi käsitlejad määratletakse failides nimega `route.js` (või `route.ts`) ja need ekspordivad funktsioone, mis käsitlevad erinevaid HTTP-meetodeid (nt `GET`, `POST`, `PUT`, `DELETE`).

Näide:

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

export async function GET(request) {
  // Simulate fetching users from a database
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('Received data:', body)
  return NextResponse.json({ message: 'User created' }, { status: 201 })
}

            

              
                Copy
              
            
          

See näide määratleb marsruudi käsitleja aadressil `/api/users`, mis tegeleb nii `GET` kui ka `POST` päringutega. Funktsioon `GET` tagastab kasutajate loendi ja funktsioon `POST` loob uue kasutaja.

2. Marsruudi grupid mitme paigutusega

Saate kombineerida marsruudi gruppe paigutustega, et luua oma rakenduse eri osadele erinevaid paigutusi. See on kasulik stsenaariumides, kus soovite oma saidi eri osade jaoks erinevat päist või külgriba.

Näide:

            app/
  (marketing)/
    layout.js  // Turunduse paigutus
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // Administraatori paigutus
    dashboard/
      page.js

            

              
                Copy
              
            
          

Selles näites kasutavad `about` ja `contact` lehed `marketing` paigutust, samas kui `dashboard` leht kasutab `admin` paigutust.

3. Vahevara

Vahevara (Middleware) võimaldab teil käivitada koodi enne, kui päringut teie rakenduses käsitletakse. See on kasulik ülesannete jaoks nagu autentimine, autoriseerimine, logimine ja kasutajate ümbersuunamine nende asukoha või seadme alusel.

Vahevara määratletakse failis nimega `middleware.js` (või `middleware.ts`) teie projekti juurkaustas.

Näide:

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

export function middleware(request) {
  // Check if the user is authenticated
  const isAuthenticated = false; // Replace with your authentication logic

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

  return NextResponse.next();
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/admin/:path*',
}

            

              
                Copy
              
            
          

See näide määratleb vahevara, mis kontrollib, kas kasutaja on autenditud, enne kui lubab tal pääseda mis tahes marsruudile `/admin` all. Kui kasutaja pole autenditud, suunatakse ta `/login` lehele.

Parimad praktikad failipõhiseks marsruutimiseks

Et Rakenduse Ruuteri failipõhisest marsruutimissüsteemist maksimaalselt kasu saada, kaaluge järgmisi parimaid praktikaid:

• Hoidke oma failistruktuur korras: Kasutage tähenduslikke kaustade nimesid ja grupeerige seotud failid kokku.
• Kasutage paigutusi jagatud kasutajaliidese jaoks: Looge paigutusi päiste, jaluste, külgribade ja muude elementide jaoks, mis on jagatud mitme lehe vahel.
• Kasutage laadimisliideseid: Pakkuge laadimisliideseid marsruutidele, mis pärinevad andmeid või teostavad muid asünkroonseid toiminguid.
• Käsitlege vigu sujuvalt: Looge kohandatud vealiideseid, et pakkuda paremat kasutajakogemust vigade ilmnemisel.
• Kasutage marsruudi gruppe organiseerimiseks: Kasutage marsruudi gruppe oma marsruutide organiseerimiseks ilma URL-i struktuuri mõjutamata.
• Kasutage serveri komponente jõudluse parandamiseks: Kasutage serveri komponente andmete pärimiseks ja kasutajaliidese renderdamiseks serveris, parandades jõudlust ja SEO-d.
• Kasutage kliendi komponente, kui see on vajalik: Kasutage kliendi komponente, kui peate kasutama kliendipoolseid funktsioone, nagu sündmuste kuulajad, olek ja brauseri API-d.

Rahvusvahelistamise näited Next.js Rakenduse Ruuteriga

Next.js Rakenduse Ruuter lihtsustab rahvusvahelistamist (i18n) läbi failipõhise marsruutimise. Siin on, kuidas saate i18n-i tõhusalt rakendada:

1. Alamtee marsruutimine

Organiseerige oma marsruudid keelekoodi alusel, kasutades alamteid. Näiteks:

            app/
  [locale]/
    page.tsx         // Avaleht vastavale keelele
    about/
      page.tsx     // "Meist" leht vastavale keelele

            

              
                Copy
              
            
          

            // 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(`Failed to load translations for locale ${locale}`, error);
    return dictionaries.en();
  }
};

            

              
                Copy
              
            
          

Selles seadistuses käsitleb dünaamiline marsruudi segment `[locale]` erinevaid keeli (nt `/en`, `/es`). Tõlked laaditakse dünaamiliselt vastavalt keelekoodile.

2. Domeenipõhine marsruutimine

Täiustatumaks lähenemiseks saate kasutada iga keele jaoks erinevaid domeene või alamdomeene. See hõlmab sageli lisakonfiguratsiooni teie hostingu pakkuja juures.

3. Vahevara keele tuvastamiseks

Kasutage vahevara, et automaatselt tuvastada kasutaja eelistatud keel ja suunata ta vastavalt ümber.

            // 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'); // Use "en" as the default locale
  } catch (error) {
      console.error("Error matching locale:", error);
      return 'en'; // Fallback to English if matching fails
  }
}

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).*)',
  ],
};

            

              
                Copy
              
            
          

See vahevara kontrollib, kas päringu teel on keeleprefiks. Kui ei, siis tuvastab see kasutaja eelistatud keele, kasutades `Accept-Language` päist, ja suunab ta vastavale keelespetsiifilisele teele. Keele läbirääkimiste haldamiseks kasutatakse teeke nagu `@formatjs/intl-localematcher` ja `negotiator`.

Next.js Rakenduse Ruuter ja globaalne juurdepääsetavus

Globaalselt juurdepääsetavate veebirakenduste loomine nõuab hoolikat juurdepääsetavuse (a11y) põhimõtete arvestamist. Next.js Rakenduse Ruuter pakub kindla aluse juurdepääsetavate kogemuste loomiseks, kuid on oluline rakendada parimaid praktikaid, et tagada teie rakenduse kasutatavus kõigile, olenemata nende võimetest.

Peamised juurdepääsetavuse kaalutlused

1. Semantiline HTML: Kasutage sisu struktureerimiseks semantilisi HTML-elemente (nt `<article>`, `<nav>`, `<aside>`, `<main>`). See annab abistavatele tehnoloogiatele tähenduse ja aitab kasutajatel teie saidil kergemini navigeerida.
2. ARIA atribuudid: Kasutage ARIA (Accessible Rich Internet Applications) atribuute kohandatud komponentide ja vidinate juurdepääsetavuse parandamiseks. ARIA atribuudid pakuvad abistavatele tehnoloogiatele lisateavet elementide rolli, oleku ja omaduste kohta.
3. Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid on klaviatuuri kaudu ligipääsetavad. Kasutajad peaksid saama rakenduses navigeerida `Tab` klahvi abil ja suhelda elementidega `Enter` või `Space` klahvi abil.
4. Värvikontrast: Kasutage teksti ja tausta vahel piisavat värvikontrasti, et tagada loetavus nägemispuudega kasutajatele. Veebisisu juurdepääsetavuse suunised (WCAG) soovitavad kontrastisuhet vähemalt 4.5:1 tavalise teksti ja 3:1 suure teksti jaoks.
5. Piltide alt-tekst: Pakkuge kõigile piltidele kirjeldavat alt-teksti. Alt-tekst pakub piltidele tekstilist alternatiivi, mida ekraanilugejad saavad lugeda.
6. Vormide sildid: Seostage vormide sildid nende vastavate sisestusväljadega, kasutades `<label>` elementi. See teeb kasutajatele selgeks, millist teavet igasse väljale oodatakse.
7. Ekraanilugejaga testimine: Testige oma rakendust ekraanilugejaga, et tagada selle juurdepääsetavus nägemispuudega kasutajatele. Populaarsed ekraanilugejad on NVDA, JAWS ja VoiceOver.

Juurdepääsetavuse rakendamine Next.js Rakenduse Ruuteris

1. Kasutage Next.js Link komponenti: Kasutage navigeerimiseks `<Link>` komponenti. See pakub sisseehitatud juurdepääsetavuse funktsioone, nagu eellaadimine ja fookuse haldamine.
2. Fookuse haldamine: Lehtede vahel navigeerimisel või modaalide avamisel veenduge, et fookus on õigesti hallatud. Fookus tuleks seada uue lehe või modaali kõige loogilisemale elemendile.
3. Juurdepääsetavad kohandatud komponendid: Kohandatud komponentide loomisel veenduge, et need on juurdepääsetavad, järgides ülaltoodud põhimõtteid. Kasutage semantilist HTML-i, ARIA atribuute ja klaviatuuriga navigeerimist, et muuta oma komponendid kõigile kasutatavaks.
4. Lintimine ja testimine: Kasutage lintimistööriistu nagu ESLint koos juurdepääsetavuse pistikprogrammidega, et tuvastada oma koodis potentsiaalseid juurdepääsetavuse probleeme. Samuti kasutage automatiseeritud testimisvahendeid, et testida oma rakendust juurdepääsetavuse rikkumiste suhtes.

Kokkuvõte

Next.js Rakenduse Ruuteri failipõhine marsruutimissüsteem pakub võimsat ja intuitiivset viisi oma rakenduste struktureerimiseks ja navigeerimiseks. Mõistes selles juhendis kirjeldatud põhimõisteid ja parimaid praktikaid, saate ehitada robustseid, skaleeritavaid ja hooldatavaid Next.js rakendusi. Katsetage Rakenduse Ruuteri erinevaid funktsioone ja avastage, kuidas see saab lihtsustada teie arendustöövoogu ja parandada kasutajakogemust.