Next.js App Router: Komplexný sprievodca smerovaním založeným na súboroch

Next.js App Router, predstavený v Next.js 13 a štandardom v neskorších verziách, prináša revolúciu do spôsobu, akým štruktúrujeme a navigujeme v aplikáciách. Zavádza výkonný a intuitívny systém smerovania založený na súboroch, ktorý zjednodušuje vývoj, zlepšuje výkon a celkovo skvalitňuje vývojársku skúsenosť. Tento komplexný sprievodca sa podrobne venuje smerovaniu založenému na súboroch v App Routeri a poskytne vám vedomosti a zručnosti na tvorbu robustných a škálovateľných aplikácií v Next.js.

Čo je smerovanie založené na súboroch?

Smerovanie založené na súboroch je systém, kde štruktúra trás (routes) vašej aplikácie je priamo určená organizáciou vašich súborov a adresárov. V Next.js App Routeri definujete cesty vytváraním súborov v adresári `app`. Každý priečinok predstavuje segment cesty a špeciálne súbory v týchto priečinkoch definujú, ako sa daný segment cesty spracuje. Tento prístup ponúka niekoľko výhod:

Intuitívna štruktúra: Súborový systém odzrkadľuje štruktúru trás aplikácie, čo uľahčuje jej pochopenie a navigáciu.
Automatické smerovanie: Next.js automaticky generuje cesty na základe vašej súborovej štruktúry, čím eliminuje potrebu manuálnej konfigurácie.
Kolokácia kódu: Obsluha trás a UI komponenty sú umiestnené spoločne, čo zlepšuje organizáciu a udržiavateľnosť kódu.
Vstavané funkcie: App Router poskytuje vstavanú podporu pre layouty, dynamické cesty, načítavanie dát a ďalšie, čím zjednodušuje zložité scenáre smerovania.

Ako začať s App Routerom

Ak chcete použiť App Router, musíte vytvoriť nový projekt Next.js alebo migrovať existujúci projekt. Uistite sa, že používate Next.js verzie 13 alebo novšiu.

Vytvorenie nového projektu:

Nový projekt Next.js s App Routerom môžete vytvoriť pomocou nasledujúceho príkazu:

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

Migrácia existujúceho projektu:

Ak chcete migrovať existujúci projekt, musíte presunúť svoje stránky z adresára `pages` do adresára `app`. Možno budete musieť zodpovedajúcim spôsobom upraviť svoju logiku smerovania. Next.js poskytuje sprievodcu migráciou, ktorý vám s týmto procesom pomôže.

Základné koncepty smerovania založeného na súboroch

App Router zavádza niekoľko špeciálnych súborov a konvencií, ktoré definujú, ako sa vaše cesty spracúvajú:

1. Adresár `app`

Adresár `app` je koreňovým adresárom trás vašej aplikácie. Všetky súbory a priečinky v tomto adresári sa použijú na generovanie trás. Všetko mimo adresára `app` (napríklad adresár `pages`, ak migrujete) bude App Routerom ignorované.

2. Súbor `page.js`

Súbor `page.js` (alebo `page.jsx`, `page.ts`, `page.tsx`) je najzákladnejšou súčasťou App Routera. Definuje UI komponent, ktorý sa vykreslí pre konkrétny segment cesty. Je to **povinný** súbor pre každý segment cesty, ktorý chcete mať priamo prístupný.

Príklad:

Ak máte takúto štruktúru súborov:

app/
  about/
    page.js

Komponent exportovaný zo súboru `app/about/page.js` sa vykreslí, keď používateľ prejde na `/about`.

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

export default function AboutPage() {
  return (
    <div>
      <h1>O nás</h1>
      <p>Zistite viac o našej spoločnosti.</p>
    </div>
  );
}

3. Súbor `layout.js`

Súbor `layout.js` (alebo `layout.jsx`, `layout.ts`, `layout.tsx`) definuje používateľské rozhranie, ktoré je zdieľané naprieč viacerými stránkami v rámci segmentu cesty. Layouty sú užitočné na vytváranie konzistentných hlavičiek, pätičiek, bočných panelov a ďalších prvkov, ktoré by mali byť prítomné na viacerých stránkach.

