Atklājiet Next.js App Router jaudu ar mūsu detalizēto ceļvedi par failu bāzes maršrutēšanu. Uzziniet, kā strukturēt savu lietotni, veidot dinamiskos maršrutus, apstrādāt izkārtojumus un daudz ko citu.
Next.js App Router: Visaptverošs ceļvedis failu bāzes maršrutēšanā
Next.js App Router, kas ieviests Next.js 13 un kļuvis par standartu vēlākās versijās, radikāli maina veidu, kā mēs strukturējam un navigējam lietotnēs. Tas ievieš jaudīgu un intuitīvu failu bāzes maršrutēšanas sistēmu, kas vienkāršo izstrādi, uzlabo veiktspēju un kopējo izstrādātāja pieredzi. Šis visaptverošais ceļvedis dziļi iedziļināsies App Router failu bāzes maršrutēšanā, sniedzot jums zināšanas un prasmes, lai veidotu robustas un mērogojamas Next.js lietotnes.
Kas ir failu bāzes maršrutēšana?
Failu bāzes maršrutēšana ir maršrutēšanas sistēma, kurā jūsu lietotnes maršrutu struktūru tieši nosaka jūsu failu un direktoriju organizācija. Next.js App Router maršrutus definē, veidojot failus `app` direktorijā. Katra mape pārstāv maršruta segmentu, un īpaši faili šajās mapēs definē, kā šis maršruta segments tiks apstrādāts. Šī pieeja piedāvā vairākas priekšrocības:
- Intuitīva struktūra: Failu sistēma atspoguļo lietotnes maršruta struktūru, padarot to viegli saprotamu un pārskatāmu.
- Automātiskā maršrutēšana: Next.js automātiski ģenerē maršrutus, pamatojoties uz jūsu failu struktūru, novēršot nepieciešamību pēc manuālas konfigurācijas.
- Koda kolokācija: Maršrutu apstrādātāji un lietotāja saskarnes komponentes atrodas kopā, uzlabojot koda organizāciju un uzturēšanu.
- Iebūvētās funkcijas: App Router nodrošina iebūvētu atbalstu izkārtojumiem, dinamiskiem maršrutiem, datu ielādei un daudz kam citam, vienkāršojot sarežģītus maršrutēšanas scenārijus.
Darba sākšana ar App Router
Lai izmantotu App Router, jums ir jāizveido jauns Next.js projekts vai jāmigrē esošs projekts. Pārliecinieties, ka izmantojat Next.js versiju 13 vai jaunāku.
Jauna projekta izveide:
Jūs varat izveidot jaunu Next.js projektu ar App Router, izmantojot šādu komandu:
npx create-next-app@latest my-app --example with-app
Esoša projekta migrēšana:
Lai migrētu esošu projektu, jums ir jāpārvieto savas lapas no `pages` direktorijas uz `app` direktoriju. Iespējams, jums būs attiecīgi jāpielāgo maršrutēšanas loģika. Next.js nodrošina migrācijas ceļvedi, lai palīdzētu jums šajā procesā.
Failu bāzes maršrutēšanas pamatkoncepcijas
App Router ievieš vairākus īpašus failus un konvencijas, kas nosaka, kā tiek apstrādāti jūsu maršruti:
1. `app` direktorija
`app` direktorija ir jūsu lietotnes maršrutu sakne. Visi faili un mapes šajā direktorijā tiks izmantoti maršrutu ģenerēšanai. Viss, kas atrodas ārpus `app` direktorijas (piemēram, `pages` direktorija, ja veicat migrāciju), tiks ignorēts no App Router puses.
2. `page.js` fails
`page.js` (vai `page.jsx`, `page.ts`, `page.tsx`) fails ir visbūtiskākā App Router daļa. Tas definē UI komponenti, kas tiks renderēta konkrētam maršruta segmentam. Tas ir **obligāts** fails jebkuram maršruta segmentam, kuru vēlaties padarīt tieši pieejamu.
Piemērs:
Ja jums ir šāda failu struktūra:
app/
about/
page.js
Komponents, kas eksportēts no `app/about/page.js`, tiks renderēts, kad lietotājs pāries uz `/about`.
// app/about/page.js
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>Par mums</h1>
<p>Uzziniet vairāk par mūsu uzņēmumu.</p>
</div>
);
}
3. `layout.js` fails
`layout.js` (vai `layout.jsx`, `layout.ts`, `layout.tsx`) fails definē lietotāja saskarni, kas tiek koplietota starp vairākām lapām viena maršruta segmenta ietvaros. Izkārtojumi ir noderīgi, lai izveidotu konsekventus galvenes, kājenes, sānjoslas un citus elementus, kuriem jābūt redzamiem vairākās lapās.
Piemērs:
Pieņemsim, ka vēlaties pievienot galveni gan `/about` lapai, gan hipotētiskai `/about/team` lapai. Jūs varat izveidot `layout.js` failu `app/about` direktorijā:
// app/about/layout.js
import React from 'react';
export default function AboutLayout({ children }) {
return (
<div>
<header>
<h1>Par mūsu uzņēmumu</h1>
</header>
<main>{children}</main>
</div>
);
}
`children` rekvizīts tiks aizstāts ar UI, ko renderē `page.js` fails tajā pašā direktorijā vai jebkurā ligzdotā direktorijā.
4. `template.js` fails
`template.js` fails ir līdzīgs `layout.js`, bet tas izveido jaunu komponentes instanci katram bērna maršrutam. Tas ir noderīgi scenārijos, kur vēlaties saglabāt komponentes stāvokli vai novērst atkārtotu renderēšanu, navigējot starp bērnu maršrutiem. Atšķirībā no izkārtojumiem, veidnes (templates) tiks atkārtoti renderētas navigācijas laikā. Veidņu izmantošana ir lieliska elementu animēšanai navigācijas laikā.
Piemērs:
// app/template.js
'use client'
import { useState } from 'react'
export default function Template({ children }) {
const [count, setCount] = useState(0)
return (
<main>
<p>Template: {count}</p>
<button onClick={() => setCount(count + 1)}>Update Template</button>
{children}
</main>
)
}
5. `loading.js` fails
`loading.js` (vai `loading.jsx`, `loading.ts`, `loading.tsx`) fails ļauj jums izveidot ielādes lietotāja saskarni, kas tiek parādīta, kamēr maršruta segments tiek ielādēts. Tas ir noderīgi, lai nodrošinātu labāku lietotāja pieredzi, ielādējot datus vai veicot citas asinhronas darbības.
Piemērs:
// app/about/loading.js
import React from 'react';
export default function Loading() {
return <p>Notiek informācijas ielāde...</p>;
}
Kad lietotājs pāries uz `/about`, `Loading` komponents tiks parādīts, līdz `page.js` komponents būs pilnībā renderēts.
6. `error.js` fails
`error.js` (vai `error.jsx`, `error.ts`, `error.tsx`) fails ļauj jums izveidot pielāgotu kļūdas lietotāja saskarni, kas tiek parādīta, kad maršruta segmentā rodas kļūda. Tas ir noderīgi, lai nodrošinātu lietotājam draudzīgāku kļūdas ziņojumu un novērstu visas lietotnes avāriju.
Piemērs:
// app/about/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>Radās kļūda!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Mēģināt vēlreiz</button>
</div>
);
}
Ja, renderējot `/about` lapu, rodas kļūda, tiks parādīts `Error` komponents. `error` rekvizīts satur informāciju par kļūdu, un `reset` funkcija ļauj lietotājam mēģināt atkārtoti ielādēt lapu.
7. Maršrutu grupas
Maršrutu grupas `(groupName)` ļauj jums organizēt savus maršrutus, neietekmējot URL struktūru. Tās tiek izveidotas, ietverot mapes nosaukumu iekavās. Tas ir īpaši noderīgi, lai organizētu izkārtojumus un koplietojamās komponentes.
Piemērs:
app/
(marketing)/
about/
page.js
contact/
page.js
(shop)/
products/
page.js
Šajā piemērā `about` un `contact` lapas ir sagrupētas zem `marketing` grupas, un `products` lapa ir zem `shop` grupas. URL paliek attiecīgi `/about`, `/contact` un `/products`.
8. Dinamiskie maršruti
Dinamiskie maršruti ļauj jums izveidot maršrutus ar mainīgiem segmentiem. Tas ir noderīgi, lai attēlotu saturu, pamatojoties uz datiem, kas iegūti no datu bāzes vai API. Dinamiskie maršruta segmenti tiek definēti, ietverot segmenta nosaukumu kvadrātiekavās (piemēram, `[id]`).
Piemērs:
Pieņemsim, ka vēlaties izveidot maršrutu, lai parādītu atsevišķus bloga ierakstus, pamatojoties uz to ID. Jūs varat izveidot šādu failu struktūru:
app/
blog/
[id]/
page.js
`[id]` segments ir dinamisks segments. Komponents, kas eksportēts no `app/blog/[id]/page.js`, tiks renderēts, kad lietotājs pāries uz URL, piemēram, `/blog/123` vai `/blog/456`. `id` parametra vērtība būs pieejama komponentes `params` rekvizītā.
// app/blog/[id]/page.js
import React from 'react';
export default async function BlogPost({ params }) {
const { id } = params;
// Fetch data for the blog post with the given ID
const post = await fetchBlogPost(id);
if (!post) {
return <p>Bloga ieraksts nav atrasts.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Simulate fetching data from a database or API
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Mans pirmais bloga ieraksts', content: 'Šis ir mana pirmā bloga ieraksta saturs.' },
'456': { title: 'Vēl viens bloga ieraksts', content: 'Šis ir vēl kāds aizraujošs saturs.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Jūs varat arī izmantot vairākus dinamiskos segmentus vienā maršrutā. Piemēram, jums varētu būt maršruts, piemēram, `/blog/[category]/[id]`.
9. Visaptverošie (Catch-all) segmenti
Visaptverošie segmenti ļauj jums izveidot maršrutus, kas atbilst jebkuram segmentu skaitam. Tas ir noderīgi scenārijos, piemēram, veidojot CMS, kur URL struktūru nosaka lietotājs. Visaptverošie segmenti tiek definēti, pievienojot trīs punktus pirms segmenta nosaukuma (piemēram, `[...slug]`).
Piemērs:
app/
docs/
[...slug]/
page.js
`[...slug]` segments atbildīs jebkuram segmentu skaitam pēc `/docs`. Piemēram, tas atbildīs `/docs/getting-started`, `/docs/api/users` un `/docs/advanced/configuration`. `slug` parametra vērtība būs masīvs, kas satur atbilstošos segmentus.
// app/docs/[...slug]/page.js
import React from 'react';
export default function DocsPage({ params }) {
const { slug } = params;
return (
<div>
<h1>Dokumentācija</h1>
<p>Fragments: {slug ? slug.join('/') : 'Nav fragmenta'}</p>
</div>
);
}
Neobligātos visaptverošos segmentus var izveidot, ieliekot segmenta nosaukumu dubultās kvadrātiekavās `[[...slug]]`. Tas padara maršruta segmentu neobligātu. Piemērs:
app/
blog/
[[...slug]]/
page.js
Šis iestatījums renderēs `page.js` komponenti gan `/blog`, gan `/blog/any/number/of/segments`.
10. Paralēlie maršruti
Paralēlie maršruti ļauj vienlaicīgi renderēt vienu vai vairākas lapas tajā pašā izkārtojumā. Tas ir īpaši noderīgi sarežģītiem izkārtojumiem, piemēram, vadības paneļiem, kur dažādas lapas sadaļas var ielādēt neatkarīgi. Paralēlie maršruti tiek definēti, izmantojot `@` simbolu, kam seko slota nosaukums (piemēram, `@sidebar`, `@main`).
Piemērs:
app/
@sidebar/
page.js // Content for the sidebar
@main/
page.js // Content for the main section
default.js // Required: Defines the default layout for parallel routes
`default.js` fails ir obligāts, izmantojot paralēlos maršrutus. Tas nosaka, kā dažādi sloti tiek apvienoti, lai izveidotu gala izkārtojumu.
// 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. Pārtverošie maršruti
Pārtverošie maršruti ļauj ielādēt maršrutu no citas jūsu lietotnes daļas pašreizējā izkārtojumā. Tas ir noderīgi, lai izveidotu modālos logus, attēlu galerijas un citus UI elementus, kuriem jāparādās virs esošā lapas satura. Pārtverošie maršruti tiek definēti, izmantojot `(..)` sintaksi, kas norāda, cik līmeņus uz augšu direktoriju kokā jāiet, lai atrastu pārtverto maršrutu.
Piemērs:
app/
(.)photos/
[id]/
page.js // The intercepted route
feed/
page.js // The page where the photo modal is displayed
Šajā piemērā, kad lietotājs noklikšķina uz fotoattēla `/feed` lapā, `app/(.)photos/[id]/page.js` maršruts tiek pārtverts un parādīts kā modālais logs virs `/feed` lapas. `(.)` sintakse norāda Next.js meklēt vienu līmeni augstāk (uz `app` direktoriju), lai atrastu `photos/[id]` maršrutu.
Datu ielāde ar App Router
App Router nodrošina iebūvētu atbalstu datu ielādei, izmantojot servera komponentes un klienta komponentes. Servera komponentes tiek renderētas serverī, savukārt klienta komponentes tiek renderētas klientā. Tas ļauj jums izvēlēties labāko pieeju katrai komponentei, pamatojoties uz tās prasībām.
Servera komponentes
Servera komponentes ir noklusējuma izvēle App Router. Tās ļauj jums ielādēt datus tieši savās komponentēs bez nepieciešamības pēc atsevišķiem API maršrutiem. Tas var uzlabot veiktspēju un vienkāršot jūsu kodu.
Piemērs:
// app/products/page.js
import React from 'react';
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<div>
<h1>Produkti</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Simulate fetching data from a database or API
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'Produkts A' },
{ id: 2, name: 'Produkts B' },
{ id: 3, name: 'Produkts C' },
];
resolve(products);
}, 500);
});
}
Šajā piemērā `fetchProducts` funkcija tiek izsaukta tieši `ProductsPage` komponentē. Komponente tiek renderēta serverī, un dati tiek ielādēti, pirms HTML tiek nosūtīts klientam.
Klienta komponentes
Klienta komponentes tiek renderētas klientā un ļauj izmantot klienta puses funkcijas, piemēram, notikumu klausītājus, stāvokli un pārlūkprogrammas API. Lai izmantotu klienta komponenti, faila augšpusē jāpievieno direktīva `'use client'`.
Piemērs:
// app/counter/page.js
'use client'
import React, { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Skaitītājs</h1>
<p>Skaits: {count}</p>
<button onClick={() => setCount(count + 1)}>Palielināt</button>
</div>
);
}
Šajā piemērā `CounterPage` komponente ir klienta komponente, jo tā izmanto `useState` āķi. Direktīva `'use client'` norāda Next.js renderēt šo komponenti klientā.
Padziļinātas maršrutēšanas tehnikas
App Router piedāvā vairākas padziļinātas maršrutēšanas tehnikas, kuras var izmantot, lai izveidotu sarežģītas un izsmalcinātas lietotnes.
1. Maršrutu apstrādātāji (Route Handlers)
Maršrutu apstrādātāji ļauj jums izveidot API galapunktus `app` direktorijā. Tas novērš nepieciešamību pēc atsevišķas `pages/api` direktorijas. Maršrutu apstrādātāji tiek definēti failos ar nosaukumu `route.js` (vai `route.ts`) un eksportē funkcijas, kas apstrādā dažādas HTTP metodes (piemēram, `GET`, `POST`, `PUT`, `DELETE`).
Piemērs:
// app/api/users/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Simulate fetching users from a database
const users = [
{ id: 1, name: 'Jānis Bērziņš' },
{ id: 2, name: 'Anna Liepiņa' },
];
return NextResponse.json(users);
}
export async function POST(request) {
const body = await request.json()
console.log('Received data:', body)
return NextResponse.json({ message: 'Lietotājs izveidots' }, { status: 201 })
}
Šis piemērs definē maršruta apstrādātāju `/api/users`, kas apstrādā gan `GET`, gan `POST` pieprasījumus. `GET` funkcija atgriež lietotāju sarakstu, un `POST` funkcija izveido jaunu lietotāju.
2. Maršrutu grupas ar vairākiem izkārtojumiem
Jūs varat apvienot maršrutu grupas ar izkārtojumiem, lai izveidotu dažādus izkārtojumus dažādām jūsu lietotnes sadaļām. Tas ir noderīgi scenārijos, kur vēlaties, lai dažādām vietnes daļām būtu atšķirīga galvene vai sānjosla.
Piemērs:
app/
(marketing)/
layout.js // Marketinga izkārtojums
about/
page.js
contact/
page.js
(admin)/
layout.js // Administratora izkārtojums
dashboard/
page.js
Šajā piemērā `about` un `contact` lapas izmantos `marketing` izkārtojumu, savukārt `dashboard` lapa izmantos `admin` izkārtojumu.
3. Starpprogrammatūra (Middleware)
Starpprogrammatūra ļauj palaist kodu pirms pieprasījuma apstrādes jūsu lietotnē. Tas ir noderīgi tādiem uzdevumiem kā autentifikācija, autorizācija, žurnalēšana un lietotāju pāradresēšana, pamatojoties uz viņu atrašanās vietu vai ierīci.
Starpprogrammatūra tiek definēta failā ar nosaukumu `middleware.js` (vai `middleware.ts`) jūsu projekta saknē.
Piemērs:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Check if the user is authenticated
const isAuthenticated = false; // Replace with your authentication logic
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/admin/:path*',
}
Šis piemērs definē starpprogrammatūru, kas pārbauda, vai lietotājs ir autentificējies, pirms ļauj piekļūt jebkuram maršrutam zem `/admin`. Ja lietotājs nav autentificējies, viņš tiek pāradresēts uz `/login` lapu.
Labākās prakses failu bāzes maršrutēšanā
Lai maksimāli izmantotu App Router failu bāzes maršrutēšanas sistēmu, apsveriet šādas labākās prakses:
- Uzturiet savu failu struktūru organizētu: Izmantojiet jēgpilnus mapju nosaukumus un grupējiet saistītos failus kopā.
- Izmantojiet izkārtojumus koplietotai UI: Izveidojiet izkārtojumus galvenēm, kājenēm, sānjoslām un citiem elementiem, kas tiek koplietoti vairākās lapās.
- Izmantojiet ielādes UI: Nodrošiniet ielādes UI maršrutiem, kas ielādē datus vai veic citas asinhronas darbības.
- Apstrādājiet kļūdas eleganti: Izveidojiet pielāgotus kļūdu UI, lai nodrošinātu labāku lietotāja pieredzi, kad rodas kļūdas.
- Izmantojiet maršrutu grupas organizācijai: Izmantojiet maršrutu grupas, lai organizētu savus maršrutus, neietekmējot URL struktūru.
- Izmantojiet servera komponentes veiktspējai: Izmantojiet servera komponentes, lai ielādētu datus un renderētu UI serverī, uzlabojot veiktspēju un SEO.
- Izmantojiet klienta komponentes, kad nepieciešams: Izmantojiet klienta komponentes, kad nepieciešams izmantot klienta puses funkcijas, piemēram, notikumu klausītājus, stāvokli un pārlūkprogrammas API.
Internacionalizācijas piemēri ar Next.js App Router
Next.js App Router vienkāršo internacionalizāciju (i18n), izmantojot failu bāzes maršrutēšanu. Lūk, kā jūs varat efektīvi ieviest i18n:
1. Apakšceļu (Sub-path) maršrutēšana
Organizējiet savus maršrutus, pamatojoties uz lokalizāciju, izmantojot apakšceļus. Piemēram:
app/
[locale]/
page.tsx // Mājas lapa lokalizācijai
about/
page.tsx // Par mums lapa lokalizācijai
// app/[locale]/page.tsx
import { getTranslations } from './dictionaries';
export default async function HomePage({ params: { locale } }) {
const t = await getTranslations(locale);
return (<h1>{t.home.title}</h1>);
}
// dictionaries.js
const dictionaries = {
en: () => import('./dictionaries/en.json').then((module) => module.default),
es: () => import('./dictionaries/es.json').then((module) => module.default),
};
export const getTranslations = async (locale) => {
try {
return dictionaries[locale]() ?? dictionaries.en();
} catch (error) {
console.error(`Failed to load translations for locale ${locale}`, error);
return dictionaries.en();
}
};
Šajā iestatījumā `[locale]` dinamiskais maršruta segments apstrādā dažādas lokalizācijas (piemēram, `/en`, `/es`). Tulkojumi tiek ielādēti dinamiski, pamatojoties uz lokalizāciju.
2. Domēna maršrutēšana
Lai izmantotu progresīvāku pieeju, katrai lokalizācijai varat izmantot dažādus domēnus vai apakšdomēnus. Tas bieži ietver papildu konfigurāciju ar jūsu mitināšanas pakalpojumu sniedzēju.
3. Starpprogrammatūra lokalizācijas noteikšanai
Izmantojiet starpprogrammatūru, lai automātiski noteiktu lietotāja vēlamo lokalizāciju un attiecīgi viņu pāradresētu.
// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';
let locales = ['en', 'es', 'fr'];
function getLocale(request) {
const negotiatorHeaders = {};
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
let languages = new Negotiator({ headers: negotiatorHeaders }).languages();
try {
return match(languages, locales, 'en'); // Use "en" as the default locale
} catch (error) {
console.error("Error matching locale:", error);
return 'en'; // Fallback to English if matching fails
}
}
export function middleware(request) {
const pathname = request.nextUrl.pathname;
const pathnameIsMissingLocale = locales.every(
(locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
);
if (pathnameIsMissingLocale) {
const locale = getLocale(request);
return NextResponse.redirect(
new URL(
`/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
request.url
)
);
}
}
export const config = {
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
};
Šī starpprogrammatūra pārbauda, vai pieprasītajam ceļam ir lokalizācijas prefikss. Ja nav, tā nosaka lietotāja vēlamo lokalizāciju, izmantojot `Accept-Language` galveni, un pāradresē viņu uz atbilstošo lokalizācijai specifisko ceļu. Bibliotēkas, piemēram, `@formatjs/intl-localematcher` un `negotiator`, tiek izmantotas, lai apstrādātu lokalizācijas saskaņošanu.
Next.js App Router un globālā pieejamība
Globāli pieejamu tīmekļa lietotņu izveide prasa rūpīgu pieejamības (a11y) principu apsvēršanu. Next.js App Router nodrošina stabilu pamatu pieejamu pieredžu veidošanai, bet ir būtiski ieviest labākās prakses, lai nodrošinātu, ka jūsu lietotne ir lietojama visiem, neatkarīgi no viņu spējām.
Galvenie pieejamības apsvērumi
- Semantiskais HTML: Izmantojiet semantiskos HTML elementus (piemēram, `<article>`, `<nav>`, `<aside>`, `<main>`), lai strukturētu savu saturu. Tas piešķir nozīmi palīgtehnoloģijām un palīdz lietotājiem vieglāk orientēties jūsu vietnē.
- ARIA atribūti: Izmantojiet ARIA (Accessible Rich Internet Applications) atribūtus, lai uzlabotu pielāgotu komponenšu un logrīku pieejamību. ARIA atribūti sniedz papildu informāciju par elementu lomu, stāvokli un īpašībām palīgtehnoloģijām.
- Navigācija ar tastatūru: Nodrošiniet, ka visi interaktīvie elementi ir pieejami, izmantojot tastatūru. Lietotājiem jāspēj pārvietoties pa jūsu lietotni, izmantojot `Tab` taustiņu, un mijiedarboties ar elementiem, izmantojot `Enter` vai `Space` taustiņu.
- Krāsu kontrasts: Izmantojiet pietiekamu krāsu kontrastu starp tekstu un fonu, lai nodrošinātu lasāmību lietotājiem ar redzes traucējumiem. Tīmekļa satura pieejamības vadlīnijas (WCAG) iesaka kontrasta attiecību vismaz 4.5:1 parastam tekstam un 3:1 lielam tekstam.
- Attēlu Alt teksts: Nodrošiniet aprakstošu alt tekstu visiem attēliem. Alt teksts nodrošina teksta alternatīvu attēliem, ko var nolasīt ekrāna lasītāji.
- Formu iezīmes: Saistiet formu iezīmes ar to atbilstošajiem ievades laukiem, izmantojot `<label>` elementu. Tas lietotājiem skaidri parāda, kāda informācija ir sagaidāma katrā laukā.
- Testēšana ar ekrāna lasītāju: Testējiet savu lietotni ar ekrāna lasītāju, lai nodrošinātu, ka tā ir pieejama lietotājiem ar redzes traucējumiem. Populāri ekrāna lasītāji ir NVDA, JAWS un VoiceOver.
Pieejamības ieviešana Next.js App Router
- Izmantojiet Next.js Link komponenti: Izmantojiet `<Link>` komponenti navigācijai. Tā nodrošina iebūvētas pieejamības funkcijas, piemēram, iepriekšēju ielādi un fokusa pārvaldību.
- Fokusa pārvaldība: Pārvietojoties starp lapām vai atverot modālos logus, nodrošiniet, ka fokuss tiek pareizi pārvaldīts. Fokusam jābūt iestatītam uz loģiskāko elementu jaunajā lapā vai modālajā logā.
- Pieejamas pielāgotas komponentes: Veidojot pielāgotas komponentes, nodrošiniet, ka tās ir pieejamas, ievērojot iepriekš minētos principus. Izmantojiet semantisko HTML, ARIA atribūtus un navigāciju ar tastatūru, lai padarītu savas komponentes lietojamas visiem.
- Lintēšana un testēšana: Izmantojiet lintēšanas rīkus, piemēram, ESLint ar pieejamības spraudņiem, lai identificētu potenciālās pieejamības problēmas savā kodā. Tāpat izmantojiet automatizētus testēšanas rīkus, lai pārbaudītu savu lietotni attiecībā uz pieejamības pārkāpumiem.
Noslēgums
Next.js App Router failu bāzes maršrutēšanas sistēma piedāvā jaudīgu un intuitīvu veidu, kā strukturēt un navigēt jūsu lietotnēs. Izprotot šajā ceļvedī izklāstītās pamatkoncepcijas un labākās prakses, jūs varat veidot robustas, mērogojamas un uzturējamas Next.js lietotnes. Eksperimentējiet ar dažādām App Router funkcijām un atklājiet, kā tas var vienkāršot jūsu izstrādes darbplūsmu un uzlabot lietotāja pieredzi.