Fedezze fel a Next.js App Router erejét a fájl-alapú útválasztáshoz készített útmutatónkkal. Ismerje meg az alkalmazás struktúrálását, dinamikus útvonalakat és elrendezéseket.
Next.js App Router: Átfogó útmutató a fájl-alapú útválasztáshoz
A Next.js App Router, amelyet a Next.js 13-ban vezettek be és a későbbi verziókban vált standarddá, forradalmasítja az alkalmazások strukturálását és a navigációt. Egy erőteljes és intuitív, fájl-alapú útválasztási rendszert vezet be, amely egyszerűsíti a fejlesztést, javítja a teljesítményt és fokozza az általános fejlesztői élményt. Ez az átfogó útmutató mélyen elmerül az App Router fájl-alapú útválasztásában, és ellátja Önt azzal a tudással és készségekkel, amelyek szükségesek a robusztus és skálázható Next.js alkalmazások készítéséhez.
Mi az a fájl-alapú útválasztás?
A fájl-alapú útválasztás egy olyan útválasztási rendszer, ahol az alkalmazás útvonalainak szerkezetét közvetlenül a fájlok és könyvtárak szervezése határozza meg. A Next.js App Routerben az útvonalakat az `app` könyvtáron belüli fájlok létrehozásával definiáljuk. Minden mappa egy útvonalszegmenst képvisel, és azokon a mappákon belüli speciális fájlok határozzák meg, hogy az adott útvonalszegmens hogyan lesz kezelve. Ez a megközelítés számos előnnyel jár:
- Intuitív struktúra: A fájlrendszer tükrözi az alkalmazás útvonalstruktúráját, így könnyen érthető és navigálható.
- Automatikus útválasztás: A Next.js automatikusan generálja az útvonalakat a fájlstruktúra alapján, kiküszöbölve a kézi konfiguráció szükségességét.
- Kód kollokáció: Az útvonalkezelők és a UI komponensek együtt helyezkednek el, javítva a kód szervezettségét és karbantarthatóságát.
- Beépített funkciók: Az App Router beépített támogatást nyújt az elrendezésekhez, dinamikus útvonalakhoz, adatlekéréshez és egyebekhez, egyszerűsítve a komplex útválasztási forgatókönyveket.
Első lépések az App Routerrel
Az App Router használatához létre kell hoznia egy új Next.js projektet, vagy migrálnia kell egy meglévőt. Győződjön meg róla, hogy a Next.js 13-as vagy újabb verzióját használja.
Új projekt létrehozása:
Új Next.js projektet az App Routerrel a következő paranccsal hozhat létre:
npx create-next-app@latest my-app --example with-app
Meglévő projekt migrálása:
Egy meglévő projekt migrálásához át kell helyeznie az oldalait a `pages` könyvtárból az `app` könyvtárba. Lehet, hogy ennek megfelelően módosítania kell az útválasztási logikáját. A Next.js egy migrációs útmutatót biztosít, hogy segítsen ebben a folyamatban.
A fájl-alapú útválasztás alapkoncepciói
Az App Router számos speciális fájlt és konvenciót vezet be, amelyek meghatározzák az útvonalak kezelését:
1. Az `app` könyvtár
Az `app` könyvtár az alkalmazás útvonalainak gyökere. Minden ezen a könyvtáron belüli fájl és mappa útvonalak generálására szolgál. Bármit, ami az `app` könyvtáron kívül van (például a `pages` könyvtár, ha migrál), az App Router figyelmen kívül hagyja.
2. A `page.js` fájl
A `page.js` (vagy `page.jsx`, `page.ts`, `page.tsx`) fájl az App Router legalapvetőbb része. Ez definiálja azt a UI komponenst, amely egy adott útvonalszegmenshez renderelődik. Ez egy kötelező fájl minden olyan útvonalszegmenshez, amelyet közvetlenül elérhetővé szeretne tenni.
Példa:
Ha egy ilyen fájlstruktúrája van:
app/
about/
page.js
Az `app/about/page.js`-ből exportált komponens renderelődik, amikor a felhasználó a `/about` útvonalra navigál.
// app/about/page.js
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>Rólunk</h1>
<p>Tudjon meg többet a cégünkről.</p>
</div>
);
}
3. A `layout.js` fájl
A `layout.js` (vagy `layout.jsx`, `layout.ts`, `layout.tsx`) fájl egy olyan UI-t definiál, amely több oldalon is megoszlik egy útvonalszegmensen belül. Az elrendezések hasznosak a konzisztens fejlécek, láblécek, oldalsávok és más elemek létrehozásához, amelyeknek több oldalon is jelen kell lenniük.
Példa:
Tegyük fel, hogy szeretne egy fejlécet hozzáadni mind a `/about` oldalhoz, mind egy hipotetikus `/about/team` oldalhoz. Létrehozhat egy `layout.js` fájlt az `app/about` könyvtárban:
// app/about/layout.js
import React from 'react';
export default function AboutLayout({ children }) {
return (
<div>
<header>
<h1>Cégünkről</h1>
</header>
<main>{children}</main>
</div>
);
}
A `children` prop helyére a `page.js` fájl által renderelt UI kerül, ugyanabban a könyvtárban vagy bármely beágyazott könyvtárban.
4. A `template.js` fájl
A `template.js` fájl hasonló a `layout.js`-hez, de minden gyermek útvonalhoz új példányt hoz létre a komponensből. Ez hasznos olyan esetekben, amikor meg akarja őrizni a komponens állapotát, vagy meg akarja akadályozni az újrarajzolást a gyermek útvonalak közötti navigáció során. Az elrendezésekkel ellentétben a sablonok navigációkor újra renderelődnek. A sablonok használata kiválóan alkalmas elemek animálására navigációkor.
Példa:
// app/template.js
'use client'
import { useState } from 'react'
export default function Template({ children }) {
const [count, setCount] = useState(0)
return (
<main>
<p>Sablon: {count}</p>
<button onClick={() => setCount(count + 1)}>Sablon frissítése</button>
{children}
</main>
)
}
5. A `loading.js` fájl
A `loading.js` (vagy `loading.jsx`, `loading.ts`, `loading.tsx`) fájl lehetővé teszi egy betöltő UI létrehozását, amely akkor jelenik meg, amíg egy útvonalszegmens betöltődik. Ez hasznos a jobb felhasználói élmény biztosításához adatlekérés vagy más aszinkron műveletek végzése közben.
Példa:
// app/about/loading.js
import React from 'react';
export default function Loading() {
return <p>Rólunk szóló információk betöltése...</p>;
}
Amikor egy felhasználó a `/about` útvonalra navigál, a `Loading` komponens jelenik meg, amíg a `page.js` komponens teljesen le nem renderelődik.
6. Az `error.js` fájl
Az `error.js` (vagy `error.jsx`, `error.ts`, `error.tsx`) fájl lehetővé teszi egy egyéni hiba UI létrehozását, amely akkor jelenik meg, ha hiba történik egy útvonalszegmensen belül. Ez hasznos a felhasználóbarátabb hibaüzenet biztosításához és az egész alkalmazás összeomlásának megakadályozásához.
Példa:
// app/about/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>Hiba történt!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Próbálja újra</button>
</div>
);
}
Ha hiba történik a `/about` oldal renderelése közben, az `Error` komponens jelenik meg. Az `error` prop információkat tartalmaz a hibáról, a `reset` funkció pedig lehetővé teszi a felhasználó számára, hogy megpróbálja újra betölteni az oldalt.
7. Útvonal-csoportok (Route Groups)
Az útvonal-csoportok `(csoportNév)` lehetővé teszik az útvonalak szervezését anélkül, hogy befolyásolnák az URL struktúrát. Ezeket úgy hozzuk létre, hogy egy mappa nevét zárójelbe tesszük. Ez különösen hasznos az elrendezések és a megosztott komponensek szervezéséhez.
Példa:
app/
(marketing)/
about/
page.js
contact/
page.js
(shop)/
products/
page.js
Ebben a példában az `about` és `contact` oldalak a `marketing` csoport alá, a `products` oldal pedig a `shop` csoport alá tartozik. Az URL-ek `/about`, `/contact` és `/products` maradnak.
8. Dinamikus útvonalak
A dinamikus útvonalak lehetővé teszik változó szegmensekkel rendelkező útvonalak létrehozását. Ez hasznos az adatbázisból vagy API-ból lekért adatok alapján történő tartalommegjelenítéshez. A dinamikus útvonalszegmenseket a szegmens nevének szögletes zárójelbe ([id]) tételével definiáljuk.
Példa:
Tegyük fel, hogy szeretne egy útvonalat létrehozni az egyes blogbejegyzések megjelenítésére az azonosítójuk alapján. Létrehozhat egy ilyen fájlstruktúrát:
app/
blog/
[id]/
page.js
Az `[id]` szegmens egy dinamikus szegmens. Az `app/blog/[id]/page.js`-ből exportált komponens renderelődik, amikor a felhasználó egy olyan URL-re navigál, mint `/blog/123` vagy `/blog/456`. Az `id` paraméter értéke elérhető lesz a komponens `params` propjában.
// app/blog/[id]/page.js
import React from 'react';
export default async function BlogPost({ params }) {
const { id } = params;
// Blogbejegyzés adatainak lekérése az adott ID alapján
const post = await fetchBlogPost(id);
if (!post) {
return <p>Blogbejegyzés nem található.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Adatbázisból vagy API-ból történő adatlekérés szimulálása
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Az első blogbejegyzésem', content: 'Ez az első blogbejegyzésem tartalma.' },
'456': { title: 'Egy másik blogbejegyzés', content: 'Ez egy másik izgalmas tartalom.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Több dinamikus szegmenst is használhat egy útvonalban. Például lehet egy `/blog/[category]/[id]` útvonala.
9. Catch-all szegmensek
A catch-all (mindent elkapó) szegmensek lehetővé teszik olyan útvonalak létrehozását, amelyek tetszőleges számú szegmensre illeszkednek. Ez hasznos olyan esetekben, mint például egy CMS létrehozása, ahol az URL-struktúrát a felhasználó határozza meg. A catch-all szegmenseket a szegmens neve elé írt három ponttal definiáljuk (pl. `[...slug]`).
Példa:
app/
docs/
[...slug]/
page.js
A `[...slug]` szegmens bármennyi szegmensre illeszkedik a `/docs` után. Például illeszkedni fog a `/docs/getting-started`, `/docs/api/users` és a `/docs/advanced/configuration` útvonalakra. A `slug` paraméter értéke egy tömb lesz, amely a megfeleltetett szegmenseket tartalmazza.
// app/docs/[...slug]/page.js
import React from 'react';
export default function DocsPage({ params }) {
const { slug } = params;
return (
<div>
<h1>Dokumentáció</h1>
<p>Slug: {slug ? slug.join('/') : 'Nincs slug'}</p>
</div>
);
}
Opcionális catch-all szegmenseket dupla szögletes zárójelbe tett szegmensnévvel `[[...slug]]` hozhatunk létre. Ez opcionálissá teszi az útvonalszegmenst. Példa:
app/
blog/
[[...slug]]/
page.js
Ez a beállítás a page.js komponenst mind a `/blog`, mind a `/blog/any/number/of/segments` útvonalon renderelni fogja.
10. Párhuzamos útvonalak (Parallel Routes)
A párhuzamos útvonalak lehetővé teszik egy vagy több oldal egyidejű renderelését ugyanabban az elrendezésben. Ez különösen hasznos komplex elrendezések, például irányítópultok esetében, ahol az oldal különböző részei egymástól függetlenül tölthetők be. A párhuzamos útvonalakat a `@` szimbólummal, majd egy slot nevével (pl. `@sidebar`, `@main`) definiáljuk.
Példa:
app/
@sidebar/
page.js // Az oldalsáv tartalma
@main/
page.js // A fő szekció tartalma
default.js // Kötelező: Meghatározza a párhuzamos útvonalak alapértelmezett elrendezését
A `default.js` fájl kötelező a párhuzamos útvonalak használatakor. Meghatározza, hogy a különböző slotok hogyan kombinálódnak a végső elrendezés létrehozásához.
// 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. Elfogó útvonalak (Intercepting Routes)
Az elfogó útvonalak lehetővé teszik egy útvonal betöltését az alkalmazás egy másik részéből a jelenlegi elrendezésen belül. Ez hasznos modális ablakok, kép galériák és más UI elemek létrehozásához, amelyeknek a meglévő oldaltartalom felett kell megjelenniük. Az elfogó útvonalakat a `(..)` szintaxissal definiáljuk, amely jelzi, hogy hány szinttel feljebb kell menni a könyvtárfában az elfogott útvonal megtalálásához.
Példa:
app/
(.)photos/
[id]/
page.js // Az elfogott útvonal
feed/
page.js // Az oldal, ahol a fotó modális ablaka megjelenik
Ebben a példában, amikor egy felhasználó rákattint egy képre a `/feed` oldalon, az `app/(.)photos/[id]/page.js` útvonal elfogásra kerül és modális ablakként jelenik meg a `/feed` oldal felett. A `(.)` szintaxis azt mondja a Next.js-nek, hogy egy szinttel feljebb (az `app` könyvtárba) nézzen a `photos/[id]` útvonal megtalálásához.
Adatlekérés az App Routerrel
Az App Router beépített támogatást nyújt az adatlekéréshez szerver komponensek (Server Components) és kliens komponensek (Client Components) használatával. A szerver komponensek a szerveren, míg a kliens komponensek a kliensen renderelődnek. Ez lehetővé teszi, hogy minden komponenshez a követelményei alapján a legjobb megközelítést válassza.
Szerver komponensek
A szerver komponensek az alapértelmezettek az App Routerben. Lehetővé teszik az adatok közvetlen lekérését a komponensekben, anélkül, hogy külön API útvonalakra lenne szükség. Ez javíthatja a teljesítményt és egyszerűsítheti a kódot.
Példa:
// app/products/page.js
import React from 'react';
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<div>
<h1>Termékek</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Adatbázisból vagy API-ból történő adatlekérés szimulálása
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'A termék' },
{ id: 2, name: 'B termék' },
{ id: 3, name: 'C termék' },
];
resolve(products);
}, 500);
});
}
Ebben a példában a `fetchProducts` függvényt közvetlenül a `ProductsPage` komponensben hívjuk meg. A komponens a szerveren renderelődik, és az adatok lekérése megtörténik, mielőtt a HTML a klienshez kerülne.
Kliens komponensek
A kliens komponensek a kliensen renderelődnek, és lehetővé teszik a kliensoldali funkciók, mint például eseménykezelők, állapot (state) és böngésző API-k használatát. Egy kliens komponens használatához a fájl tetejére kell írni a `'use client'` direktívát.
Példa:
// app/counter/page.js
'use client'
import React, { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Számláló</h1>
<p>Érték: {count}</p>
<button onClick={() => setCount(count + 1)}>Növelés</button>
</div>
);
}
Ebben a példában a `CounterPage` komponens egy kliens komponens, mert a `useState` hook-ot használja. A `'use client'` direktíva utasítja a Next.js-t, hogy ezt a komponenst a kliensen renderelje.
Haladó útválasztási technikák
Az App Router számos haladó útválasztási technikát kínál, amelyekkel komplex és kifinomult alkalmazásokat lehet létrehozni.
1. Útvonalkezelők (Route Handlers)
Az útvonalkezelők lehetővé teszik API végpontok létrehozását az `app` könyvtáron belül. Ez kiküszöböli a külön `pages/api` könyvtár szükségességét. Az útvonalkezelőket a `route.js` (vagy `route.ts`) nevű fájlokban definiáljuk, és olyan függvényeket exportálnak, amelyek különböző HTTP metódusokat kezelnek (pl. `GET`, `POST`, `PUT`, `DELETE`).
Példa:
// app/api/users/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Felhasználók lekérésének szimulálása adatbázisból
const users = [
{ id: 1, name: 'Gipsz Jakab' },
{ id: 2, name: 'Minta Klára' },
];
return NextResponse.json(users);
}
export async function POST(request) {
const body = await request.json()
console.log('Fogadott adatok:', body)
return NextResponse.json({ message: 'Felhasználó létrehozva' }, { status: 201 })
}
Ez a példa egy útvonalkezelőt definiál a `/api/users` címen, amely kezeli a `GET` és `POST` kéréseket is. A `GET` függvény visszaad egy felhasználói listát, a `POST` függvény pedig létrehoz egy új felhasználót.
2. Útvonal-csoportok több elrendezéssel
Kombinálhatja az útvonal-csoportokat elrendezésekkel, hogy különböző elrendezéseket hozzon létre az alkalmazás különböző részeihez. Ez hasznos olyan esetekben, amikor más fejlécet vagy oldalsávot szeretne az oldal különböző részein.
Példa:
app/
(marketing)/
layout.js // Marketing elrendezés
about/
page.js
contact/
page.js
(admin)/
layout.js // Admin elrendezés
dashboard/
page.js
Ebben a példában az `about` és `contact` oldalak a `marketing` elrendezést, míg a `dashboard` oldal az `admin` elrendezést fogja használni.
3. Middleware
A Middleware lehetővé teszi kód futtatását, mielőtt egy kérést az alkalmazás kezelne. Ez hasznos olyan feladatokhoz, mint a hitelesítés, engedélyezés, naplózás és a felhasználók átirányítása a tartózkodási helyük vagy eszközük alapján.
A Middleware-t egy `middleware.js` (vagy `middleware.ts`) nevű fájlban definiáljuk a projekt gyökerében.
Példa:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Ellenőrizzük, hogy a felhasználó hitelesítve van-e
const isAuthenticated = false; // Cserélje le a saját hitelesítési logikájával
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// Lásd alább az "Illeszkedő útvonalak" részt a továbbiakért
export const config = {
matcher: '/admin/:path*',
}
Ez a példa egy middleware-t definiál, amely ellenőrzi, hogy a felhasználó hitelesítve van-e, mielőtt engedélyezné a hozzáférést bármely `/admin` alatti útvonalhoz. Ha a felhasználó nincs hitelesítve, átirányítják a `/login` oldalra.
Bevált gyakorlatok a fájl-alapú útválasztáshoz
Ahhoz, hogy a legtöbbet hozza ki az App Router fájl-alapú útválasztási rendszeréből, vegye figyelembe a következő bevált gyakorlatokat:
- Tartsa a fájlstruktúrát rendezetten: Használjon értelmes mappaneveket és csoportosítsa az összetartozó fájlokat.
- Használjon elrendezéseket a megosztott UI-hoz: Hozzon létre elrendezéseket a fejlécekhez, láblécekhez, oldalsávokhoz és más, több oldalon megosztott elemekhez.
- Használjon betöltő UI-kat: Biztosítson betöltő UI-kat az adatokat lekérő vagy más aszinkron műveleteket végző útvonalakhoz.
- Kezelje a hibákat elegánsan: Hozzon létre egyéni hiba UI-kat, hogy jobb felhasználói élményt nyújtson, amikor hibák fordulnak elő.
- Használjon útvonal-csoportokat a szervezéshez: Használjon útvonal-csoportokat az útvonalak szervezéséhez anélkül, hogy befolyásolná az URL struktúrát.
- Használja ki a szerver komponenseket a teljesítmény érdekében: Használjon szerver komponenseket az adatok lekéréséhez és a UI szerveren történő rendereléséhez, javítva a teljesítményt és a SEO-t.
- Használjon kliens komponenseket, amikor szükséges: Használjon kliens komponenseket, amikor kliensoldali funkciókat, például eseménykezelőket, állapotot és böngésző API-kat kell használnia.
Példák nemzetköziesítésre a Next.js App Routerrel
A Next.js App Router a fájl-alapú útválasztással egyszerűsíti a nemzetköziesítést (i18n). Íme, hogyan valósíthatja meg hatékonyan az i18n-t:
1. Alútvonal-alapú útválasztás (Sub-path Routing)
Szervezze útvonalait nyelvi beállítás (locale) alapján alútvonalak használatával. Például:
app/
[locale]/
page.tsx // A honlap az adott nyelvi beállításhoz
about/
page.tsx // A névjegy oldal az adott nyelvi beállításhoz
// 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(`Sikertelen a fordítások betöltése a ${locale} nyelvi beállításhoz`, error);
return dictionaries.en();
}
};
Ebben a beállításban a `[locale]` dinamikus útvonalszegmens kezeli a különböző nyelvi beállításokat (pl. `/en`, `/es`). A fordítások dinamikusan töltődnek be a nyelvi beállítás alapján.
2. Domain-alapú útválasztás
Egy haladóbb megközelítéshez használhat különböző domaineket vagy aldomaineket minden nyelvi beállításhoz. Ez gyakran további konfigurációt igényel a hosting szolgáltatónál.
3. Middleware a nyelvi beállítás észleléséhez
Használjon middleware-t a felhasználó preferált nyelvi beállításának automatikus észleléséhez és ennek megfelelő átirányításához.
// 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'); // Használja az "en"-t alapértelmezett nyelvi beállításként
} catch (error) {
console.error("Hiba a nyelvi beállítás egyeztetésekor:", error);
return 'en'; // Visszaállás angolra, ha az egyeztetés sikertelen
}
}
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).*)',
],
};
Ez a middleware ellenőrzi, hogy a kért útvonal rendelkezik-e nyelvi előtaggal. Ha nem, akkor az `Accept-Language` fejléc alapján észleli a felhasználó preferált nyelvét, és átirányítja a megfelelő, nyelvspecifikus útvonalra. Olyan könyvtárak, mint az `@formatjs/intl-localematcher` és a `negotiator` használatosak a nyelvi egyeztetés kezelésére.
Next.js App Router és globális akadálymentesség
A globálisan elérhető webalkalmazások létrehozása gondos figyelmet igényel az akadálymentesítési (a11y) elvekre. A Next.js App Router szilárd alapot biztosít az akadálymentes élmények építéséhez, de elengedhetetlen a bevált gyakorlatok alkalmazása annak érdekében, hogy az alkalmazás mindenki számára használható legyen, képességeiktől függetlenül.
Kulcsfontosságú akadálymentesítési szempontok
- Szemantikus HTML: Használjon szemantikus HTML elemeket (pl. `<article>`, `<nav>`, `<aside>`, `<main>`) a tartalom strukturálásához. Ez jelentést ad a segítő technológiáknak, és segíti a felhasználókat a webhelyen való könnyebb navigálásban.
- ARIA attribútumok: Használjon ARIA (Accessible Rich Internet Applications) attribútumokat az egyéni komponensek és widgetek akadálymentességének javítására. Az ARIA attribútumok további információt nyújtanak az elemek szerepéről, állapotáról és tulajdonságairól a segítő technológiák számára.
- Billentyűzet-navigáció: Győződjön meg arról, hogy minden interaktív elem elérhető billentyűzettel. A felhasználóknak képesnek kell lenniük a `Tab` billentyűvel navigálni az alkalmazásban, és a `Enter` vagy `Szóköz` billentyűvel interakcióba lépni az elemekkel.
- Színkontraszt: Használjon elegendő színkontrasztot a szöveg és a háttér között, hogy biztosítsa az olvashatóságot a látássérült felhasználók számára. A Web Content Accessibility Guidelines (WCAG) legalább 4.5:1 kontrasztarányt javasol a normál szöveghez és 3:1 arányt a nagy szöveghez.
- Kép Alt szöveg: Adjon leíró alt szöveget minden képhez. Az alt szöveg egy szöveges alternatívát nyújt a képekhez, amelyet a képernyőolvasók felolvashatnak.
- Űrlap címkék: Társítsa az űrlap címkéket a megfelelő beviteli mezőkhöz a `<label>` elem használatával. Ez egyértelművé teszi a felhasználók számára, hogy milyen információt várnak el az egyes mezőkben.
- Képernyőolvasó tesztelés: Tesztelje az alkalmazást képernyőolvasóval, hogy megbizonyosodjon arról, hogy az hozzáférhető a látássérült felhasználók számára. Népszerű képernyőolvasók közé tartozik az NVDA, a JAWS és a VoiceOver.
Akadálymentesség megvalósítása a Next.js App Routerben
- Használja a Next.js Link komponenst: Használja a `<Link>` komponenst a navigációhoz. Beépített akadálymentesítési funkciókat biztosít, mint például az előbetöltés és a fókuszkezelés.
- Fókuszkezelés: Amikor oldalak között navigál vagy modális ablakokat nyit meg, győződjön meg arról, hogy a fókusz megfelelően van kezelve. A fókuszt az új oldalon vagy modális ablakon a leglogikusabb elemre kell állítani.
- Akadálymentes egyéni komponensek: Egyéni komponensek létrehozásakor győződjön meg arról, hogy azok akadálymentesek a fent vázolt elvek követésével. Használjon szemantikus HTML-t, ARIA attribútumokat és billentyűzet-navigációt, hogy komponenseit mindenki használhassa.
- Linting és tesztelés: Használjon linting eszközöket, mint például az ESLint akadálymentesítési bővítményekkel, hogy azonosítsa a lehetséges akadálymentesítési problémákat a kódban. Továbbá használjon automatizált tesztelő eszközöket az alkalmazás akadálymentességi hibáinak tesztelésére.
Következtetés
A Next.js App Router fájl-alapú útválasztási rendszere egy erőteljes és intuitív módszert kínál az alkalmazások strukturálására és navigálására. Az ebben az útmutatóban vázolt alapkoncepciók és bevált gyakorlatok megértésével robusztus, skálázható és karbantartható Next.js alkalmazásokat építhet. Kísérletezzen az App Router különböző funkcióival, és fedezze fel, hogyan egyszerűsítheti a fejlesztési munkafolyamatát és javíthatja a felhasználói élményt.