Atskleiskite Next.js App Router galią su mūsų išsamiu, failais pagrįsto maršruto parinkimo vadovu. Išmokite, kaip struktūrizuoti savo programą, kurti dinaminius maršrutus, tvarkyti maketus ir kt.
Next.js App Router: išsamus, failais pagrįsto maršruto parinkimo vadovas
Next.js App Router, pristatytas Next.js 13 versijoje ir tapęs standartu vėlesnėse versijose, iš esmės keičia programų struktūrizavimo ir naršymo būdus. Jis pristato galingą ir intuityvią failais pagrįstą maršruto parinkimo sistemą, kuri supaprastina kūrimą, gerina našumą ir bendrą kūrėjo patirtį. Šis išsamus vadovas gilinsis į App Router failais pagrįstą maršruto parinkimą, suteikdamas jums žinių ir įgūdžių, reikalingų tvirtoms ir keičiamo dydžio Next.js programoms kurti.
Kas yra failais pagrįstas maršruto parinkimas?
Failais pagrįstas maršruto parinkimas yra sistema, kurioje jūsų programos maršrutų struktūra tiesiogiai priklauso nuo jūsų failų ir katalogų organizavimo. Naudojant Next.js App Router, maršrutus apibrėžiate kurdami failus `app` kataloge. Kiekvienas aplankas atitinka maršruto segmentą, o specialūs failai tuose aplankuose apibrėžia, kaip tas maršruto segmentas bus apdorojamas. Šis požiūris suteikia keletą privalumų:
- Intuityvi struktūra: Failų sistema atspindi programos maršrutų struktūrą, todėl ją lengva suprasti ir naršyti.
- Automatinis maršruto parinkimas: Next.js automatiškai generuoja maršrutus pagal jūsų failų struktūrą, todėl nereikia rankinės konfigūracijos.
- Kodo kolokacija: Maršrutų tvarkyklės ir vartotojo sąsajos komponentai yra vienoje vietoje, o tai pagerina kodo organizavimą ir palaikymą.
- Integruotos funkcijos: App Router teikia integruotą palaikymą maketams, dinaminiams maršrutams, duomenų gavimui ir kt., supaprastindamas sudėtingus maršruto parinkimo scenarijus.
Darbo su App Router pradžia
Norėdami naudoti App Router, turite sukurti naują Next.js projektą arba perkelti esamą. Įsitikinkite, kad naudojate Next.js 13 ar naujesnę versiją.
Naujo projekto kūrimas:
Galite sukurti naują Next.js projektą su App Router naudodami šią komandą:
npx create-next-app@latest my-app --example with-app
Esamo projekto perkėlimas:
Norėdami perkelti esamą projektą, turite perkelti savo puslapius iš `pages` katalogo į `app` katalogą. Gali tekti atitinkamai pakoreguoti maršruto parinkimo logiką. Next.js pateikia migracijos vadovą, kuris padės jums atlikti šį procesą.
Pagrindinės failais pagrįsto maršruto parinkimo koncepcijos
App Router pristato keletą specialių failų ir konvencijų, kurios apibrėžia, kaip tvarkomi jūsų maršrutai:
1. `app` katalogas
`app` katalogas yra jūsų programos maršrutų šaknis. Visi failai ir aplankai šiame kataloge bus naudojami maršrutams generuoti. Viskas, kas yra už `app` katalogo ribų (pvz., `pages` katalogas, jei migruojate), bus ignoruojama App Router.
2. `page.js` failas
`page.js` (arba `page.jsx`, `page.ts`, `page.tsx`) failas yra pati fundamentaliausia App Router dalis. Jis apibrėžia vartotojo sąsajos komponentą, kuris bus atvaizduojamas konkrečiam maršruto segmentui. Tai yra būtinas failas bet kuriam maršruto segmentui, kurį norite padaryti tiesiogiai pasiekiamą.
Pavyzdys:
Jei jūsų failų struktūra yra tokia:
app/
about/
page.js
Komponentas, eksportuotas iš `app/about/page.js`, bus atvaizduotas, kai vartotojas nueis į `/about`.
// app/about/page.js
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>Apie mus</h1>
<p>Sužinokite daugiau apie mūsų įmonę.</p>
</div>
);
}
3. `layout.js` failas
`layout.js` (arba `layout.jsx`, `layout.ts`, `layout.tsx`) failas apibrėžia vartotojo sąsają, kuri yra bendra keliems puslapiams maršruto segmente. Maketai yra naudingi kuriant nuoseklias antraštes, poraštes, šonines juostas ir kitus elementus, kurie turėtų būti keliuose puslapiuose.
Pavyzdys:
Tarkime, norite pridėti antraštę tiek `/about` puslapiui, tiek hipotetiniam `/about/team` puslapiui. Galite sukurti `layout.js` failą `app/about` kataloge:
// app/about/layout.js
import React from 'react';
export default function AboutLayout({ children }) {
return (
<div>
<header>
<h1>Apie mūsų įmonę</h1>
</header>
<main>{children}</main>
</div>
);
}
`children` savybė (prop) bus pakeista vartotojo sąsaja, kurią atvaizduoja `page.js` failas tame pačiame kataloge arba bet kuriuose įdėtuose kataloguose.
4. `template.js` failas
`template.js` failas yra panašus į `layout.js`, bet jis sukuria naują komponento egzempliorių kiekvienam antriniam maršrutui. Tai naudinga scenarijuose, kai norite išsaugoti komponento būseną arba išvengti pervaizdavimo naršant tarp antrinių maršrutų. Skirtingai nuo maketų, šablonai (templates) bus pervaizduojami naršant. Šablonų naudojimas puikiai tinka elementų animavimui naršymo metu.
Pavyzdys:
// app/template.js
'use client'
import { useState } from 'react'
export default function Template({ children }) {
const [count, setCount] = useState(0)
return (
<main>
<p>Šablonas: {count}</p>
<button onClick={() => setCount(count + 1)}>Atnaujinti šabloną</button>
{children}
</main>
)
}
5. `loading.js` failas
`loading.js` (arba `loading.jsx`, `loading.ts`, `loading.tsx`) failas leidžia sukurti krovimo vartotojo sąsają, kuri rodoma, kol maršruto segmentas kraunasi. Tai naudinga siekiant suteikti geresnę vartotojo patirtį gaunant duomenis ar atliekant kitas asinchronines operacijas.
Pavyzdys:
// app/about/loading.js
import React from 'react';
export default function Loading() {
return <p>Kraunama informacija apie mus...</p>;
}
Kai vartotojas nueis į `/about`, bus rodomas `Loading` komponentas, kol `page.js` komponentas bus visiškai atvaizduotas.
6. `error.js` failas
`error.js` (arba `error.jsx`, `error.ts`, `error.tsx`) failas leidžia sukurti pasirinktinę klaidos vartotojo sąsają, kuri rodoma, kai maršruto segmente įvyksta klaida. Tai naudinga siekiant pateikti patogesnį klaidos pranešimą ir išvengti visos programos sutrikimo.
Pavyzdys:
// app/about/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>Įvyko klaida!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Bandyti dar kartą</button>
</div>
);
}
Jei atvaizduojant `/about` puslapį įvyks klaida, bus rodomas `Error` komponentas. `error` savybė (prop) pateikia informaciją apie klaidą, o `reset` funkcija leidžia vartotojui bandyti perkrauti puslapį.
7. Maršrutų grupės
Maršrutų grupės `(groupName)` leidžia organizuoti maršrutus nepaveikiant URL struktūros. Jos sukuriamos apgaubiant aplanko pavadinimą skliausteliais. Tai ypač naudinga organizuojant maketus ir bendrus komponentus.
Pavyzdys:
app/
(marketing)/
about/
page.js
contact/
page.js
(shop)/
products/
page.js
Šiame pavyzdyje `about` ir `contact` puslapiai yra sugrupuoti `marketing` grupėje, o `products` puslapis yra `shop` grupėje. URL adresai išlieka `/about`, `/contact` ir `/products` atitinkamai.
8. Dinaminiai maršrutai
Dinaminiai maršrutai leidžia kurti maršrutus su kintamais segmentais. Tai naudinga norint rodyti turinį, pagrįstą duomenimis, gautais iš duomenų bazės ar API. Dinaminiai maršruto segmentai apibrėžiami apgaubiant segmento pavadinimą laužtiniais skliaustais (pvz., `[id]`).
Pavyzdys:
Tarkime, norite sukurti maršrutą, skirtą atskiriems tinklaraščio įrašams rodyti pagal jų ID. Galite sukurti tokią failų struktūrą:
app/
blog/
[id]/
page.js
`[id]` segmentas yra dinaminis segmentas. Komponentas, eksportuotas iš `app/blog/[id]/page.js`, bus atvaizduotas, kai vartotojas nueis į URL, pavyzdžiui, `/blog/123` arba `/blog/456`. `id` parametro reikšmė bus pasiekiama komponento `params` savybėje.
// app/blog/[id]/page.js
import React from 'react';
export default async function BlogPost({ params }) {
const { id } = params;
// Gauti duomenis tinklaraščio įrašui su nurodytu ID
const post = await fetchBlogPost(id);
if (!post) {
return <p>Tinklaraščio įrašas nerastas.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Imituoti duomenų gavimą iš duomenų bazės ar API
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Mano pirmasis tinklaraščio įrašas', content: 'Tai yra mano pirmojo tinklaraščio įrašo turinys.' },
'456': { title: 'Kitas tinklaraščio įrašas', content: 'Tai dar šiek tiek įdomaus turinio.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Taip pat galite naudoti kelis dinaminius segmentus maršrute. Pavyzdžiui, galite turėti maršrutą, pavyzdžiui, `/blog/[category]/[id]`.
9. „Viską pagaunantys“ (Catch-all) segmentai
„Viską pagaunantys“ segmentai leidžia kurti maršrutus, kurie atitinka bet kokį segmentų skaičių. Tai naudinga scenarijuose, pavyzdžiui, kuriant TVS (turinio valdymo sistemą), kur URL struktūrą nustato vartotojas. „Viską pagaunantys“ segmentai apibrėžiami pridedant tris taškus prieš segmento pavadinimą (pvz., `[...slug]`).
Pavyzdys:
app/
docs/
[...slug]/
page.js
`[...slug]` segmentas atitiks bet kokį segmentų skaičių po `/docs`. Pavyzdžiui, jis atitiks `/docs/getting-started`, `/docs/api/users` ir `/docs/advanced/configuration`. `slug` parametro reikšmė bus masyvas, kuriame yra atitinkami segmentai.
// app/docs/[...slug]/page.js
import React from 'react';
export default function DocsPage({ params }) {
const { slug } = params;
return (
<div>
<h1>Dokumentacija</h1>
<p>Slug: {slug ? slug.join('/') : 'Nėra slug'}</p>
</div>
);
}
Pasirenkamus „viską pagaunančius“ segmentus galima sukurti apgaubiant segmento pavadinimą dvejopais laužtiniais skliaustais `[[...slug]]`. Tai padaro maršruto segmentą neprivalomą. Pavyzdys:
app/
blog/
[[...slug]]/
page.js
Ši konfigūracija atvaizduos page.js komponentą tiek adresu `/blog`, tiek adresu `/blog/any/number/of/segments`.
10. Lygiagretūs maršrutai
Lygiagretūs maršrutai leidžia vienu metu atvaizduoti vieną ar kelis puslapius tame pačiame makete. Tai ypač naudinga sudėtingiems maketams, pvz., prietaisų skydeliams, kur skirtingos puslapio dalys gali būti kraunamos nepriklausomai. Lygiagretūs maršrutai apibrėžiami naudojant simbolį `@`, po kurio eina lizdo (slot) pavadinimas (pvz., `@sidebar`, `@main`).
Pavyzdys:
app/
@sidebar/
page.js // Turinys šoninei juostai
@main/
page.js // Turinys pagrindinei daliai
default.js // Būtinas: Apibrėžia numatytąjį maketą lygiagretiems maršrutams
`default.js` failas yra būtinas naudojant lygiagrečius maršrutus. Jis apibrėžia, kaip skirtingi lizdai yra sujungiami, kad sukurtų galutinį maketą.
// 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. Perimantys maršrutai
Perimantys maršrutai leidžia įkelti maršrutą iš kitos jūsų programos dalies dabartiniame makete. Tai naudinga kuriant modalinius langus, nuotraukų galerijas ir kitus vartotojo sąsajos elementus, kurie turėtų atsirasti virš esamo puslapio turinio. Perimantys maršrutai apibrėžiami naudojant `(..)` sintaksę, kuri nurodo, kiek lygių aukštyn katalogų medyje reikia eiti, kad būtų rastas perimamas maršrutas.
Pavyzdys:
app/
(.)photos/
[id]/
page.js // Perimamas maršrutas
feed/
page.js // Puslapis, kuriame rodomas nuotraukų modalinis langas
Šiame pavyzdyje, kai vartotojas paspaudžia ant nuotraukos `/feed` puslapyje, `app/(.)photos/[id]/page.js` maršrutas yra perimamas ir rodomas kaip modalinis langas virš `/feed` puslapio. `(.)` sintaksė nurodo Next.js ieškoti vienu lygiu aukščiau (į `app` katalogą), kad surastų `photos/[id]` maršrutą.
Duomenų gavimas su App Router
App Router teikia integruotą palaikymą duomenų gavimui naudojant serverio komponentus (Server Components) ir kliento komponentus (Client Components). Serverio komponentai atvaizduojami serveryje, o kliento komponentai – kliento pusėje. Tai leidžia pasirinkti geriausią požiūrį kiekvienam komponentui pagal jo reikalavimus.
Serverio komponentai
Serverio komponentai yra numatytieji App Router. Jie leidžia gauti duomenis tiesiogiai jūsų komponentuose, nereikalaujant atskirų API maršrutų. Tai gali pagerinti našumą ir supaprastinti jūsų kodą.
Pavyzdys:
// app/products/page.js
import React from 'react';
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<div>
<h1>Produktai</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Imituoti duomenų gavimą iš duomenų bazės ar API
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'Produktas A' },
{ id: 2, name: 'Produktas B' },
{ id: 3, name: 'Produktas C' },
];
resolve(products);
}, 500);
});
}
Šiame pavyzdyje `fetchProducts` funkcija iškviečiama tiesiogiai `ProductsPage` komponente. Komponentas atvaizduojamas serveryje, o duomenys gaunami prieš HTML išsiunčiant klientui.
Kliento komponentai
Kliento komponentai atvaizduojami kliento pusėje ir leidžia naudoti kliento pusės funkcijas, tokias kaip įvykių klausytojai, būsena ir naršyklės API. Norėdami naudoti kliento komponentą, turite pridėti `'use client'` direktyvą failo viršuje.
Pavyzdys:
// app/counter/page.js
'use client'
import React, { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Skaitiklis</h1>
<p>Skaičius: {count}</p>
<button onClick={() => setCount(count + 1)}>Didinti</button>
</div>
);
}
Šiame pavyzdyje `CounterPage` komponentas yra kliento komponentas, nes jis naudoja `useState` „kabliuką“ (hook). `'use client'` direktyva nurodo Next.js atvaizduoti šį komponentą kliento pusėje.
Pažangios maršruto parinkimo technikos
App Router siūlo keletą pažangių maršruto parinkimo technikų, kurias galima naudoti kuriant sudėtingas ir išmanias programas.
1. Maršrutų tvarkyklės (Route Handlers)
Maršrutų tvarkyklės leidžia kurti API galinius taškus jūsų `app` kataloge. Tai pašalina poreikį turėti atskirą `pages/api` katalogą. Maršrutų tvarkyklės apibrėžiamos failuose, pavadintuose `route.js` (arba `route.ts`), ir eksportuoja funkcijas, kurios tvarko skirtingus HTTP metodus (pvz., `GET`, `POST`, `PUT`, `DELETE`).
Pavyzdys:
// app/api/users/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Imituoti vartotojų gavimą iš duomenų bazės
const users = [
{ id: 1, name: 'Jonas Jonaitis' },
{ id: 2, name: 'Petras Petraitis' },
];
return NextResponse.json(users);
}
export async function POST(request) {
const body = await request.json()
console.log('Gauti duomenys:', body)
return NextResponse.json({ message: 'Vartotojas sukurtas' }, { status: 201 })
}
Šis pavyzdys apibrėžia maršruto tvarkyklę adresu `/api/users`, kuri tvarko tiek `GET`, tiek `POST` užklausas. `GET` funkcija grąžina vartotojų sąrašą, o `POST` funkcija sukuria naują vartotoją.
2. Maršrutų grupės su keliais maketais
Galite derinti maršrutų grupes su maketais, kad sukurtumėte skirtingus maketus skirtingoms programos dalims. Tai naudinga scenarijuose, kai norite turėti skirtingą antraštę ar šoninę juostą skirtingoms svetainės dalims.
Pavyzdys:
app/
(marketing)/
layout.js // Rinkodaros maketas
about/
page.js
contact/
page.js
(admin)/
layout.js // Administratoriaus maketas
dashboard/
page.js
Šiame pavyzdyje `about` ir `contact` puslapiai naudos `marketing` maketą, o `dashboard` puslapis – `admin` maketą.
3. Tarpinė programinė įranga (Middleware)
Tarpinė programinė įranga leidžia vykdyti kodą prieš užklausą apdorojant jūsų programai. Tai naudinga atliekant tokias užduotis kaip autentifikavimas, autorizavimas, žurnalo įrašų darymas ir vartotojų nukreipimas pagal jų vietą ar įrenginį.
Tarpinė programinė įranga apibrėžiama faile pavadinimu `middleware.js` (arba `middleware.ts`) projekto šakniniame kataloge.
Pavyzdys:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Patikrinti, ar vartotojas yra autentifikuotas
const isAuthenticated = false; // Pakeiskite savo autentifikavimo logika
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// Žiūrėkite "Atitinkantys keliai" (Matching Paths) žemiau, kad sužinotumėte daugiau
export const config = {
matcher: '/admin/:path*',
}
Šis pavyzdys apibrėžia tarpinę programinę įrangą, kuri patikrina, ar vartotojas yra autentifikuotas, prieš leisdama jam pasiekti bet kurį maršrutą po `/admin`. Jei vartotojas nėra autentifikuotas, jis nukreipiamas į `/login` puslapį.
Gerosios praktikos dirbant su failais pagrįstu maršruto parinkimu
Norėdami maksimaliai išnaudoti App Router failais pagrįstą maršruto parinkimo sistemą, apsvarstykite šias gerasias praktikas:
- Laikykite savo failų struktūrą tvarkingą: Naudokite prasmingus aplankų pavadinimus ir grupuokite susijusius failus.
- Naudokite maketus bendrai vartotojo sąsajai: Kurkite maketus antraštėms, poraštėms, šoninėms juostoms ir kitiems elementams, kurie yra bendri keliems puslapiams.
- Naudokite krovimo vartotojo sąsajas: Pateikite krovimo vartotojo sąsajas maršrutams, kurie gauna duomenis ar atlieka kitas asinchronines operacijas.
- Klaidas tvarkykite grakščiai: Kurkite pasirinktines klaidų vartotojo sąsajas, kad suteiktumėte geresnę vartotojo patirtį, kai įvyksta klaidos.
- Naudokite maršrutų grupes organizavimui: Naudokite maršrutų grupes organizuoti maršrutus nepaveikiant URL struktūros.
- Išnaudokite serverio komponentus našumui: Naudokite serverio komponentus duomenims gauti ir vartotojo sąsajai atvaizduoti serveryje, gerindami našumą ir SEO.
- Naudokite kliento komponentus, kai būtina: Naudokite kliento komponentus, kai reikia naudoti kliento pusės funkcijas, tokias kaip įvykių klausytojai, būsena ir naršyklės API.
Internacionalizacijos pavyzdžiai su Next.js App Router
Next.js App Router supaprastina internacionalizaciją (i18n) per failais pagrįstą maršruto parinkimą. Štai kaip galite efektyviai įgyvendinti i18n:
1. Maršruto parinkimas pagal antrinį kelią (Sub-path Routing)
Organizuokite savo maršrutus pagal lokalę naudodami antrinius kelius. Pavyzdžiui:
app/
[locale]/
page.tsx // Pagrindinis puslapis lokalei
about/
page.tsx // Apie mus puslapis lokalei
// 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),
lt: () => import('./dictionaries/lt.json').then((module) => module.default),
};
export const getTranslations = async (locale) => {
try {
return dictionaries[locale]() ?? dictionaries.en();
} catch (error) {
console.error(`Nepavyko įkelti vertimų lokalei ${locale}`, error);
return dictionaries.en();
}
};
Šioje konfigūracijoje `[locale]` dinaminis maršruto segmentas tvarko skirtingas lokales (pvz., `/en`, `/lt`). Vertimai įkeliami dinamiškai pagal lokalę.
2. Maršruto parinkimas pagal domeną
Norėdami taikyti pažangesnį metodą, galite naudoti skirtingus domenus ar subdomenus kiekvienai lokalei. Tai dažnai reikalauja papildomos konfigūracijos jūsų prieglobos paslaugų teikėjo pusėje.
3. Tarpinė programinė įranga (Middleware) lokalės aptikimui
Naudokite tarpinę programinę įrangą, kad automatiškai aptiktumėte vartotojo pageidaujamą lokalę ir atitinkamai jį nukreiptumėte.
// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';
let locales = ['en', 'lt', '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'); // Naudoti "en" kaip numatytąją lokalę
} catch (error) {
console.error("Klaida nustatant lokalę:", error);
return 'en'; // Grįžti prie anglų kalbos, jei nepavyksta nustatyti
}
}
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).*)',
],
};
Ši tarpinė programinė įranga patikrina, ar užklaustame kelyje yra lokalės prefiksas. Jei ne, ji aptinka vartotojo pageidaujamą lokalę naudodama `Accept-Language` antraštę ir nukreipia jį į atitinkamą, konkrečiai lokalei skirtą kelią. Bibliotekos, tokios kaip `@formatjs/intl-localematcher` ir `negotiator`, naudojamos lokalės derinimui tvarkyti.
Next.js App Router ir globalus prieinamumas
Kuriant globaliai prieinamas interneto programas, reikia atidžiai apsvarstyti prieinamumo (a11y) principus. Next.js App Router suteikia tvirtą pagrindą prieinamoms patirtims kurti, tačiau būtina įgyvendinti geriausias praktikas, kad jūsų programa būtų naudojama visiems, nepriklausomai nuo jų gebėjimų.
Pagrindiniai prieinamumo aspektai
- Semantinis HTML: Naudokite semantinius HTML elementus (pvz., `<article>`, `<nav>`, `<aside>`, `<main>`), kad struktūrizuotumėte savo turinį. Tai suteikia prasmę pagalbinei technologijai ir padeda vartotojams lengviau naršyti jūsų svetainėje.
- ARIA atributai: Naudokite ARIA (Accessible Rich Internet Applications) atributus, kad pagerintumėte pasirinktinių komponentų ir valdiklių prieinamumą. ARIA atributai suteikia papildomos informacijos apie elementų vaidmenį, būseną ir savybes pagalbinei technologijai.
- Naršymas klaviatūra: Užtikrinkite, kad visi interaktyvūs elementai būtų pasiekiami klaviatūra. Vartotojai turėtų galėti naršyti po jūsų programą naudodami `Tab` klavišą ir sąveikauti su elementais naudodami `Enter` arba `Space` klavišus.
- Spalvų kontrastas: Naudokite pakankamą spalvų kontrastą tarp teksto ir fono, kad užtikrintumėte skaitomumą vartotojams su regėjimo sutrikimais. Žiniatinklio turinio prieinamumo gairės (WCAG) rekomenduoja kontrasto santykį ne mažesnį kaip 4.5:1 normaliam tekstui ir 3:1 dideliam tekstui.
- Paveikslėlių Alt tekstas: Pateikite aprašomąjį alt tekstą visiems paveikslėliams. Alt tekstas suteikia tekstinę alternatyvą paveikslėliams, kurią gali perskaityti ekrano skaitytuvai.
- Formų etiketės: Susiekite formų etiketes su atitinkamais įvesties laukais naudodami `<label>` elementą. Tai aiškiai parodo vartotojams, kokia informacija tikimasi kiekviename lauke.
- Testavimas su ekrano skaitytuvu: Išbandykite savo programą su ekrano skaitytuvu, kad užtikrintumėte, jog ji yra prieinama vartotojams su regėjimo sutrikimais. Populiarūs ekrano skaitytuvai yra NVDA, JAWS ir VoiceOver.
Prieinamumo įgyvendinimas Next.js App Router
- Naudokite Next.js Link komponentą: Naudokite `<Link>` komponentą navigacijai. Jis suteikia integruotas prieinamumo funkcijas, tokias kaip išankstinis duomenų atsiuntimas (prefetching) ir fokuso valdymas.
- Fokuso valdymas: Naršant tarp puslapių ar atidarant modalinius langus, užtikrinkite, kad fokusas būtų tinkamai valdomas. Fokusas turėtų būti nustatytas į logiškiausią elementą naujame puslapyje ar modaliniame lange.
- Prieinami pasirinktiniai komponentai: Kuriant pasirinktinius komponentus, užtikrinkite, kad jie būtų prieinami, laikydamiesi aukščiau nurodytų principų. Naudokite semantinį HTML, ARIA atributus ir naršymą klaviatūra, kad jūsų komponentai būtų naudojami visiems.
- Linting ir testavimas: Naudokite linting įrankius, tokius kaip ESLint su prieinamumo įskiepiais, kad nustatytumėte galimas prieinamumo problemas savo kode. Taip pat naudokite automatizuoto testavimo įrankius, kad patikrintumėte savo programą dėl prieinamumo pažeidimų.
Išvada
Next.js App Router failais pagrįsta maršruto parinkimo sistema siūlo galingą ir intuityvų būdą struktūrizuoti ir naršyti jūsų programas. Suprasdami pagrindines koncepcijas ir geriausias praktikas, aprašytas šiame vadove, galėsite kurti tvirtas, keičiamo dydžio ir lengvai prižiūrimas Next.js programas. Eksperimentuokite su skirtingomis App Router funkcijomis ir atraskite, kaip ji gali supaprastinti jūsų kūrimo procesą ir pagerinti vartotojo patirtį.