Príklad:

Povedzme, že chcete pridať hlavičku na stránku `/about` aj na hypotetickú stránku `/about/team`. Môžete vytvoriť súbor `layout.js` v adresári `app/about`:

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

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>O našej spoločnosti</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

Prop `children` bude nahradený používateľským rozhraním vykresleným súborom `page.js` v rovnakom adresári alebo v akýchkoľvek vnorených adresároch.

4. Súbor `template.js`

Súbor `template.js` je podobný súboru `layout.js`, ale vytvára novú inštanciu komponentu pre každú podradenú cestu (child route). Je to užitočné v scenároch, kde chcete zachovať stav komponentu alebo zabrániť opätovnému vykresľovaniu pri navigácii medzi podradenými cestami. Na rozdiel od layoutov, šablóny sa pri navigácii znova vykreslia. Používanie šablón je skvelé na animáciu prvkov pri navigácii.

Príklad:

// app/template.js
'use client'

import { useState } from 'react'

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

  return (
    <main>
      <p>Šablóna: {count}</p>
      <button onClick={() => setCount(count + 1)}>Aktualizovať šablónu</button>
      {children}
    </main>
  )
}

5. Súbor `loading.js`

Súbor `loading.js` (alebo `loading.jsx`, `loading.ts`, `loading.tsx`) umožňuje vytvoriť používateľské rozhranie pre načítavanie, ktoré sa zobrazí, kým sa segment cesty načítava. Je to užitočné na poskytnutie lepšej používateľskej skúsenosti pri načítavaní dát alebo vykonávaní iných asynchrónnych operácií.

Príklad:

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

export default function Loading() {
  return <p>Načítavanie informácií o nás...</p>;
}

Keď používateľ prejde na `/about`, komponent `Loading` sa zobrazí, kým sa komponent `page.js` úplne nevykreslí.

6. Súbor `error.js`

Súbor `error.js` (alebo `error.jsx`, `error.ts`, `error.tsx`) umožňuje vytvoriť vlastné chybové používateľské rozhranie, ktoré sa zobrazí, keď v rámci segmentu cesty nastane chyba. Je to užitočné na poskytnutie používateľsky prívetivejšej chybovej správy a zabránenie pádu celej aplikácie.

Príklad:

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

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Vyskytla sa chyba!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Skúsiť znova</button>
    </div>
  );
}

Ak pri vykresľovaní stránky `/about` nastane chyba, zobrazí sa komponent `Error`. Prop `error` obsahuje informácie o chybe a funkcia `reset` umožňuje používateľovi pokúsiť sa stránku znova načítať.

7. Skupiny trás (Route Groups)

Skupiny trás `(groupName)` vám umožňujú organizovať vaše cesty bez toho, aby to ovplyvnilo štruktúru URL. Vytvárajú sa obalením názvu priečinka do zátvoriek. Je to obzvlášť užitočné na organizovanie layoutov a zdieľaných komponentov.

Príklad:

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

V tomto príklade sú stránky `about` a `contact` zoskupené v skupine `marketing` a stránka `products` je v skupine `shop`. URL adresy zostávajú `/about`, `/contact` a `/products`.

8. Dynamické cesty

Dynamické cesty vám umožňujú vytvárať cesty s premenlivými segmentmi. Je to užitočné na zobrazovanie obsahu na základe dát získaných z databázy alebo API. Segmenty dynamických ciest sa definujú obalením názvu segmentu do hranatých zátvoriek (napr. `[id]`).

Príklad:

Povedzme, že chcete vytvoriť cestu na zobrazovanie jednotlivých blogových príspevkov na základe ich ID. Môžete vytvoriť takúto štruktúru súborov:

app/
  blog/
    [id]/
      page.js

