Usmerjevalnik aplikacij Next.js: Obsežen vodnik po datotečnem usmerjanju

Usmerjevalnik aplikacij Next.js (App Router), predstavljen v Next.js 13 in standard v poznejših različicah, revolucionira način, kako strukturiramo in navigiramo po aplikacijah. Uvaja zmogljiv in intuitiven datotečni sistem usmerjanja, ki poenostavlja razvoj, izboljšuje zmogljivost in nadgrajuje celotno razvijalsko izkušnjo. Ta obsežen vodnik se bo poglobil v datotečno usmerjanje z App Routerjem in vam zagotovil znanje ter veščine za izdelavo robustnih in razširljivih aplikacij Next.js.

Kaj je datotečno usmerjanje?

Datotečno usmerjanje je sistem, pri katerem je struktura poti vaše aplikacije neposredno določena z organizacijo vaših datotek in map. V usmerjevalniku aplikacij Next.js definirate poti z ustvarjanjem datotek znotraj mape `app`. Vsaka mapa predstavlja segment poti, posebne datoteke v teh mapah pa določajo, kako bo ta segment obravnavan. Ta pristop ponuja več prednosti:

Intuitivna struktura: Datotečni sistem odraža strukturo poti aplikacije, kar olajša razumevanje in navigacijo.
Samodejno usmerjanje: Next.js samodejno generira poti na podlagi vaše datotečne strukture, s čimer odpade potreba po ročni konfiguraciji.
Kolokacija kode: Upravljavci poti in komponente uporabniškega vmesnika se nahajajo skupaj, kar izboljša organizacijo kode in vzdrževanje.
Vgrajene funkcije: App Router ponuja vgrajeno podporo za postavitve, dinamične poti, pridobivanje podatkov in še več, kar poenostavlja zapletene scenarije usmerjanja.

Kako začeti z App Routerjem

Za uporabo App Routerja morate ustvariti nov projekt Next.js ali preseliti obstoječega. Prepričajte se, da uporabljate Next.js različice 13 ali novejše.

Ustvarjanje novega projekta:

Nov projekt Next.js z App Routerjem lahko ustvarite z naslednjim ukazom:

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

Selitev obstoječega projekta:

Za selitev obstoječega projekta morate premakniti svoje strani iz mape `pages` v mapo `app`. Morda boste morali ustrezno prilagoditi logiko usmerjanja. Next.js ponuja vodnik za selitev, ki vam bo pomagal pri tem procesu.

Osnovni koncepti datotečnega usmerjanja

App Router uvaja več posebnih datotek in konvencij, ki določajo, kako se obravnavajo vaše poti:

1. Mapa `app`

Mapa `app` je koren poti vaše aplikacije. Vse datoteke in mape znotraj te mape bodo uporabljene za generiranje poti. Vse, kar je zunaj mape `app` (kot je mapa `pages`, če jo selite), bo App Router prezrl.

2. Datoteka `page.js`

Datoteka `page.js` (ali `page.jsx`, `page.ts`, `page.tsx`) je najosnovnejši del App Routerja. Določa komponento uporabniškega vmesnika, ki bo upodobljena za določen segment poti. Je **obvezna** datoteka za vsak segment poti, do katerega želite neposredno dostopati.

Primer:

Če imate takšno strukturo datotek:

app/
  about/
    page.js

Komponenta, izvožena iz `app/about/page.js`, bo upodobljena, ko uporabnik obišče pot `/about`.

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

export default function AboutPage() {
  return (
    <div>
      <h1>O nas</h1>
      <p>Izvedite več o našem podjetju.</p>
    </div>
  );
}

3. Datoteka `layout.js`

Datoteka `layout.js` (ali `layout.jsx`, `layout.ts`, `layout.tsx`) določa uporabniški vmesnik, ki je skupen več stranem znotraj segmenta poti. Postavitve so uporabne za ustvarjanje doslednih glav, nog, stranskih vrstic in drugih elementov, ki morajo biti prisotni na več straneh.

Primer:

