Descoperiți puterea Next.js App Router cu ghidul nostru detaliat despre rutarea bazată pe fișiere. Învățați cum să vă structurați aplicația, să creați rute dinamice, să gestionați layout-uri și multe altele.
Next.js App Router: Un ghid complet pentru rutarea bazată pe fișiere
Next.js App Router, introdus în Next.js 13 și devenit standard în versiunile ulterioare, revoluționează modul în care structurăm și navigăm în aplicații. Acesta introduce un sistem de rutare puternic și intuitiv, bazat pe fișiere, care simplifică dezvoltarea, îmbunătățește performanța și sporește experiența generală a dezvoltatorului. Acest ghid cuprinzător va aprofunda rutarea bazată pe fișiere a App Router, oferindu-vă cunoștințele și abilitățile necesare pentru a construi aplicații Next.js robuste și scalabile.
Ce este rutarea bazată pe fișiere?
Rutarea bazată pe fișiere este un sistem de rutare în care structura rutelor aplicației dvs. este direct determinată de organizarea fișierelor și directoarelor. În Next.js App Router, definiți rutele prin crearea de fișiere în directorul `app`. Fiecare folder reprezintă un segment de rută, iar fișierele speciale din acele foldere definesc modul în care acel segment de rută va fi gestionat. Această abordare oferă mai multe avantaje:
- Structură intuitivă: Sistemul de fișiere reflectă structura de rute a aplicației, făcând-o ușor de înțeles și de navigat.
- Rutare automată: Next.js generează automat rutele pe baza structurii de fișiere, eliminând necesitatea configurării manuale.
- Colocarea codului: Handler-ele de rută și componentele UI sunt localizate împreună, îmbunătățind organizarea și mentenabilitatea codului.
- Funcționalități încorporate: App Router oferă suport încorporat pentru layout-uri, rute dinamice, preluarea datelor și multe altele, simplificând scenariile complexe de rutare.
Primii pași cu App Router
Pentru a utiliza App Router, trebuie să creați un nou proiect Next.js sau să migrați un proiect existent. Asigurați-vă că utilizați versiunea Next.js 13 sau o versiune ulterioară.
Crearea unui proiect nou:
Puteți crea un nou proiect Next.js cu App Router folosind următoarea comandă:
npx create-next-app@latest my-app --example with-app
Migrarea unui proiect existent:
Pentru a migra un proiect existent, trebuie să mutați paginile din directorul `pages` în directorul `app`. Este posibil să fie necesar să ajustați logica de rutare în consecință. Next.js oferă un ghid de migrare pentru a vă ajuta în acest proces.
Concepte de bază ale rutării bazate pe fișiere
App Router introduce mai multe fișiere și convenții speciale care definesc modul în care sunt gestionate rutele dvs.:
1. Directorul `app`
Directorul `app` este rădăcina rutelor aplicației dvs. Toate fișierele și folderele din acest director vor fi utilizate pentru a genera rute. Orice se află în afara directorului `app` (cum ar fi directorul `pages` dacă migrați) va fi ignorat de App Router.
2. Fișierul `page.js`
Fișierul `page.js` (sau `page.jsx`, `page.ts`, `page.tsx`) este cea mai fundamentală parte a App Router. Acesta definește componenta UI care va fi randată pentru un anumit segment de rută. Este un fișier **obligatoriu** pentru orice segment de rută pe care doriți să îl faceți direct accesibil.
Exemplu:
Dacă aveți o structură de fișiere ca aceasta:
app/
despre/
page.js
Componenta exportată din `app/despre/page.js` va fi randată atunci când un utilizator navighează la `/despre`.
// app/despre/page.js
import React from 'react';
export default function PaginaDespre() {
return (
<div>
<h1>Despre noi</h1>
<p>Aflați mai multe despre compania noastră.</p>
</div>
);
}
3. Fișierul `layout.js`
Fișierul `layout.js` (sau `layout.jsx`, `layout.ts`, `layout.tsx`) definește o interfață UI care este partajată între mai multe pagini dintr-un segment de rută. Layout-urile sunt utile pentru a crea antete, subsoluri, bare laterale și alte elemente consistente care ar trebui să fie prezente pe mai multe pagini.
Exemplu:
Să presupunem că doriți să adăugați un antet atât la pagina `/despre`, cât și la o pagină ipotetică `/despre/echipa`. Puteți crea un fișier `layout.js` în directorul `app/despre`:
// app/despre/layout.js
import React from 'react';
export default function LayoutDespre({ children }) {
return (
<div>
<header>
<h1>Despre compania noastră</h1>
</header>
<main>{children}</main>
</div>
);
}
Proprietatea `children` va fi înlocuită cu interfața UI randată de fișierul `page.js` din același director sau din orice director imbricat.
4. Fișierul `template.js`
Fișierul `template.js` este similar cu `layout.js`, dar creează o nouă instanță a componentei pentru fiecare rută copil. Acest lucru este util pentru scenariile în care doriți să mențineți starea componentei sau să preveniți re-randările atunci când navigați între rutele copil. Spre deosebire de layout-uri, template-urile se vor re-randa la navigare. Utilizarea template-urilor este excelentă pentru animarea elementelor la navigare.
Exemplu:
// 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)}>Actualizează Template</button>
{children}
</main>
)
}
5. Fișierul `loading.js`
Fișierul `loading.js` (sau `loading.jsx`, `loading.ts`, `loading.tsx`) vă permite să creați o interfață UI de încărcare care este afișată în timp ce un segment de rută se încarcă. Acest lucru este util pentru a oferi o experiență de utilizare mai bună atunci când se preiau date sau se efectuează alte operațiuni asincrone.
Exemplu:
// app/despre/loading.js
import React from 'react';
export default function Loading() {
return <p>Se încarcă informațiile despre...</p>;
}
Când un utilizator navighează la `/despre`, componenta `Loading` va fi afișată până când componenta `page.js` este complet randată.
6. Fișierul `error.js`
Fișierul `error.js` (sau `error.jsx`, `error.ts`, `error.tsx`) vă permite să creați o interfață UI de eroare personalizată care este afișată atunci când apare o eroare într-un segment de rută. Acest lucru este util pentru a oferi un mesaj de eroare mai prietenos pentru utilizator și pentru a preveni blocarea întregii aplicații.
Exemplu:
// app/despre/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>A apărut o eroare!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Încearcă din nou</button>
</div>
);
}
Dacă apare o eroare în timpul randării paginii `/despre`, va fi afișată componenta `Error`. Proprietatea `error` conține informații despre eroare, iar funcția `reset` permite utilizatorului să încerce să reîncarce pagina.
7. Grupuri de Rute (Route Groups)
Grupurile de Rute `(numeGrup)` vă permit să vă organizați rutele fără a afecta structura URL-ului. Acestea sunt create prin încadrarea unui nume de folder în paranteze. Acest lucru este deosebit de util pentru organizarea layout-urilor și a componentelor partajate.
Exemplu:
app/
(marketing)/
despre/
page.js
contact/
page.js
(magazin)/
produse/
page.js
În acest exemplu, paginile `despre` și `contact` sunt grupate sub grupul `marketing`, iar pagina `produse` este sub grupul `magazin`. URL-urile rămân `/despre`, `/contact` și `/produse`, respectiv.
8. Rute Dinamice
Rutele dinamice vă permit să creați rute cu segmente variabile. Acest lucru este util pentru afișarea conținutului pe baza datelor preluate dintr-o bază de date sau API. Segmentele de rută dinamice sunt definite prin încadrarea numelui segmentului în paranteze drepte (de exemplu, `[id]`).
Exemplu:
Să presupunem că doriți să creați o rută pentru afișarea postărilor individuale de pe blog pe baza ID-ului lor. Puteți crea o structură de fișiere ca aceasta:
app/
blog/
[id]/
page.js
Segmentul `[id]` este un segment dinamic. Componenta exportată din `app/blog/[id]/page.js` va fi randată atunci când un utilizator navighează la un URL precum `/blog/123` sau `/blog/456`. Valoarea parametrului `id` va fi disponibilă în proprietatea `params` a componentei.
// app/blog/[id]/page.js
import React from 'react';
export default async function PostareBlog({ params }) {
const { id } = params;
// Preia datele pentru postarea de blog cu ID-ul dat
const post = await fetchBlogPost(id);
if (!post) {
return <p>Postarea de blog nu a fost găsită.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Simulează preluarea datelor dintr-o bază de date sau API
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Prima mea postare pe blog', content: 'Acesta este conținutul primei mele postări pe blog.' },
'456': { title: 'O altă postare pe blog', content: 'Acesta este un conținut și mai interesant.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Puteți utiliza, de asemenea, mai multe segmente dinamice într-o rută. De exemplu, ați putea avea o rută precum `/blog/[categorie]/[id]`.
9. Segmente Catch-all
Segmentele catch-all vă permit să creați rute care se potrivesc cu orice număr de segmente. Acest lucru este util pentru scenarii precum crearea unui CMS unde structura URL-ului este determinată de utilizator. Segmentele catch-all sunt definite prin adăugarea a trei puncte înaintea numelui segmentului (de exemplu, `[...slug]`).
Exemplu:
app/
docs/
[...slug]/
page.js
Segmentul `[...slug]` se va potrivi cu orice număr de segmente după `/docs`. De exemplu, se va potrivi cu `/docs/getting-started`, `/docs/api/users` și `/docs/advanced/configuration`. Valoarea parametrului `slug` va fi un array care conține segmentele potrivite.
// app/docs/[...slug]/page.js
import React from 'react';
export default function PaginaDocs({ params }) {
const { slug } = params;
return (
<div>
<h1>Documentație</h1>
<p>Slug: {slug ? slug.join('/') : 'Niciun slug'}</p>
</div>
);
}
Segmentele catch-all opționale pot fi create prin adăugarea numelui segmentului în paranteze drepte duble `[[...slug]]`. Acest lucru face segmentul de rută opțional. Exemplu:
app/
blog/
[[...slug]]/
page.js
Această configurație va randa componenta page.js atât la `/blog`, cât și la `/blog/orice/numar/de/segmente`.
10. Rute Paralele
Rutele Paralele vă permit să randați simultan una sau mai multe pagini în același layout. Acest lucru este deosebit de util pentru layout-uri complexe, cum ar fi tablourile de bord, unde diferite secțiuni ale paginii pot fi încărcate independent. Rutele Paralele sunt definite folosind simbolul `@` urmat de un nume de slot (de exemplu, `@sidebar`, `@main`).
Exemplu:
app/
@sidebar/
page.js // Conținut pentru bara laterală
@main/
page.js // Conținut pentru secțiunea principală
default.js // Necesar: Definește layout-ul implicit pentru rutele paralele
Fișierul `default.js` este necesar atunci când se utilizează rute paralele. Acesta definește modul în care diferitele sloturi sunt combinate pentru a crea layout-ul final.
// 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. Rute de Interceptare
Rutele de Interceptare vă permit să încărcați o rută dintr-o altă parte a aplicației dvs. în cadrul layout-ului curent. Acest lucru este util pentru crearea de modale, galerii de imagini și alte elemente UI care ar trebui să apară peste conținutul paginii existente. Rutele de Interceptare sunt definite folosind sintaxa `(..)`, care indică câte niveluri în sus în arborele de directoare trebuie să mergeți pentru a găsi ruta interceptată.
Exemplu:
app/
(.)fotografii/
[id]/
page.js // Ruta interceptată
feed/
page.js // Pagina unde este afișată modala cu fotografia
În acest exemplu, când un utilizator dă clic pe o fotografie în pagina `/feed`, ruta `app/(.)fotografii/[id]/page.js` este interceptată și afișată ca o modală peste pagina `/feed`. Sintaxa `(.)` îi spune lui Next.js să caute cu un nivel mai sus (în directorul `app`) pentru a găsi ruta `fotografii/[id]`.
Preluarea datelor cu App Router
App Router oferă suport încorporat pentru preluarea datelor folosind Componente Server și Componente Client. Componentele Server sunt randate pe server, în timp ce Componentele Client sunt randate pe client. Acest lucru vă permite să alegeți cea mai bună abordare pentru fiecare componentă în funcție de cerințele sale.
Componente Server
Componentele Server sunt implicite în App Router. Ele vă permit să preluați date direct în componentele dvs. fără a fi nevoie de rute API separate. Acest lucru poate îmbunătăți performanța și simplifica codul.
Exemplu:
// app/produse/page.js
import React from 'react';
export default async function PaginaProduse() {
const produse = await fetchProducts();
return (
<div>
<h1>Produse</h1>
<ul>
{produse.map((produs) => (
<li key={produs.id}>{produs.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Simulează preluarea datelor dintr-o bază de date sau API
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'Produs A' },
{ id: 2, name: 'Produs B' },
{ id: 3, name: 'Produs C' },
];
resolve(products);
}, 500);
});
}
În acest exemplu, funcția `fetchProducts` este apelată direct în componenta `PaginaProduse`. Componenta este randată pe server, iar datele sunt preluate înainte ca HTML-ul să fie trimis clientului.
Componente Client
Componentele Client sunt randate pe client și vă permit să utilizați funcționalități specifice clientului, cum ar fi ascultătorii de evenimente, starea și API-urile browserului. Pentru a utiliza o Componentă Client, trebuie să adăugați directiva `'use client'` la începutul fișierului.
Exemplu:
// app/contor/page.js
'use client'
import React, { useState } from 'react';
export default function PaginaContor() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Contor</h1>
<p>Valoare: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementează</button>
</div>
);
}
În acest exemplu, componenta `PaginaContor` este o Componentă Client deoarece folosește hook-ul `useState`. Directiva `'use client'` îi spune lui Next.js să randeze această componentă pe client.
Tehnici avansate de rutare
App Router oferă mai multe tehnici avansate de rutare care pot fi utilizate pentru a crea aplicații complexe și sofisticate.
1. Route Handlers
Route Handlers vă permit să creați puncte finale API în directorul dvs. `app`. Acest lucru elimină necesitatea unui director separat `pages/api`. Route Handlers sunt definite în fișiere numite `route.js` (sau `route.ts`) și exportă funcții care gestionează diferite metode HTTP (de exemplu, `GET`, `POST`, `PUT`, `DELETE`).
Exemplu:
// app/api/utilizatori/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Simulează preluarea utilizatorilor dintr-o bază de date
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('Date primite:', body)
return NextResponse.json({ message: 'Utilizator creat' }, { status: 201 })
}
Acest exemplu definește un route handler la `/api/utilizatori` care gestionează atât cererile `GET`, cât și `POST`. Funcția `GET` returnează o listă de utilizatori, iar funcția `POST` creează un nou utilizator.
2. Grupuri de Rute cu Layout-uri Multiple
Puteți combina grupurile de rute cu layout-uri pentru a crea layout-uri diferite pentru secțiuni diferite ale aplicației dvs. Acest lucru este util pentru scenariile în care doriți să aveți un antet sau o bară laterală diferită pentru diferite părți ale site-ului dvs.
Exemplu:
app/
(marketing)/
layout.js // Layout de marketing
despre/
page.js
contact/
page.js
(admin)/
layout.js // Layout de administrare
dashboard/
page.js
În acest exemplu, paginile `despre` și `contact` vor folosi layout-ul de `marketing`, în timp ce pagina `dashboard` va folosi layout-ul de `admin`.
3. Middleware
Middleware vă permite să rulați cod înainte ca o cerere să fie gestionată de aplicația dvs. Acest lucru este util pentru sarcini precum autentificarea, autorizarea, înregistrarea jurnalelor și redirecționarea utilizatorilor în funcție de locația sau dispozitivul lor.
Middleware este definit într-un fișier numit `middleware.js` (sau `middleware.ts`) la rădăcina proiectului dvs.
Exemplu:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Verifică dacă utilizatorul este autentificat
const isAuthenticated = false; // Înlocuiți cu logica dvs. de autentificare
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// Vedeți "Matching Paths" mai jos pentru a afla mai multe
export const config = {
matcher: '/admin/:path*',
}
Acest exemplu definește un middleware care verifică dacă utilizatorul este autentificat înainte de a-i permite accesul la orice rută sub `/admin`. Dacă utilizatorul nu este autentificat, este redirecționat către pagina `/login`.
Cele mai bune practici pentru rutarea bazată pe fișiere
Pentru a profita la maximum de sistemul de rutare bazat pe fișiere al App Router, luați în considerare următoarele bune practici:
- Păstrați structura de fișiere organizată: Utilizați nume de foldere sugestive și grupați fișierele conexe.
- Utilizați layout-uri pentru UI partajată: Creați layout-uri pentru antete, subsoluri, bare laterale și alte elemente care sunt partajate între mai multe pagini.
- Utilizați interfețe UI de încărcare: Furnizați interfețe UI de încărcare pentru rutele care preiau date sau efectuează alte operațiuni asincrone.
- Gestionați erorile cu grație: Creați interfețe UI de eroare personalizate pentru a oferi o experiență de utilizare mai bună atunci când apar erori.
- Utilizați grupuri de rute pentru organizare: Utilizați grupuri de rute pentru a vă organiza rutele fără a afecta structura URL-ului.
- Exploatați componentele server pentru performanță: Utilizați componente server pentru a prelua date și a randa UI pe server, îmbunătățind performanța și SEO.
- Utilizați componente client atunci când este necesar: Utilizați componente client atunci când trebuie să folosiți funcționalități specifice clientului, cum ar fi ascultătorii de evenimente, starea și API-urile browserului.
Exemple de internaționalizare cu Next.js App Router
Next.js App Router simplifică internaționalizarea (i18n) prin rutarea bazată pe fișiere. Iată cum puteți implementa i18n în mod eficient:
1. Rutare cu sub-căi (Sub-path Routing)
Organizați-vă rutele în funcție de localizare (locale) folosind sub-căi. De exemplu:
app/
[locale]/
page.tsx // Pagina de pornire pentru localizare
despre/
page.tsx // Pagina Despre pentru localizare
// 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),
ro: () => import('./dictionaries/ro.json').then((module) => module.default),
};
export const getTranslations = async (locale) => {
try {
return dictionaries[locale]() ?? dictionaries.en();
} catch (error) {
console.error(`Nu s-au putut încărca traducerile pentru localizarea ${locale}`, error);
return dictionaries.en();
}
};
În această configurație, segmentul de rută dinamic `[locale]` gestionează diferite localizări (de exemplu, `/en`, `/ro`). Traducerile sunt încărcate dinamic în funcție de localizare.
2. Rutare prin domeniu
Pentru o abordare mai avansată, puteți utiliza domenii sau subdomenii diferite pentru fiecare localizare. Acest lucru implică adesea o configurare suplimentară la furnizorul dvs. de găzduire.
3. Middleware pentru detectarea localizării
Utilizați middleware pentru a detecta automat localizarea preferată a utilizatorului și a-l redirecționa corespunzător.
// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';
let locales = ['en', 'ro', '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'); // Utilizați "en" ca localizare implicită
} catch (error) {
console.error("Eroare la potrivirea localizării:", error);
return 'en'; // Reveniți la engleză dacă potrivirea eșuează
}
}
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).*)',
],
};
Acest middleware verifică dacă calea solicitată are un prefix de localizare. Dacă nu, detectează localizarea preferată a utilizatorului folosind antetul `Accept-Language` și îl redirecționează către calea specifică localizării corespunzătoare. Biblioteci precum `@formatjs/intl-localematcher` și `negotiator` sunt utilizate pentru a gestiona negocierea localizării.
Next.js App Router și accesibilitatea globală
Crearea de aplicații web accesibile la nivel global necesită o considerare atentă a principiilor de accesibilitate (a11y). Next.js App Router oferă o fundație solidă pentru construirea de experiențe accesibile, dar este esențial să implementați cele mai bune practici pentru a vă asigura că aplicația dvs. este utilizabilă de către toți, indiferent de abilitățile lor.
Considerații cheie privind accesibilitatea
- HTML Semantic: Utilizați elemente HTML semantice (de exemplu, `<article>`, `<nav>`, `<aside>`, `<main>`) pentru a vă structura conținutul. Acest lucru oferă semnificație tehnologiilor asistive și ajută utilizatorii să navigheze mai ușor pe site-ul dvs.
- Atribute ARIA: Utilizați atributele ARIA (Accessible Rich Internet Applications) pentru a spori accesibilitatea componentelor și widget-urilor personalizate. Atributele ARIA oferă informații suplimentare despre rolul, starea și proprietățile elementelor pentru tehnologiile asistive.
- Navigare de la tastatură: Asigurați-vă că toate elementele interactive sunt accesibile prin tastatură. Utilizatorii ar trebui să poată naviga prin aplicația dvs. folosind tasta `Tab` și să interacționeze cu elementele folosind tasta `Enter` sau `Space`.
- Contrastul culorilor: Utilizați un contrast suficient al culorilor între text și fundal pentru a asigura lizibilitatea pentru utilizatorii cu deficiențe de vedere. Ghidurile de accesibilitate a conținutului web (WCAG) recomandă un raport de contrast de cel puțin 4.5:1 pentru textul normal și 3:1 pentru textul mare.
- Text alternativ pentru imagini: Furnizați text alternativ descriptiv pentru toate imaginile. Textul alternativ oferă o alternativă textuală pentru imagini care poate fi citită de cititoarele de ecran.
- Etichete de formular: Asociați etichetele de formular cu câmpurile lor de intrare corespunzătoare folosind elementul `<label>`. Acest lucru clarifică utilizatorilor ce informații sunt așteptate în fiecare câmp.
- Testarea cu cititor de ecran: Testați aplicația dvs. cu un cititor de ecran pentru a vă asigura că este accesibilă utilizatorilor cu deficiențe de vedere. Cititoarele de ecran populare includ NVDA, JAWS și VoiceOver.
Implementarea accesibilității în Next.js App Router
- Utilizați componenta Link din Next.js: Utilizați componenta `<Link>` pentru navigare. Aceasta oferă caracteristici de accesibilitate încorporate, cum ar fi pre-încărcarea (prefetching) și gestionarea focalizării.
- Gestionarea focalizării: Atunci când navigați între pagini sau deschideți modale, asigurați-vă că focalizarea este gestionată corespunzător. Focalizarea ar trebui să fie setată pe cel mai logic element de pe noua pagină sau modală.
- Componente personalizate accesibile: Atunci când creați componente personalizate, asigurați-vă că acestea sunt accesibile respectând principiile enumerate mai sus. Utilizați HTML semantic, atribute ARIA și navigare de la tastatură pentru a face componentele dvs. utilizabile de către toți.
- Linting și testare: Utilizați unelte de linting precum ESLint cu pluginuri de accesibilitate pentru a identifica potențialele probleme de accesibilitate în codul dvs. De asemenea, utilizați unelte de testare automată pentru a testa aplicația dvs. pentru încălcări ale accesibilității.
Concluzie
Sistemul de rutare bazat pe fișiere al Next.js App Router oferă o modalitate puternică și intuitivă de a structura și naviga aplicațiile. Înțelegând conceptele de bază și cele mai bune practici prezentate în acest ghid, puteți construi aplicații Next.js robuste, scalabile și ușor de întreținut. Experimentați cu diferitele caracteristici ale App Router și descoperiți cum vă poate simplifica fluxul de lucru în dezvoltare și îmbunătăți experiența utilizatorului.