Segment `[id]` je dynamický segment. Komponent exportovaný zo súboru `app/blog/[id]/page.js` sa vykreslí, keď používateľ prejde na URL ako `/blog/123` alebo `/blog/456`. Hodnota parametra `id` bude dostupná v prope `params` komponentu.

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

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

  // Získanie dát pre blogový príspevok s daným ID
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>Blogový príspevok sa nenašiel.</p>;
  }

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

async function fetchBlogPost(id) {
  // Simulácia získavania dát z databázy alebo API
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'Môj prvý blogový príspevok', content: 'Toto je obsah môjho prvého blogového príspevku.' },
        '456': { title: 'Ďalší blogový príspevok', content: 'Toto je ďalší zaujímavý obsah.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

V jednej ceste môžete použiť aj viacero dynamických segmentov. Napríklad by ste mohli mať cestu ako `/blog/[category]/[id]`.

9. Segmenty catch-all

Segmenty catch-all (zachytávajúce všetko) vám umožňujú vytvárať cesty, ktoré zodpovedajú ľubovoľnému počtu segmentov. Je to užitočné pre scenáre, ako je vytváranie CMS, kde je štruktúra URL určená používateľom. Segmenty catch-all sa definujú pridaním troch bodiek pred názov segmentu (napr. `[...slug]`).

Príklad:

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

Segment `[...slug]` bude zodpovedať ľubovoľnému počtu segmentov za `/docs`. Napríklad bude zodpovedať `/docs/getting-started`, `/docs/api/users` a `/docs/advanced/configuration`. Hodnota parametra `slug` bude pole obsahujúce zodpovedajúce segmenty.

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

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

  return (
    <div>
      <h1>Dokumentácia</h1>
      <p>Slug: {slug ? slug.join('/') : 'Žiadny slug'}</p>
    </div>
  );
}

Voliteľné segmenty catch-all je možné vytvoriť pridaním názvu segmentu do dvojitých hranatých zátvoriek `[[...slug]]`. Tým sa segment cesty stane voliteľným. Príklad:

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

Toto nastavenie vykreslí komponent page.js na adrese `/blog` aj na `/blog/any/number/of/segments`.

10. Paralelné cesty

Paralelné cesty (Parallel Routes) vám umožňujú súčasne vykresliť jednu alebo viac stránok v rovnakom layoute. Je to obzvlášť užitočné pre zložité layouty, ako sú dashboardy, kde sa rôzne sekcie stránky môžu načítať nezávisle. Paralelné cesty sa definujú pomocou symbolu `@` nasledovaného názvom slotu (napr. `@sidebar`, `@main`).

Príklad:

app/
  @sidebar/
    page.js  // Obsah pre bočný panel
  @main/
    page.js  // Obsah pre hlavnú sekciu
  default.js // Povinné: Definuje predvolený layout pre paralelné cesty

Súbor `default.js` je pri používaní paralelných ciest povinný. Definuje, ako sa rôzne sloty skombinujú na vytvorenie finálneho layoutu.

// 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. Zachytávajúce cesty

Zachytávajúce cesty (Intercepting Routes) vám umožňujú načítať cestu z inej časti vašej aplikácie v rámci aktuálneho layoutu. Je to užitočné na vytváranie modálnych okien, galérií obrázkov a iných UI prvkov, ktoré by sa mali zobraziť nad existujúcim obsahom stránky. Zachytávajúce cesty sa definujú pomocou syntaxe `(..)`, ktorá označuje, o koľko úrovní v strome adresárov sa má ísť hore, aby sa našla zachytená cesta.

Príklad:

app/
  (.)photos/
    [id]/
      page.js  // Zachytená cesta
  feed/
    page.js  // Stránka, kde sa zobrazí modálne okno s fotkou

V tomto príklade, keď používateľ klikne na fotku na stránke `/feed`, cesta `app/(.)photos/[id]/page.js` je zachytená a zobrazená ako modálne okno nad stránkou `/feed`. Syntax `(.)` hovorí Next.js, aby sa pozrel o jednu úroveň vyššie (do adresára `app`) a našiel cestu `photos/[id]`.