Recimo, da želite dodati glavo tako na stran `/about` kot na hipotetično stran `/about/team`. V mapi `app/about` lahko ustvarite datoteko `layout.js`:

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

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>O našem podjetju</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

Lastnost `children` bo zamenjana z uporabniškim vmesnikom, ki ga upodobi datoteka `page.js` v isti ali v kateri koli ugnezdeni mapi.

4. Datoteka `template.js`

Datoteka `template.js` je podobna `layout.js`, vendar ustvari novo instanco komponente za vsako podrejeno pot. To je uporabno v primerih, ko želite ohraniti stanje komponente ali preprečiti ponovno upodabljanje pri navigaciji med podrejenimi potmi. Za razliko od postavitev se predloge ob navigaciji ponovno upodobijo. Uporaba predlog je odlična za animiranje elementov ob navigaciji.

Primer:

// app/template.js
'use client'

import { useState } from 'react'

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

  return (
    <main>
      <p>Predloga: {count}</p>
      <button onClick={() => setCount(count + 1)}>Posodobi predlogo</button>
      {children}
    </main>
  )
}

5. Datoteka `loading.js`

Datoteka `loading.js` (ali `loading.jsx`, `loading.ts`, `loading.tsx`) vam omogoča ustvarjanje uporabniškega vmesnika za nalaganje, ki se prikaže, medtem ko se segment poti nalaga. To je uporabno za zagotavljanje boljše uporabniške izkušnje pri pridobivanju podatkov ali izvajanju drugih asinhronih operacij.

Primer:

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

export default function Loading() {
  return <p>Nalaganje informacij o nas...</p>;
}

Ko uporabnik obišče pot `/about`, bo komponenta `Loading` prikazana, dokler se komponenta `page.js` popolnoma ne upodobi.

6. Datoteka `error.js`

Datoteka `error.js` (ali `error.jsx`, `error.ts`, `error.tsx`) vam omogoča ustvarjanje prilagojenega uporabniškega vmesnika za napake, ki se prikaže, ko pride do napake znotraj segmenta poti. To je uporabno za zagotavljanje uporabniku prijaznejšega sporočila o napaki in preprečevanje sesutja celotne aplikacije.

Primer:

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

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Prišlo je do napake!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Poskusi znova</button>
    </div>
  );
}

Če pride do napake med upodabljanjem strani `/about`, se prikaže komponenta `Error`. Lastnost `error` vsebuje informacije o napaki, funkcija `reset` pa uporabniku omogoča, da poskusi ponovno naložiti stran.

7. Skupine poti

Skupine poti `(imeSkupine)` vam omogočajo organizacijo poti brez vpliva na strukturo URL naslova. Ustvarijo se tako, da ime mape ovijete v oklepaje. To je še posebej uporabno za organiziranje postavitev in skupnih komponent.

Primer:

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

V tem primeru sta strani `about` in `contact` združeni v skupino `marketing`, stran `products` pa je v skupini `shop`. URL naslovi ostanejo `/about`, `/contact` in `/products`.

8. Dinamične poti

Dinamične poti vam omogočajo ustvarjanje poti s spremenljivimi segmenti. To je uporabno za prikaz vsebine na podlagi podatkov, pridobljenih iz baze podatkov ali API-ja. Dinamični segmenti poti se definirajo tako, da ime segmenta ovijete v oglate oklepaje (npr. `[id]`).

Primer:

Recimo, da želite ustvariti pot za prikaz posameznih objav v blogu na podlagi njihovega ID-ja. Strukturo datotek lahko ustvarite takole:

app/
  blog/
    [id]/
      page.js

Segment `[id]` je dinamičen segment. Komponenta, izvožena iz `app/blog/[id]/page.js`, bo upodobljena, ko uporabnik obišče URL, kot je `/blog/123` ali `/blog/456`. Vrednost parametra `id` bo na voljo v lastnosti `params` komponente.

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

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

  // Pridobi podatke za objavo v blogu z danim ID-jem
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>Objava v blogu ni bila najdena.</p>;
  }

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

