Otključajte snagu Next.js App Routera s našim detaljnim vodičem za usmjeravanje temeljeno na datotekama. Naučite kako strukturirati aplikaciju, kreirati dinamičke rute, upravljati layoutima i više.
Next.js App Router: Sveobuhvatan vodič za usmjeravanje temeljeno na datotekama
Next.js App Router, predstavljen u Next.js 13 i postavljen kao standard u kasnijim verzijama, revolucionizira način na koji strukturiramo i navigiramo aplikacijama. Uvodi moćan i intuitivan sustav usmjeravanja temeljen na datotekama koji pojednostavljuje razvoj, poboljšava performanse i unapređuje cjelokupno iskustvo developera. Ovaj sveobuhvatni vodič duboko će zaroniti u usmjeravanje temeljeno na datotekama App Routera, pružajući vam znanje i vještine za izgradnju robusnih i skalabilnih Next.js aplikacija.
Što je usmjeravanje temeljeno na datotekama?
Usmjeravanje temeljeno na datotekama je sustav usmjeravanja gdje je struktura ruta vaše aplikacije izravno određena organizacijom vaših datoteka i direktorija. U Next.js App Routeru, rute definirate stvaranjem datoteka unutar `app` direktorija. Svaka mapa predstavlja segment rute, a posebne datoteke unutar tih mapa definiraju kako će se taj segment rute obraditi. Ovaj pristup nudi nekoliko prednosti:
- Intuitivna struktura: Datotečni sustav odražava strukturu ruta aplikacije, što ga čini lakim za razumijevanje i navigaciju.
- Automatsko usmjeravanje: Next.js automatski generira rute na temelju vaše datotečne strukture, eliminirajući potrebu za ručnom konfiguracijom.
- Kolokacija koda: Rukovatelji rutama i UI komponente nalaze se zajedno, poboljšavajući organizaciju koda i održivost.
- Ugrađene značajke: App Router pruža ugrađenu podršku za layoute, dinamičke rute, dohvaćanje podataka i više, pojednostavljujući složene scenarije usmjeravanja.
Početak rada s App Routerom
Da biste koristili App Router, morate stvoriti novi Next.js projekt ili migrirati postojeći. Provjerite koristite li Next.js verziju 13 ili noviju.
Stvaranje novog projekta:
Možete stvoriti novi Next.js projekt s App Routerom koristeći sljedeću naredbu:
npx create-next-app@latest my-app --example with-app
Migracija postojećeg projekta:
Za migraciju postojećeg projekta, morate premjestiti svoje stranice iz `pages` direktorija u `app` direktorij. Možda ćete morati prilagoditi svoju logiku usmjeravanja. Next.js pruža vodič za migraciju koji će vam pomoći u ovom procesu.
Osnovni koncepti usmjeravanja temeljenog na datotekama
App Router uvodi nekoliko posebnih datoteka i konvencija koje definiraju kako se vaše rute obrađuju:
1. Direktorij `app`
Direktorij `app` je korijen ruta vaše aplikacije. Sve datoteke i mape unutar ovog direktorija koristit će se za generiranje ruta. Sve izvan `app` direktorija (poput `pages` direktorija ako migrirate) bit će ignorirano od strane App Routera.
2. Datoteka `page.js`
Datoteka `page.js` (ili `page.jsx`, `page.ts`, `page.tsx`) je najosnovniji dio App Routera. Ona definira UI komponentu koja će se iscrtati za određeni segment rute. To je obavezna datoteka za svaki segment rute kojem želite izravno pristupiti.
Primjer:
Ako imate strukturu datoteka poput ove:
app/
about/
page.js
Komponenta izvezena iz `app/about/page.js` će se iscrtati kada korisnik dođe na `/about`.
// app/about/page.js
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>O nama</h1>
<p>Saznajte više o našoj tvrtki.</p>
</div>
);
}
3. Datoteka `layout.js`
Datoteka `layout.js` (ili `layout.jsx`, `layout.ts`, `layout.tsx`) definira korisničko sučelje (UI) koje se dijeli na više stranica unutar segmenta rute. Layouti su korisni za stvaranje dosljednih zaglavlja, podnožja, bočnih traka i drugih elemenata koji bi trebali biti prisutni na više stranica.
Primjer:
Recimo da želite dodati zaglavlje i na stranicu `/about` i na hipotetsku stranicu `/about/team`. Možete stvoriti `layout.js` datoteku u `app/about` direktoriju:
// app/about/layout.js
import React from 'react';
export default function AboutLayout({ children }) {
return (
<div>
<header>
<h1>O našoj tvrtki</h1>
</header>
<main>{children}</main>
</div>
);
}
Svojstvo `children` bit će zamijenjeno korisničkim sučeljem koje iscrtava datoteka `page.js` u istom direktoriju ili u bilo kojem ugniježđenom direktoriju.
4. Datoteka `template.js`
Datoteka `template.js` slična je datoteci `layout.js`, ali stvara novu instancu komponente za svaku podređenu rutu. To je korisno za scenarije u kojima želite održati stanje komponente ili spriječiti ponovno iscrtavanje prilikom navigacije između podređenih ruta. Za razliku od layouta, predlošci će se ponovno iscrtati pri navigaciji. Korištenje predložaka odlično je za animiranje elemenata pri navigaciji.
Primjer:
// app/template.js
'use client'
import { useState } from 'react'
export default function Template({ children }) {
const [count, setCount] = useState(0)
return (
<main>
<p>Predložak: {count}</p>
<button onClick={() => setCount(count + 1)}>Ažuriraj predložak</button>
{children}
</main>
)
}
5. Datoteka `loading.js`
Datoteka `loading.js` (ili `loading.jsx`, `loading.ts`, `loading.tsx`) omogućuje vam stvaranje sučelja za učitavanje koje se prikazuje dok se segment rute učitava. To je korisno za pružanje boljeg korisničkog iskustva prilikom dohvaćanja podataka ili obavljanja drugih asinkronih operacija.
Primjer:
// app/about/loading.js
import React from 'react';
export default function Loading() {
return <p>Učitavanje informacija o nama...</p>;
}
Kada korisnik dođe na `/about`, komponenta `Loading` će se prikazivati sve dok se komponenta `page.js` u potpunosti ne iscrta.
6. Datoteka `error.js`
Datoteka `error.js` (ili `error.jsx`, `error.ts`, `error.tsx`) omogućuje vam stvaranje prilagođenog sučelja za pogreške koje se prikazuje kada dođe do pogreške unutar segmenta rute. To je korisno za pružanje korisnički prihvatljivije poruke o pogrešci i sprječavanje rušenja cijele aplikacije.
Primjer:
// app/about/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>Dogodila se pogreška!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Pokušaj ponovno</button>
</div>
);
}
Ako dođe do pogreške prilikom iscrtavanja stranice `/about`, prikazat će se komponenta `Error`. Svojstvo `error` sadrži informacije o pogrešci, a funkcija `reset` omogućuje korisniku da pokuša ponovno učitati stranicu.
7. Grupe ruta
Grupe ruta `(nazivGrupe)` omogućuju vam organiziranje ruta bez utjecaja na strukturu URL-a. Stvaraju se omatanjem naziva mape u zagrade. To je posebno korisno za organiziranje layouta i dijeljenih komponenata.
Primjer:
app/
(marketing)/
about/
page.js
contact/
page.js
(shop)/
products/
page.js
U ovom primjeru, stranice `about` i `contact` grupirane su pod `marketing` grupom, a stranica `products` je pod `shop` grupom. URL-ovi ostaju `/about`, `/contact` i `/products`.
8. Dinamičke rute
Dinamičke rute omogućuju vam stvaranje ruta s promjenjivim segmentima. To je korisno za prikazivanje sadržaja na temelju podataka dohvaćenih iz baze podataka ili API-ja. Dinamički segmenti rute definiraju se omatanjem naziva segmenta u uglate zagrade (npr. `[id]`).
Primjer:
Recimo da želite stvoriti rutu za prikaz pojedinačnih blog postova na temelju njihovog ID-a. Možete stvoriti strukturu datoteka poput ove:
app/
blog/
[id]/
page.js
Segment `[id]` je dinamički segment. Komponenta izvezena iz `app/blog/[id]/page.js` će se iscrtati kada korisnik dođe na URL poput `/blog/123` ili `/blog/456`. Vrijednost `id` parametra bit će dostupna u `params` svojstvu komponente.
// app/blog/[id]/page.js
import React from 'react';
export default async function BlogPost({ params }) {
const { id } = params;
// Dohvati podatke za blog post s danim ID-jem
const post = await fetchBlogPost(id);
if (!post) {
return <p>Blog post nije pronađen.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Simulacija dohvaćanja podataka iz baze podataka ili API-ja
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Moj prvi blog post', content: 'Ovo je sadržaj mog prvog blog posta.' },
'456': { title: 'Još jedan blog post', content: 'Ovo je još malo uzbudljivog sadržaja.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Također možete koristiti više dinamičkih segmenata u jednoj ruti. Na primjer, mogli biste imati rutu poput `/blog/[category]/[id]`.
9. "Catch-all" segmenti
"Catch-all" segmenti omogućuju vam stvaranje ruta koje odgovaraju bilo kojem broju segmenata. To je korisno za scenarije poput stvaranja CMS-a gdje je struktura URL-a određena od strane korisnika. "Catch-all" segmenti definiraju se dodavanjem tri točke ispred naziva segmenta (npr. `[...slug]`).
Primjer:
app/
docs/
[...slug]/
page.js
Segment `[...slug]` će odgovarati bilo kojem broju segmenata nakon `/docs`. Na primjer, odgovarat će `/docs/getting-started`, `/docs/api/users` i `/docs/advanced/configuration`. Vrijednost `slug` parametra bit će niz koji sadrži podudarne segmente.
// 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('/') : 'Nema sluga'}</p>
</div>
);
}
Opcionalni "catch-all" segmenti mogu se stvoriti dodavanjem naziva segmenta u dvostruke uglate zagrade `[[...slug]]`. To čini segment rute opcionalnim. Primjer:
app/
blog/
[[...slug]]/
page.js
Ova postavka će iscrtati `page.js` komponentu i na `/blog` i na `/blog/any/number/of/segments`.
10. Paralelne rute
Paralelne rute omogućuju vam istovremeno iscrtavanje jedne ili više stranica u istom layoutu. To je posebno korisno za složene layoute, kao što su nadzorne ploče, gdje se različiti dijelovi stranice mogu učitavati neovisno. Paralelne rute definiraju se pomoću simbola `@` iza kojeg slijedi naziv utora (npr. `@sidebar`, `@main`).
Primjer:
app/
@sidebar/
page.js // Sadržaj za bočnu traku
@main/
page.js // Sadržaj za glavni dio
default.js // Obavezno: Definira zadani layout za paralelne rute
Datoteka `default.js` je obavezna kada koristite paralelne rute. Ona definira kako se različiti utori kombiniraju kako bi se stvorio konačni layout.
// 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. Presretanje ruta
Presretanje ruta omogućuje vam učitavanje rute iz drugog dijela vaše aplikacije unutar trenutnog layouta. To je korisno za stvaranje modala, galerija slika i drugih UI elemenata koji bi se trebali pojaviti iznad postojećeg sadržaja stranice. Presretanje ruta definira se pomoću sintakse `(..)`, koja označava koliko razina prema gore u stablu direktorija treba ići kako bi se pronašla presretnuta ruta.
Primjer:
app/
(.)photos/
[id]/
page.js // Presretnuta ruta
feed/
page.js // Stranica na kojoj se prikazuje modal s fotografijom
U ovom primjeru, kada korisnik klikne na fotografiju na stranici `/feed`, ruta `app/(.)photos/[id]/page.js` se presreće i prikazuje kao modal iznad stranice `/feed`. Sintaksa `(.)` govori Next.js-u da pogleda jednu razinu gore (u `app` direktorij) kako bi pronašao rutu `photos/[id]`.
Dohvaćanje podataka s App Routerom
App Router pruža ugrađenu podršku za dohvaćanje podataka koristeći poslužiteljske komponente (Server Components) i klijentske komponente (Client Components). Poslužiteljske komponente iscrtavaju se na poslužitelju, dok se klijentske komponente iscrtavaju na klijentu. To vam omogućuje da odaberete najbolji pristup za svaku komponentu na temelju njenih zahtjeva.
Poslužiteljske komponente
Poslužiteljske komponente su zadane u App Routeru. Omogućuju vam dohvaćanje podataka izravno u vašim komponentama bez potrebe za odvojenim API rutama. To može poboljšati performanse i pojednostaviti vaš kod.
Primjer:
// app/products/page.js
import React from 'react';
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<div>
<h1>Proizvodi</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Simulacija dohvaćanja podataka iz baze podataka ili API-ja
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'Proizvod A' },
{ id: 2, name: 'Proizvod B' },
{ id: 3, name: 'Proizvod C' },
];
resolve(products);
}, 500);
});
}
U ovom primjeru, funkcija `fetchProducts` se poziva izravno unutar komponente `ProductsPage`. Komponenta se iscrtava na poslužitelju, a podaci se dohvaćaju prije nego što se HTML pošalje klijentu.
Klijentske komponente
Klijentske komponente se iscrtavaju na klijentu i omogućuju vam korištenje klijentskih značajki kao što su osluškivači događaja (event listeners), stanje (state) i API-ji preglednika. Da biste koristili klijentsku komponentu, morate dodati direktivu `'use client'` na vrh datoteke.
Primjer:
// app/counter/page.js
'use client'
import React, { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Brojač</h1>
<p>Vrijednost: {count}</p>
<button onClick={() => setCount(count + 1)}>Povećaj</button>
</div>
);
}
U ovom primjeru, komponenta `CounterPage` je klijentska komponenta jer koristi `useState` hook. Direktiva `'use client'` govori Next.js-u da iscrta ovu komponentu na klijentu.
Napredne tehnike usmjeravanja
App Router nudi nekoliko naprednih tehnika usmjeravanja koje se mogu koristiti za stvaranje složenih i sofisticiranih aplikacija.
1. Rukovatelji rutama (Route Handlers)
Rukovatelji rutama omogućuju vam stvaranje API krajnjih točaka (endpoints) unutar vašeg `app` direktorija. To eliminira potrebu za zasebnim `pages/api` direktorijem. Rukovatelji rutama definiraju se u datotekama nazvanim `route.js` (ili `route.ts`) i izvoze funkcije koje obrađuju različite HTTP metode (npr. `GET`, `POST`, `PUT`, `DELETE`).
Primjer:
// app/api/users/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Simulacija dohvaćanja korisnika iz baze podataka
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
return NextResponse.json(users);
}
export async function POST(request) {
const body = await request.json()
console.log('Primljeni podaci:', body)
return NextResponse.json({ message: 'Korisnik stvoren' }, { status: 201 })
}
Ovaj primjer definira rukovatelja rutom na `/api/users` koji obrađuje i `GET` i `POST` zahtjeve. `GET` funkcija vraća popis korisnika, a `POST` funkcija stvara novog korisnika.
2. Grupe ruta s više layouta
Možete kombinirati grupe ruta s layoutima kako biste stvorili različite layoute za različite dijelove vaše aplikacije. To je korisno za scenarije gdje želite imati različito zaglavlje ili bočnu traku za različite dijelove vaše stranice.
Primjer:
app/
(marketing)/
layout.js // Marketing layout
about/
page.js
contact/
page.js
(admin)/
layout.js // Admin layout
dashboard/
page.js
U ovom primjeru, stranice `about` i `contact` će koristiti `marketing` layout, dok će stranica `dashboard` koristiti `admin` layout.
3. Middleware
Middleware vam omogućuje pokretanje koda prije nego što vašu aplikaciju obradi zahtjev. To je korisno za zadatke kao što su autentifikacija, autorizacija, logiranje i preusmjeravanje korisnika na temelju njihove lokacije ili uređaja.
Middleware se definira u datoteci nazvanoj `middleware.js` (ili `middleware.ts`) u korijenu vašeg projekta.
Primjer:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Provjeri je li korisnik autentificiran
const isAuthenticated = false; // Zamijenite svojom logikom autentifikacije
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// Pogledajte "Podudaranje staza" u nastavku kako biste saznali više
export const config = {
matcher: '/admin/:path*',
}
Ovaj primjer definira middleware koji provjerava je li korisnik autentificiran prije nego što mu dopusti pristup bilo kojoj ruti pod `/admin`. Ako korisnik nije autentificiran, preusmjerava se na stranicu `/login`.
Najbolje prakse za usmjeravanje temeljeno na datotekama
Da biste maksimalno iskoristili sustav usmjeravanja temeljen na datotekama App Routera, razmotrite sljedeće najbolje prakse:
- Održavajte organiziranu strukturu datoteka: Koristite smislene nazive mapa i grupirajte povezane datoteke zajedno.
- Koristite layoute za dijeljeno korisničko sučelje: Stvorite layoute za zaglavlja, podnožja, bočne trake i druge elemente koji se dijele na više stranica.
- Koristite sučelja za učitavanje: Pružite sučelja za učitavanje za rute koje dohvaćaju podatke ili obavljaju druge asinkrone operacije.
- Elegantno rukujte pogreškama: Stvorite prilagođena sučelja za pogreške kako biste pružili bolje korisničko iskustvo kada dođe do pogrešaka.
- Koristite grupe ruta za organizaciju: Koristite grupe ruta za organiziranje ruta bez utjecaja na strukturu URL-a.
- Iskoristite poslužiteljske komponente za performanse: Koristite poslužiteljske komponente za dohvaćanje podataka i iscrtavanje korisničkog sučelja na poslužitelju, poboljšavajući performanse i SEO.
- Koristite klijentske komponente kada je to potrebno: Koristite klijentske komponente kada trebate koristiti klijentske značajke poput osluškivača događaja, stanja i API-ja preglednika.
Primjeri internacionalizacije s Next.js App Routerom
Next.js App Router pojednostavljuje internacionalizaciju (i18n) kroz usmjeravanje temeljeno na datotekama. Evo kako možete učinkovito implementirati i18n:
1. Usmjeravanje putem pod-staza
Organizirajte svoje rute na temelju lokalizacije koristeći pod-staze. Na primjer:
app/
[locale]/
page.tsx // Početna stranica za lokalizaciju
about/
page.tsx // Stranica 'O nama' za lokalizaciju
// 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(`Nije uspjelo učitavanje prijevoda za lokalizaciju ${locale}`, error);
return dictionaries.en();
}
};
U ovoj postavi, dinamički segment rute `[locale]` obrađuje različite lokalizacije (npr. `/en`, `/es`). Prijevodi se učitavaju dinamički na temelju lokalizacije.
2. Usmjeravanje putem domena
Za napredniji pristup, možete koristiti različite domene ili poddomene za svaku lokalizaciju. To često uključuje dodatnu konfiguraciju kod vašeg pružatelja usluga hostinga.
3. Middleware za detekciju lokalizacije
Koristite middleware za automatsko otkrivanje preferirane lokalizacije korisnika i preusmjeravanje u skladu s tim.
// 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'); // Koristi "en" kao zadanu lokalizaciju
} catch (error) {
console.error("Pogreška pri podudaranju lokalizacije:", error);
return 'en'; // Vrati se na engleski ako podudaranje ne uspije
}
}
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).*)',
],
};
Ovaj middleware provjerava ima li tražena staza prefiks lokalizacije. Ako nema, otkriva preferiranu lokalizaciju korisnika pomoću zaglavlja `Accept-Language` i preusmjerava ga na odgovarajuću stazu specifičnu za lokalizaciju. Knjižnice poput `@formatjs/intl-localematcher` i `negotiator` koriste se za rukovanje pregovaranjem o lokalizaciji.
Next.js App Router i globalna pristupačnost
Stvaranje globalno dostupnih web aplikacija zahtijeva pažljivo razmatranje principa pristupačnosti (a11y). Next.js App Router pruža čvrst temelj za izgradnju pristupačnih iskustava, ali je ključno implementirati najbolje prakse kako bi vaša aplikacija bila upotrebljiva za sve, bez obzira na njihove sposobnosti.
Ključna razmatranja o pristupačnosti
- Semantički HTML: Koristite semantičke HTML elemente (npr. `<article>`, `<nav>`, `<aside>`, `<main>`) za strukturiranje vašeg sadržaja. To pruža značenje pomoćnim tehnologijama i pomaže korisnicima da lakše navigiraju vašom stranicom.
- ARIA atributi: Koristite ARIA (Accessible Rich Internet Applications) atribute za poboljšanje pristupačnosti prilagođenih komponenata i widgeta. ARIA atributi pružaju dodatne informacije o ulozi, stanju i svojstvima elemenata pomoćnim tehnologijama.
- Navigacija tipkovnicom: Osigurajte da su svi interaktivni elementi dostupni putem tipkovnice. Korisnici bi trebali moći navigirati kroz vašu aplikaciju pomoću tipke `Tab` i interagirati s elementima pomoću tipki `Enter` ili `Space`.
- Kontrast boja: Koristite dovoljan kontrast boja između teksta i pozadine kako biste osigurali čitljivost za korisnike s oštećenjem vida. Smjernice za pristupačnost web sadržaja (WCAG) preporučuju omjer kontrasta od najmanje 4.5:1 za normalan tekst i 3:1 za veliki tekst.
- Alternativni tekst za slike: Pružite opisni alternativni tekst (alt text) za sve slike. Alternativni tekst pruža tekstualnu alternativu za slike koju mogu pročitati čitači zaslona.
- Oznake obrazaca: Povežite oznake obrazaca s odgovarajućim poljima za unos pomoću elementa `<label>`. To korisnicima jasno pokazuje koje se informacije očekuju u svakom polju.
- Testiranje čitačem zaslona: Testirajte svoju aplikaciju čitačem zaslona kako biste osigurali da je pristupačna korisnicima s oštećenjem vida. Popularni čitači zaslona uključuju NVDA, JAWS i VoiceOver.
Implementacija pristupačnosti u Next.js App Routeru
- Koristite Next.js Link komponentu: Koristite komponentu `<Link>` za navigaciju. Ona pruža ugrađene značajke pristupačnosti, kao što su prefetching i upravljanje fokusom.
- Upravljanje fokusom: Prilikom navigacije između stranica ili otvaranja modala, osigurajte da se fokus pravilno upravlja. Fokus bi trebao biti postavljen na najlogičniji element na novoj stranici ili modalu.
- Pristupačne prilagođene komponente: Prilikom stvaranja prilagođenih komponenata, osigurajte da su pristupačne slijedeći gore navedene principe. Koristite semantički HTML, ARIA atribute i navigaciju tipkovnicom kako bi vaše komponente bile upotrebljive za sve.
- Linting i testiranje: Koristite alate za linting poput ESLint-a s dodacima za pristupačnost kako biste identificirali potencijalne probleme s pristupačnošću u vašem kodu. Također, koristite alate za automatsko testiranje kako biste testirali svoju aplikaciju na kršenja pristupačnosti.
Zaključak
Sustav usmjeravanja temeljen na datotekama Next.js App Routera nudi moćan i intuitivan način za strukturiranje i navigaciju vašim aplikacijama. Razumijevanjem osnovnih koncepata i najboljih praksi navedenih u ovom vodiču, možete izgraditi robusne, skalabilne i održive Next.js aplikacije. Eksperimentirajte s različitim značajkama App Routera i otkrijte kako on može pojednostaviti vaš tijek rada i poboljšati korisničko iskustvo.