Načítavanie dát s App Routerom

App Router poskytuje vstavanú podporu pre načítavanie dát pomocou serverových komponentov (Server Components) a klientskych komponentov (Client Components). Serverové komponenty sa vykresľujú na serveri, zatiaľ čo klientske komponenty sa vykresľujú na klientovi. To vám umožňuje zvoliť najlepší prístup pre každý komponent na základe jeho požiadaviek.

Serverové komponenty

Serverové komponenty sú v App Routeri predvolené. Umožňujú vám načítavať dáta priamo vo vašich komponentoch bez potreby samostatných API trás. To môže zlepšiť výkon a zjednodušiť váš kód.

Príklad:

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

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

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

async function fetchProducts() {
  // Simulácia získavania dát z databázy alebo API
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'Produkt A' },
        { id: 2, name: 'Produkt B' },
        { id: 3, name: 'Produkt C' },
      ];
      resolve(products);
    }, 500);
  });
}

V tomto príklade je funkcia `fetchProducts` volaná priamo v komponente `ProductsPage`. Komponent sa vykresľuje na serveri a dáta sa načítajú predtým, ako sa HTML odošle klientovi.

Klientske komponenty

Klientske komponenty sa vykresľujú na klientovi a umožňujú vám používať klientske funkcie, ako sú poslucháče udalostí, stav a API prehliadača. Ak chcete použiť klientsky komponent, musíte na začiatok súboru pridať direktívu `'use client'`.

Príklad:

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

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Počítadlo</h1>
      <p>Počet: {count}</p>
      <button onClick={() => setCount(count + 1)}>Zvýšiť</button>
    </div>
  );
}

V tomto príklade je komponent `CounterPage` klientskym komponentom, pretože používa hook `useState`. Direktíva `'use client'` hovorí Next.js, aby tento komponent vykreslil na klientovi.

Pokročilé techniky smerovania

App Router ponúka niekoľko pokročilých techník smerovania, ktoré možno použiť na vytváranie zložitých a sofistikovaných aplikácií.

1. Obsluha trás (Route Handlers)

Obsluha trás vám umožňuje vytvárať API koncové body v rámci vášho adresára `app`. Tým sa eliminuje potreba samostatného adresára `pages/api`. Obsluha trás je definovaná v súboroch s názvom `route.js` (alebo `route.ts`) a exportuje funkcie, ktoré spracúvajú rôzne HTTP metódy (napr. `GET`, `POST`, `PUT`, `DELETE`).

Príklad:

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