async function fetchBlogPost(id) {
  // Simulacija pridobivanja podatkov iz baze podatkov ali API-ja
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'Moja prva objava v blogu', content: 'To je vsebina moje prve objave v blogu.' },
        '456': { title: 'Druga objava v blogu', content: 'To je nekaj bolj razburljive vsebine.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

V poti lahko uporabite tudi več dinamičnih segmentov. Na primer, lahko imate pot, kot je `/blog/[category]/[id]`.

9. "Catch-all" segmenti

"Catch-all" segmenti vam omogočajo ustvarjanje poti, ki se ujemajo s poljubnim številom segmentov. To je uporabno v primerih, kot je ustvarjanje CMS-a, kjer strukturo URL-ja določi uporabnik. "Catch-all" segmenti se definirajo z dodajanjem treh pik pred imenom segmenta (npr. `[...slug]`).

Primer:

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

Segment `[...slug]` se bo ujemal s poljubnim številom segmentov za `/docs`. Na primer, ujemal se bo z `/docs/getting-started`, `/docs/api/users` in `/docs/advanced/configuration`. Vrednost parametra `slug` bo polje, ki vsebuje ujete segmente.

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

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

  return (
    <div>
      <h1>Docs</h1>
      <p>Slug: {slug ? slug.join('/') : 'Brez sluga'}</p>
    </div>
  );
}

Opcijske "catch-all" segmente lahko ustvarite tako, da ime segmenta ovijete v dvojne oglate oklepaje `[[...slug]]`. S tem postane segment poti opcijski. Primer:

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

Ta nastavitev bo upodobila komponento page.js tako na poti `/blog` kot na poti `/blog/poljubno/stevilo/segmentov`.

10. Vzporedne poti

Vzporedne poti (Parallel Routes) vam omogočajo sočasno upodabljanje ene ali več strani v isti postavitvi. To je še posebej uporabno za kompleksne postavitve, kot so nadzorne plošče, kjer se lahko različni deli strani nalagajo neodvisno. Vzporedne poti so definirane z uporabo simbola `@`, ki mu sledi ime reže (npr. `@sidebar`, `@main`).

Primer:

app/
  @sidebar/
    page.js  // Vsebina za stransko vrstico
  @main/
    page.js  // Vsebina za glavni del
  default.js // Obvezno: Določa privzeto postavitev za vzporedne poti

Datoteka `default.js` je obvezna pri uporabi vzporednih poti. Določa, kako se različne reže združijo v končno postavitev.

// 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. Prestrežne poti

Prestrežne poti (Intercepting Routes) vam omogočajo nalaganje poti iz drugega dela vaše aplikacije znotraj trenutne postavitve. To je uporabno za ustvarjanje modalnih oken, galerij slik in drugih elementov uporabniškega vmesnika, ki se morajo prikazati nad obstoječo vsebino strani. Prestrežne poti so definirane z uporabo sintakse `(..)`, ki označuje, za koliko nivojev v drevesni strukturi map se je treba pomakniti navzgor, da bi našli prestreženo pot.

Primer:

app/
  (.)photos/
    [id]/
      page.js  // Prestrežena pot
  feed/
    page.js  // Stran, kjer se prikaže modalno okno s fotografijo

V tem primeru, ko uporabnik klikne na fotografijo na strani `/feed`, se pot `app/(.)photos/[id]/page.js` prestreže in prikaže kot modalno okno nad stranjo `/feed`. Sintaksa `(.)` pove Next.js, naj pogleda en nivo višje (v mapo `app`), da najde pot `photos/[id]`.

Pridobivanje podatkov z App Routerjem

App Router ponuja vgrajeno podporo za pridobivanje podatkov z uporabo strežniških (Server Components) in odjemalskih komponent (Client Components). Strežniške komponente se upodabljajo na strežniku, odjemalske pa na odjemalcu. To vam omogoča, da za vsako komponento izberete najboljši pristop glede na njene zahteve.

Strežniške komponente