export async function GET(request) {
  // Simulácia získavania používateľov z databázy
  const users = [
    { id: 1, name: 'Ján Novák' },
    { id: 2, name: 'Jana Nováková' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('Prijaté dáta:', body)
  return NextResponse.json({ message: 'Používateľ vytvorený' }, { status: 201 })
}

Tento príklad definuje obsluhu trasy na `/api/users`, ktorá spracúva požiadavky `GET` aj `POST`. Funkcia `GET` vracia zoznam používateľov a funkcia `POST` vytvára nového používateľa.

2. Skupiny trás s viacerými layoutmi

Môžete kombinovať skupiny trás s layoutmi na vytvorenie rôznych layoutov pre rôzne sekcie vašej aplikácie. Je to užitočné v scenároch, kde chcete mať inú hlavičku alebo bočný panel pre rôzne časti vášho webu.

Príklad:

app/
  (marketing)/
    layout.js  // Marketingový layout
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // Administrátorský layout
    dashboard/
      page.js

V tomto príklade budú stránky `about` a `contact` používať `marketingový` layout, zatiaľ čo stránka `dashboard` bude používať `administrátorský` layout.

3. Middleware

Middleware vám umožňuje spustiť kód predtým, ako je požiadavka spracovaná vašou aplikáciou. Je to užitočné pre úlohy ako autentifikácia, autorizácia, logovanie a presmerovanie používateľov na základe ich polohy alebo zariadenia.

Middleware je definovaný v súbore s názvom `middleware.js` (alebo `middleware.ts`) v koreňovom adresári vášho projektu.

Príklad:

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

export function middleware(request) {
  // Skontrolovať, či je používateľ overený
  const isAuthenticated = false; // Nahraďte vašou logikou overenia

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

  return NextResponse.next();
}

// Viac informácií nájdete nižšie v časti "Matching Paths"
export const config = {
  matcher: '/admin/:path*',
}

Tento príklad definuje middleware, ktorý kontroluje, či je používateľ overený, predtým, ako mu povolí prístup k akejkoľvek ceste pod `/admin`. Ak používateľ nie je overený, je presmerovaný na stránku `/login`.

Osvedčené postupy pre smerovanie založené na súboroch

Aby ste čo najlepšie využili systém smerovania založený na súboroch v App Routeri, zvážte nasledujúce osvedčené postupy:

Udržujte organizovanú štruktúru súborov: Používajte zmysluplné názvy priečinkov a zoskupujte súvisiace súbory.
Používajte layouty pre zdieľané UI: Vytvárajte layouty pre hlavičky, pätičky, bočné panely a ďalšie prvky, ktoré sú zdieľané naprieč viacerými stránkami.
Používajte UI pre načítavanie: Poskytnite používateľské rozhrania pre načítavanie pre cesty, ktoré načítavajú dáta alebo vykonávajú iné asynchrónne operácie.
Elegantne spracúvajte chyby: Vytvárajte vlastné chybové UI, aby ste poskytli lepšiu používateľskú skúsenosť pri výskyte chýb.
Používajte skupiny trás na organizáciu: Používajte skupiny trás na organizáciu vašich ciest bez ovplyvnenia štruktúry URL.
Využívajte serverové komponenty pre výkon: Používajte serverové komponenty na načítavanie dát a vykresľovanie UI na serveri, čím zlepšíte výkon a SEO.
Používajte klientske komponenty, keď je to potrebné: Používajte klientske komponenty, keď potrebujete využívať klientske funkcie, ako sú poslucháče udalostí, stav a API prehliadača.

Príklady internacionalizácie s Next.js App Routerom

Next.js App Router zjednodušuje internacionalizáciu (i18n) prostredníctvom smerovania založeného na súboroch. Tu je návod, ako môžete efektívne implementovať i18n:

1. Smerovanie podľa pod-ciest

Organizujte svoje cesty na základe lokalizácie pomocou pod-ciest. Napríklad:

app/
  [locale]/
    page.tsx         // Domovská stránka pre lokalizáciu
    about/
      page.tsx     // Stránka O nás pre lokalizáciu

// 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(`Nepodarilo sa načítať preklady pre lokalizáciu ${locale}`, error);
    return dictionaries.en();
  }
};

V tomto nastavení dynamický segment cesty `[locale]` spracúva rôzne lokalizácie (napr. `/en`, `/es`). Preklady sa načítavajú dynamicky na základe lokalizácie.

2. Smerovanie podľa domény

Pre pokročilejší prístup môžete použiť rôzne domény alebo subdomény pre každú lokalizáciu. To si často vyžaduje dodatočnú konfiguráciu u vášho hostingového poskytovateľa.

3. Middleware na detekciu lokalizácie

Použite middleware na automatickú detekciu preferovanej lokalizácie používateľa a ich zodpovedajúce presmerovanie.

// 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'); // Použiť "en" ako predvolenú lokalizáciu
  } catch (error) {
      console.error("Chyba pri porovnávaní lokalizácie:", error);
      return 'en'; // V prípade neúspechu použiť angličtinu
  }
}

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

Tento middleware kontroluje, či požadovaná cesta má prefix lokalizácie. Ak nie, detekuje preferovanú lokalizáciu používateľa pomocou hlavičky `Accept-Language` a presmeruje ho na príslušnú cestu špecifickú pre danú lokalizáciu. Na spracovanie dohadovania lokalizácie sa používajú knižnice ako `@formatjs/intl-localematcher` a `negotiator`.