Strežniške komponente so privzete v App Routerju. Omogočajo vam pridobivanje podatkov neposredno v komponentah, brez potrebe po ločenih API poteh. To lahko izboljša zmogljivost in poenostavi kodo.

Primer:

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

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

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

async function fetchProducts() {
  // Simulacija pridobivanja podatkov iz baze podatkov ali API-ja
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Izdelek A' },
        { id: 2, name: 'Izdelek B' },
        { id: 3, name: 'Izdelek C' },
      ];
      resolve(products);
    }, 500);
  });
}

V tem primeru se funkcija `fetchProducts` kliče neposredno znotraj komponente `ProductsPage`. Komponenta se upodobi na strežniku, podatki pa se pridobijo, preden se HTML pošlje odjemalcu.

Odjemalske komponente

Odjemalske komponente se upodabljajo na odjemalcu in omogočajo uporabo funkcij na strani odjemalca, kot so poslušalci dogodkov, stanje in brskalniški API-ji. Za uporabo odjemalske komponente morate na vrh datoteke dodati direktivo `'use client'`.

Primer:

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

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Števec</h1>
      <p>Števec: {count}</p>
      <button onClick={() => setCount(count + 1)}>Povečaj</button>
    </div>
  );
}

V tem primeru je komponenta `CounterPage` odjemalska komponenta, ker uporablja kavelj `useState`. Direktiva `'use client'` pove Next.js, naj to komponento upodobi na odjemalcu.

Napredne tehnike usmerjanja

App Router ponuja več naprednih tehnik usmerjanja, ki se lahko uporabijo za ustvarjanje kompleksnih in sofisticiranih aplikacij.

1. Upravljavci poti (Route Handlers)

Upravljavci poti vam omogočajo ustvarjanje API končnih točk znotraj vaše mape `app`. S tem odpade potreba po ločeni mapi `pages/api`. Upravljavci poti so definirani v datotekah z imenom `route.js` (ali `route.ts`) in izvažajo funkcije, ki obravnavajo različne metode HTTP (npr. `GET`, `POST`, `PUT`, `DELETE`).

Primer:

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