Next.js App Router a globálna prístupnosť

Vytváranie globálne prístupných webových aplikácií si vyžaduje starostlivé zváženie princípov prístupnosti (a11y). Next.js App Router poskytuje pevný základ pre budovanie prístupných zážitkov, ale je nevyhnutné implementovať osvedčené postupy, aby vaša aplikácia bola použiteľná pre všetkých, bez ohľadu na ich schopnosti.

Kľúčové aspekty prístupnosti

Sémantické HTML: Používajte sémantické HTML prvky (napr. `<article>`, `<nav>`, `<aside>`, `<main>`) na štruktúrovanie vášho obsahu. To dáva význam asistenčným technológiám a pomáha používateľom ľahšie sa orientovať na vašom webe.
Atribúty ARIA: Používajte atribúty ARIA (Accessible Rich Internet Applications) na zlepšenie prístupnosti vlastných komponentov a widgetov. Atribúty ARIA poskytujú asistenčným technológiám dodatočné informácie o úlohe, stave a vlastnostiach prvkov.
Klávesnicová navigácia: Zabezpečte, aby všetky interaktívne prvky boli prístupné cez klávesnicu. Používatelia by mali byť schopní prechádzať vašou aplikáciou pomocou klávesy `Tab` a interagovať s prvkami pomocou klávesy `Enter` alebo `Space`.
Kontrast farieb: Používajte dostatočný kontrast farieb medzi textom a pozadím, aby ste zabezpečili čitateľnosť pre používateľov so zrakovým postihnutím. Smernice pre prístupnosť webového obsahu (WCAG) odporúčajú kontrastný pomer najmenej 4.5:1 pre normálny text a 3:1 pre veľký text.
Alternatívny text obrázkov (Alt Text): Poskytnite popisný alt text pre všetky obrázky. Alt text poskytuje textovú alternatívu pre obrázky, ktorú môžu prečítať čítačky obrazovky.
Popisky formulárov: Priraďte popisky formulárov k ich zodpovedajúcim vstupným poliam pomocou prvku `<label>`. To používateľom objasňuje, aké informácie sa v každom poli očakávajú.
Testovanie čítačkou obrazovky: Otestujte svoju aplikáciu čítačkou obrazovky, aby ste sa uistili, že je prístupná pre používateľov so zrakovým postihnutím. Medzi populárne čítačky obrazovky patria NVDA, JAWS a VoiceOver.

Implementácia prístupnosti v Next.js App Routeri

Používajte komponent Next.js Link: Na navigáciu používajte komponent `<Link>`. Poskytuje vstavané funkcie prístupnosti, ako je predfetching a správa fokusu.
Správa fokusu: Pri navigácii medzi stránkami alebo otváraní modálnych okien zabezpečte, aby bol fokus správne spravovaný. Fokus by mal byť nastavený na najlogickejší prvok na novej stránke alebo v modálnom okne.
Prístupné vlastné komponenty: Pri vytváraní vlastných komponentov zabezpečte, aby boli prístupné dodržiavaním vyššie uvedených princípov. Používajte sémantické HTML, atribúty ARIA a klávesnicovú navigáciu, aby vaše komponenty boli použiteľné pre všetkých.
Linting a testovanie: Používajte nástroje na linting ako ESLint s pluginmi pre prístupnosť na identifikáciu potenciálnych problémov s prístupnosťou vo vašom kóde. Taktiež používajte automatizované testovacie nástroje na testovanie vašej aplikácie na porušenia prístupnosti.

Záver

Systém smerovania založený na súboroch v Next.js App Routeri ponúka výkonný a intuitívny spôsob štruktúrovania a navigácie vo vašich aplikáciách. Pochopením základných konceptov a osvedčených postupov uvedených v tomto sprievodcovi môžete vytvárať robustné, škálovateľné a udržiavateľné aplikácie v Next.js. Experimentujte s rôznymi funkciami App Routera a objavte, ako môže zjednodušiť váš vývojový proces a zlepšiť používateľskú skúsenosť.