export async function GET(request) {
  // Simulacija pridobivanja uporabnikov iz baze podatkov
  const users = [
    { id: 1, name: 'Janez Novak' },
    { id: 2, name: 'Marija Novak' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('Prejeti podatki:', body)
  return NextResponse.json({ message: 'Uporabnik ustvarjen' }, { status: 201 })
}

Ta primer definira upravljavca poti na `/api/users`, ki obravnava tako zahteve `GET` kot `POST`. Funkcija `GET` vrne seznam uporabnikov, funkcija `POST` pa ustvari novega uporabnika.

2. Skupine poti z več postavitvami

Skupine poti lahko kombinirate s postavitvami za ustvarjanje različnih postavitev za različne dele vaše aplikacije. To je uporabno v primerih, ko želite imeti različno glavo ali stransko vrstico za različne dele vaše strani.

Primer:

app/
  (marketing)/
    layout.js  // Postavitev za marketing
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // Postavitev za administracijo
    dashboard/
      page.js

V tem primeru bosta strani `about` in `contact` uporabljali postavitev `marketing`, medtem ko bo stran `dashboard` uporabljala postavitev `admin`.

3. Vmesna programska oprema (Middleware)

Vmesna programska oprema vam omogoča izvajanje kode, preden vašo aplikacijo obdela zahteva. To je uporabno za naloge, kot so avtentikacija, avtorizacija, beleženje in preusmerjanje uporabnikov glede na njihovo lokacijo ali napravo.

Vmesna programska oprema je definirana v datoteki z imenom `middleware.js` (ali `middleware.ts`) v korenski mapi vašega projekta.

Primer:

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

export function middleware(request) {
  // Preveri, ali je uporabnik avtenticiran
  const isAuthenticated = false; // Zamenjajte s svojo logiko avtentikacije

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

  return NextResponse.next();
}

// Za več informacij si oglejte "Ujemanje poti" spodaj
export const config = {
  matcher: '/admin/:path*',
}

Ta primer definira vmesno programsko opremo, ki preveri, ali je uporabnik avtenticiran, preden mu dovoli dostop do katere koli poti pod `/admin`. Če uporabnik ni avtenticiran, se ga preusmeri na stran `/login`.

Najboljše prakse za datotečno usmerjanje

Da bi kar najbolje izkoristili sistem datotečnega usmerjanja v App Routerju, upoštevajte naslednje najboljše prakse:

Ohranjajte organizirano strukturo datotek: Uporabljajte smiselna imena map in združujte povezane datoteke.
Uporabljajte postavitve za skupni UI: Ustvarite postavitve za glave, noge, stranske vrstice in druge elemente, ki so skupni več stranem.
Uporabljajte vmesnike za nalaganje: Zagotovite vmesnike za nalaganje za poti, ki pridobivajo podatke ali izvajajo druge asinhrone operacije.
Elegantno obravnavajte napake: Ustvarite prilagojene vmesnike za napake, da zagotovite boljšo uporabniško izkušnjo ob pojavu napak.
Uporabljajte skupine poti za organizacijo: Uporabljajte skupine poti za organizacijo poti brez vpliva na strukturo URL naslova.
Izkoristite strežniške komponente za zmogljivost: Uporabljajte strežniške komponente za pridobivanje podatkov in upodabljanje UI na strežniku, kar izboljša zmogljivost in SEO.
Po potrebi uporabljajte odjemalske komponente: Uporabljajte odjemalske komponente, ko potrebujete funkcije na strani odjemalca, kot so poslušalci dogodkov, stanje in brskalniški API-ji.

Primeri internacionalizacije z usmerjevalnikom aplikacij Next.js

Usmerjevalnik aplikacij Next.js poenostavlja internacionalizacijo (i18n) z datotečnim usmerjanjem. Tukaj je, kako lahko učinkovito implementirate i18n:

1. Usmerjanje s pod-potmi

Organizirajte svoje poti glede na jezikovno različico z uporabo pod-poti. Na primer:

app/
  [locale]/
    page.tsx         // Domača stran za jezikovno različico
    about/
      page.tsx     // Stran "O nas" za jezikovno različico

// 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),
  sl: () => import('./dictionaries/sl.json').then((module) => module.default),
};

export const getTranslations = async (locale) => {
  try {
    return dictionaries[locale]() ?? dictionaries.en();
  } catch (error) {
    console.error(`Nalaganje prevodov za jezikovno različico ${locale} ni uspelo`, error);
    return dictionaries.en();
  }
};

V tej nastavitvi dinamični segment poti `[locale]` obravnava različne jezikovne različice (npr. `/en`, `/sl`). Prevodi se nalagajo dinamično glede na jezikovno različico.

2. Usmerjanje z domenami

Za naprednejši pristop lahko za vsako jezikovno različico uporabite različne domene ali poddomene. To pogosto vključuje dodatno konfiguracijo pri vašem ponudniku gostovanja.

3. Vmesna programska oprema za zaznavanje jezikovne različice

Uporabite vmesno programsko opremo za samodejno zaznavanje uporabnikove želene jezikovne različice in ga ustrezno preusmerite.

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

let locales = ['en', 'sl', 'de'];

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'); // Uporabi "en" kot privzeto jezikovno različico
  } catch (error) {
      console.error("Napaka pri ujemanju jezikovne različice:", error);
      return 'en'; // Uporabi angleščino, če ujemanje ne uspe
  }
}

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

Ta vmesna programska oprema preveri, ali ima zahtevana pot predpono jezikovne različice. Če je nima, zazna uporabnikovo želeno jezikovno različico z uporabo glave `Accept-Language` in ga preusmeri na ustrezno pot z jezikovno različico. Za obravnavo pogajanja o jezikovni različici se uporabljajo knjižnice, kot sta `@formatjs/intl-localematcher` in `negotiator`.

Usmerjevalnik aplikacij Next.js in globalna dostopnost

Ustvarjanje globalno dostopnih spletnih aplikacij zahteva skrbno upoštevanje načel dostopnosti (a11y). Usmerjevalnik aplikacij Next.js zagotavlja trdne temelje za gradnjo dostopnih izkušenj, vendar je ključnega pomena, da se implementirajo najboljše prakse, da bo vaša aplikacija uporabna za vse, ne glede na njihove sposobnosti.

Ključni vidiki dostopnosti

Semantični HTML: Uporabljajte semantične elemente HTML (npr. `<article>`, `<nav>`, `<aside>`, `<main>`) za strukturiranje vaše vsebine. To daje pomen podpornim tehnologijam in uporabnikom pomaga lažje krmariti po vaši strani.
Atributi ARIA: Uporabljajte atribute ARIA (Accessible Rich Internet Applications) za izboljšanje dostopnosti prilagojenih komponent in pripomočkov. Atributi ARIA zagotavljajo dodatne informacije o vlogi, stanju in lastnostih elementov za podporne tehnologije.
Navigacija s tipkovnico: Zagotovite, da so vsi interaktivni elementi dostopni s tipkovnico. Uporabniki bi morali imeti možnost krmarjenja po vaši aplikaciji s tipko `Tab` in interakcije z elementi s tipko `Enter` ali `Preslednica`.
Barvni kontrast: Uporabljajte zadosten barvni kontrast med besedilom in ozadjem, da zagotovite berljivost za uporabnike z okvarami vida. Smernice za dostopnost spletnih vsebin (WCAG) priporočajo kontrastno razmerje vsaj 4.5:1 za normalno besedilo in 3:1 za veliko besedilo.
Alternativno besedilo slik: Zagotovite opisno alternativno besedilo za vse slike. Alternativno besedilo ponuja besedilno alternativo za slike, ki jo lahko berejo bralniki zaslona.
Oznake obrazcev: Povežite oznake obrazcev z ustreznimi vnosnimi polji z uporabo elementa `<label>`. To uporabnikom jasno pove, katere informacije se pričakujejo v posameznem polju.
Testiranje z bralnikom zaslona: Preizkusite svojo aplikacijo z bralnikom zaslona, da zagotovite, da je dostopna uporabnikom z okvarami vida. Priljubljeni bralniki zaslona vključujejo NVDA, JAWS in VoiceOver.

Implementacija dostopnosti v usmerjevalniku aplikacij Next.js

Uporaba komponente Link Next.js: Za navigacijo uporabite komponento `<Link>`. Zagotavlja vgrajene funkcije dostopnosti, kot sta prednalaganje in upravljanje fokusa.
Upravljanje fokusa: Pri prehodu med stranmi ali odpiranju modalnih oken zagotovite pravilno upravljanje fokusa. Fokus naj bo nastavljen na najbolj logičen element na novi strani ali v modalnem oknu.
Dostopne prilagojene komponente: Pri ustvarjanju prilagojenih komponent zagotovite, da so dostopne z upoštevanjem zgoraj opisanih načel. Uporabite semantični HTML, atribute ARIA in navigacijo s tipkovnico, da bodo vaše komponente uporabne za vse.
Linting in testiranje: Uporabljajte orodja za linting, kot je ESLint z vtičniki za dostopnost, da prepoznate morebitne težave z dostopnostjo v vaši kodi. Prav tako uporabite avtomatizirana orodja za testiranje, da preverite svojo aplikacijo za kršitve dostopnosti.

Zaključek

Sistem datotečnega usmerjanja v usmerjevalniku aplikacij Next.js ponuja zmogljiv in intuitiven način za strukturiranje in navigacijo po vaših aplikacijah. Z razumevanjem osnovnih konceptov in najboljših praks, opisanih v tem vodniku, lahko gradite robustne, razširljive in vzdrževane aplikacije Next.js. Eksperimentirajte z različnimi funkcijami App Routerja in odkrijte, kako lahko poenostavi vaš razvojni proces in izboljša uporabniško izkušnjo.