Faylga asoslangan marshrutlash boʻyicha chuqur qoʻllanmamiz yordamida Next.js App Router kuchini oching. Ilovangizni tuzish, dinamik marshrutlar yaratish, maketlarni boshqarish va boshqalarni oʻrganing.
Next.js App Router: Faylga Asoslangan Marshrutlash Boʻyicha Toʻliq Qoʻllanma
Next.js 13 versiyasida taqdim etilgan va keyingi versiyalarda standartga aylangan Next.js App Router ilovalarni tuzish va navigatsiya qilish usulimizni inqilob qiladi. U ishlab chiqishni soddalashtiradigan, unumdorlikni oshiradigan va umumiy dasturchi tajribasini yaxshilaydigan kuchli va intuitiv faylga asoslangan marshrutlash tizimini taqdim etadi. Ushbu toʻliq qoʻllanma App Routerning faylga asoslangan marshrutlashiga chuqur kirib, sizga mustahkam va kengaytiriladigan Next.js ilovalarini yaratish uchun bilim va koʻnikmalarni beradi.
Faylga Asoslangan Marshrutlash Nima?
Faylga asoslangan marshrutlash - bu marshrutlash tizimi boʻlib, unda ilovangiz marshrutlarining tuzilishi toʻgʻridan-toʻgʻri fayllar va kataloglaringizning joylashuvi bilan belgilanadi. Next.js App Router'da siz marshrutlarni `app` katalogi ichida fayllar yaratish orqali belgilaysiz. Har bir jild marshrut segmentini ifodalaydi va ushbu jildlardagi maxsus fayllar oʻsha marshrut segmentining qanday ishlashini belgilaydi. Bu yondashuv bir nechta afzalliklarga ega:
- Intuitiv Tuzilma: Fayl tizimi ilovaning marshrut tuzilmasini aks ettiradi, bu esa uni tushunish va navigatsiya qilishni osonlashtiradi.
- Avtomatik Marshrutlash: Next.js fayl tuzilmangiz asosida avtomatik ravishda marshrutlarni yaratadi, bu esa qoʻlda sozlash zaruratini yoʻqotadi.
- Kodning Bir Joyda Jamlanishi: Marshrut ishlovchilari (handlers) va UI komponentlari bir joyda joylashgan boʻlib, bu kodni tashkil etish va qoʻllab-quvvatlashni yaxshilaydi.
- Oʻrnatilgan Xususiyatlar: App Router maketlar, dinamik marshrutlar, ma'lumotlarni yuklash va boshqalar uchun oʻrnatilgan yordamni taqdim etadi, bu esa murakkab marshrutlash stsenariylarini soddalashtiradi.
App Router bilan Ish Boshlash
App Router'dan foydalanish uchun siz yangi Next.js loyihasini yaratishingiz yoki mavjud loyihani migratsiya qilishingiz kerak. Next.js 13 yoki undan keyingi versiyasidan foydalanayotganingizga ishonch hosil qiling.
Yangi Loyiha Yaratish:
Siz quyidagi buyruq yordamida App Router bilan yangi Next.js loyihasini yaratishingiz mumkin:
npx create-next-app@latest my-app --example with-app
Mavjud Loyihani Migratsiya Qilish:
Mavjud loyihani migratsiya qilish uchun sahifalaringizni `pages` katalogidan `app` katalogiga koʻchirishingiz kerak. Marshrutlash mantig'ingizni shunga mos ravishda oʻzgartirishingiz kerak boʻlishi mumkin. Next.js bu jarayonda sizga yordam berish uchun migratsiya qoʻllanmasini taqdim etadi.
Faylga Asoslangan Marshrutlashning Asosiy Tushunchalari
App Router marshrutlaringiz qanday ishlashini belgilaydigan bir nechta maxsus fayllar va qoidalarni taqdim etadi:
1. `app` Katalogi
`app` katalogi ilovangiz marshrutlarining ildizidir. Ushbu katalog ichidagi barcha fayllar va jildlar marshrutlarni yaratish uchun ishlatiladi. `app` katalogidan tashqaridagi har qanday narsa (agar siz migratsiya qilayotgan boʻlsangiz, `pages` katalogi kabi) App Router tomonidan e'tiborga olinmaydi.
2. `page.js` Fayli
`page.js` (yoki `page.jsx`, `page.ts`, `page.tsx`) fayli App Router'ning eng asosiy qismidir. U ma'lum bir marshrut segmenti uchun render qilinadigan UI komponentini belgilaydi. Bu toʻgʻridan-toʻgʻri kirish mumkin boʻlgan har qanday marshrut segmenti uchun majburiy fayldir.
Misol:
Agar sizda shunday fayl tuzilmasi boʻlsa:
app/
about/
page.js
`app/about/page.js` dan eksport qilingan komponent foydalanuvchi `/about` manziliga oʻtganda render qilinadi.
// app/about/page.js
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>Biz Haqimizda</h1>
<p>Kompaniyamiz haqida batafsil ma'lumot.</p>
</div>
);
}
3. `layout.js` Fayli
`layout.js` (yoki `layout.jsx`, `layout.ts`, `layout.tsx`) fayli marshrut segmenti ichidagi bir nechta sahifalarda umumiy boʻlgan UI'ni belgilaydi. Maketlar bir nechta sahifalarda mavjud boʻlishi kerak boʻlgan sarlavhalar, altbilgilar, yon panellar va boshqa elementlarni yaratish uchun foydalidir.
Misol:
Aytaylik, siz `/about` sahifasiga va faraziy `/about/team` sahifasiga sarlavha qoʻshmoqchisiz. Siz `app/about` katalogida `layout.js` faylini yaratishingiz mumkin:
// app/about/layout.js
import React from 'react';
export default function AboutLayout({ children }) {
return (
<div>
<header>
<h1>Kompaniyamiz Haqida</h1>
</header>
<main>{children}</main>
</div>
);
}
`children` prop'i xuddi shu katalogdagi yoki har qanday ichki kataloglardagi `page.js` fayli tomonidan render qilingan UI bilan almashtiriladi.
4. `template.js` Fayli
`template.js` fayli `layout.js` ga oʻxshaydi, lekin u har bir bola marshrut uchun komponentning yangi nusxasini yaratadi. Bu, bola marshrutlar oʻrtasida navigatsiya qilganda komponent holatini saqlash yoki qayta renderlanishni oldini olishni xohlagan stsenariylar uchun foydalidir. Maketlardan farqli oʻlaroq, andozalar navigatsiyada qayta renderlanadi. Andozalardan foydalanish navigatsiyadagi elementlarni animatsiya qilish uchun ajoyibdir.
Misol:
// app/template.js
'use client'
import { useState } from 'react'
export default function Template({ children }) {
const [count, setCount] = useState(0)
return (
<main>
<p>Andoza: {count}</p>
<button onClick={() => setCount(count + 1)}>Andozani Yangilash</button>
{children}
</main>
)
}
5. `loading.js` Fayli
`loading.js` (yoki `loading.jsx`, `loading.ts`, `loading.tsx`) fayli marshrut segmenti yuklanayotganda koʻrsatiladigan yuklanish UI'sini yaratishga imkon beradi. Bu ma'lumotlarni yuklash yoki boshqa asinxron operatsiyalarni bajarishda yaxshiroq foydalanuvchi tajribasini ta'minlash uchun foydalidir.
Misol:
// app/about/loading.js
import React from 'react';
export default function Loading() {
return <p>Haqida ma'lumot yuklanmoqda...</p>;
}
Foydalanuvchi `/about` manziliga oʻtganda, `page.js` komponenti toʻliq renderlanmaguncha `Loading` komponenti koʻrsatiladi.
6. `error.js` Fayli
`error.js` (yoki `error.jsx`, `error.ts`, `error.tsx`) fayli marshrut segmenti ichida xatolik yuz berganda koʻrsatiladigan maxsus xatolik UI'sini yaratishga imkon beradi. Bu foydalanuvchiga qulayroq xatolik xabarini taqdim etish va butun ilovaning ishdan chiqishini oldini olish uchun foydalidir.
Misol:
// app/about/error.js
'use client'
import React from 'react';
export default function Error({ error, reset }) {
return (
<div>
<h2>Xatolik yuz berdi!</h2>
<p>{error.message}</p>
<button onClick={() => reset()}>Qayta urinib ko'ring</button>
</div>
);
}
Agar `/about` sahifasini render qilishda xatolik yuz bersa, `Error` komponenti koʻrsatiladi. `error` prop'i xatolik haqidagi ma'lumotlarni oʻz ichiga oladi va `reset` funksiyasi foydalanuvchiga sahifani qayta yuklashga urinish imkonini beradi.
7. Marshrut Guruhlari
Marshrut guruhlari `(groupName)` URL tuzilmasiga ta'sir qilmasdan marshrutlaringizni tashkil qilish imkonini beradi. Ular jild nomini qavslarga oʻrash orqali yaratiladi. Bu, ayniqsa, maketlar va umumiy komponentlarni tashkil qilish uchun foydalidir.
Misol:
app/
(marketing)/
about/
page.js
contact/
page.js
(shop)/
products/
page.js
Ushbu misolda `about` va `contact` sahifalari `marketing` guruhi ostida, `products` sahifasi esa `shop` guruhi ostida joylashgan. URL'lar mos ravishda `/about`, `/contact` va `/products` boʻlib qoladi.
8. Dinamik Marshrutlar
Dinamik marshrutlar oʻzgaruvchan segmentlarga ega marshrutlar yaratish imkonini beradi. Bu ma'lumotlar bazasi yoki API'dan olingan ma'lumotlarga asoslangan kontentni koʻrsatish uchun foydalidir. Dinamik marshrut segmentlari segment nomini kvadrat qavslarga oʻrash orqali aniqlanadi (masalan, `[id]`).
Misol:
Aytaylik, siz alohida blog postlarini ularning ID'si boʻyicha koʻrsatish uchun marshrut yaratmoqchisiz. Siz shunday fayl tuzilmasini yaratishingiz mumkin:
app/
blog/
[id]/
page.js
`[id]` segmenti dinamik segmentdir. `app/blog/[id]/page.js` dan eksport qilingan komponent foydalanuvchi `/blog/123` yoki `/blog/456` kabi URL'ga oʻtganda render qilinadi. `id` parametrining qiymati komponentning `params` prop'ida mavjud boʻladi.
// app/blog/[id]/page.js
import React from 'react';
export default async function BlogPost({ params }) {
const { id } = params;
// Berilgan ID bo'yicha blog posti uchun ma'lumotlarni yuklash
const post = await fetchBlogPost(id);
if (!post) {
return <p>Blog posti topilmadi.</p>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
async function fetchBlogPost(id) {
// Ma'lumotlar bazasi yoki API'dan ma'lumotlarni yuklashni simulyatsiya qilish
return new Promise((resolve) => {
setTimeout(() => {
const posts = {
'123': { title: 'Mening Birinchi Blog Postim', content: 'Bu mening birinchi blog postimning mazmuni.' },
'456': { title: 'Yana Bir Blog Post', content: 'Bu yana bir qiziqarli mazmun.' },
};
resolve(posts[id] || null);
}, 500);
});
}
Siz shuningdek marshrutda bir nechta dinamik segmentlardan foydalanishingiz mumkin. Masalan, sizda `/blog/[category]/[id]` kabi marshrut boʻlishi mumkin.
9. Barchasini Qamrab Oluvchi Segmentlar
Barchasini qamrab oluvchi segmentlar har qanday miqdordagi segmentlarga mos keladigan marshrutlar yaratish imkonini beradi. Bu URL tuzilmasi foydalanuvchi tomonidan belgilanadigan CMS kabi stsenariylar uchun foydalidir. Barchasini qamrab oluvchi segmentlar segment nomidan oldin uchta nuqta qoʻshish orqali aniqlanadi (masalan, `[...slug]`).
Misol:
app/
docs/
[...slug]/
page.js
`[...slug]` segmenti `/docs` dan keyingi har qanday miqdordagi segmentlarga mos keladi. Masalan, u `/docs/getting-started`, `/docs/api/users` va `/docs/advanced/configuration` ga mos keladi. `slug` parametrining qiymati mos keladigan segmentlarni oʻz ichiga olgan massiv boʻladi.
// app/docs/[...slug]/page.js
import React from 'react';
export default function DocsPage({ params }) {
const { slug } = params;
return (
<div>
<h1>Hujjatlar</h1>
<p>Slug: {slug ? slug.join('/') : 'Slug yoʻq'}</p>
</div>
);
}
Ixtiyoriy barchasini qamrab oluvchi segmentlarni segment nomini ikkitali kvadrat qavslarga `[[...slug]]` oʻrash orqali yaratish mumkin. Bu marshrut segmentini ixtiyoriy qiladi. Misol:
app/
blog/
[[...slug]]/
page.js
Ushbu sozlama page.js komponentini ham `/blog` da, ham `/blog/any/number/of/segments` da render qiladi.
10. Parallel Marshrutlar
Parallel marshrutlar bir yoki bir nechta sahifani bir vaqtning oʻzida bir xil maketda render qilish imkonini beradi. Bu, ayniqsa, asboblar paneli kabi murakkab maketlar uchun foydalidir, bunda sahifaning turli qismlari mustaqil ravishda yuklanishi mumkin. Parallel marshrutlar `@` belgisi va undan keyin slot nomi bilan aniqlanadi (masalan, `@sidebar`, `@main`).
Misol:
app/
@sidebar/
page.js // Yon panel uchun kontent
@main/
page.js // Asosiy qism uchun kontent
default.js // Majburiy: Parallel marshrutlar uchun standart maketni belgilaydi
`default.js` fayli parallel marshrutlardan foydalanganda majburiydir. U turli slotlarning yakuniy maketni yaratish uchun qanday birlashtirilishini belgilaydi.
// 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. Toʻsuvchi Marshrutlar
Toʻsuvchi marshrutlar ilovangizning boshqa qismidagi marshrutni joriy maket ichida yuklash imkonini beradi. Bu modallar, rasm galereyalari va mavjud sahifa kontenti ustida paydo boʻlishi kerak boʻlgan boshqa UI elementlarini yaratish uchun foydalidir. Toʻsuvchi marshrutlar `(..)` sintaksisi yordamida aniqlanadi, bu esa toʻsilgan marshrutni topish uchun katalog daraxtida qancha yuqoriga borish kerakligini koʻrsatadi.
Misol:
app/
(.)photos/
[id]/
page.js // Toʻsilgan marshrut
feed/
page.js // Rasm modal oynasi koʻrsatiladigan sahifa
Ushbu misolda, foydalanuvchi `/feed` sahifasidagi rasmga bosganda, `app/(.)photos/[id]/page.js` marshruti toʻsilib, `/feed` sahifasi ustida modal oyna sifatida koʻrsatiladi. `(.)` sintaksisi Next.js ga `photos/[id]` marshrutini topish uchun bir daraja yuqoriga (`app` katalogiga) qarashni aytadi.
App Router bilan Ma'lumotlarni Yuklash
App Router Server Komponentlari va Mijoz Komponentlari yordamida ma'lumotlarni yuklash uchun oʻrnatilgan yordamni taqdim etadi. Server Komponentlari serverda render qilinadi, Mijoz Komponentlari esa mijozda render qilinadi. Bu sizga har bir komponent uchun uning talablariga qarab eng yaxshi yondashuvni tanlash imkonini beradi.
Server Komponentlari
Server Komponentlari App Router'da standart hisoblanadi. Ular sizga alohida API marshrutlariga ehtiyoj sezmasdan toʻgʻridan-toʻgʻri komponentlaringizda ma'lumotlarni yuklash imkonini beradi. Bu unumdorlikni oshirishi va kodingizni soddalashtirishi mumkin.
Misol:
// app/products/page.js
import React from 'react';
export default async function ProductsPage() {
const products = await fetchProducts();
return (
<div>
<h1>Mahsulotlar</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</div>
);
}
async function fetchProducts() {
// Ma'lumotlar bazasi yoki API'dan ma'lumotlarni yuklashni simulyatsiya qilish
return new Promise((resolve) => {
setTimeout(() => {
const products = [
{ id: 1, name: 'Mahsulot A' },
{ id: 2, name: 'Mahsulot B' },
{ id: 3, name: 'Mahsulot C' },
];
resolve(products);
}, 500);
});
}
Ushbu misolda `fetchProducts` funksiyasi toʻgʻridan-toʻgʻri `ProductsPage` komponenti ichida chaqiriladi. Komponent serverda render qilinadi va HTML mijozga yuborilishidan oldin ma'lumotlar yuklanadi.
Mijoz Komponentlari
Mijoz Komponentlari mijozda render qilinadi va sizga hodisa tinglovchilari, holat (state) va brauzer API'lari kabi mijoz tomonidagi xususiyatlardan foydalanish imkonini beradi. Mijoz Komponentidan foydalanish uchun faylning yuqori qismiga `'use client'` direktivasini qoʻshishingiz kerak.
Misol:
// app/counter/page.js
'use client'
import React, { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Hisoblagich</h1>
<p>Sanoq: {count}</p>
<button onClick={() => setCount(count + 1)}>Oshirish</button>
</div>
);
}
Ushbu misolda `CounterPage` komponenti Mijoz Komponentidir, chunki u `useState` hook'idan foydalanadi. `'use client'` direktivasi Next.js ga ushbu komponentni mijozda render qilishni aytadi.
Ilgʻor Marshrutlash Texnikalari
App Router murakkab va zamonaviy ilovalarni yaratish uchun ishlatilishi mumkin boʻlgan bir nechta ilgʻor marshrutlash texnikalarini taklif etadi.
1. Marshrut Ishlovchilari (Route Handlers)
Marshrut Ishlovchilari sizga `app` katalogingiz ichida API nuqtalarini yaratish imkonini beradi. Bu alohida `pages/api` katalogiga boʻlgan ehtiyojni yoʻqotadi. Marshrut Ishlovchilari `route.js` (yoki `route.ts`) nomli fayllarda aniqlanadi va turli HTTP metodlarini (masalan, `GET`, `POST`, `PUT`, `DELETE`) boshqaradigan funksiyalarni eksport qiladi.
Misol:
// app/api/users/route.js
import { NextResponse } from 'next/server'
export async function GET(request) {
// Ma'lumotlar bazasidan foydalanuvchilarni yuklashni simulyatsiya qilish
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('Qabul qilingan ma\'lumotlar:', body)
return NextResponse.json({ message: 'Foydalanuvchi yaratildi' }, { status: 201 })
}
Ushbu misol `/api/users` manzilida ham `GET`, ham `POST` soʻrovlarini boshqaradigan marshrut ishlovchisini belgilaydi. `GET` funksiyasi foydalanuvchilar roʻyxatini qaytaradi, `POST` funksiyasi esa yangi foydalanuvchi yaratadi.
2. Bir Nechta Maketlarga Ega Marshrut Guruhlari
Ilovangizning turli qismlari uchun turli xil maketlar yaratish uchun marshrut guruhlarini maketlar bilan birlashtirishingiz mumkin. Bu saytingizning turli qismlari uchun turli sarlavha yoki yon panelga ega boʻlishni xohlagan stsenariylar uchun foydalidir.
Misol:
app/
(marketing)/
layout.js // Marketing maketi
about/
page.js
contact/
page.js
(admin)/
layout.js // Admin maketi
dashboard/
page.js
Ushbu misolda `about` va `contact` sahifalari `marketing` maketidan, `dashboard` sahifasi esa `admin` maketidan foydalanadi.
3. Middleware (Oraliq Dastur)
Middleware soʻrov ilovangiz tomonidan qayta ishlanishidan oldin kodni ishga tushirish imkonini beradi. Bu autentifikatsiya, avtorizatsiya, jurnallashtirish va foydalanuvchilarni ularning joylashuvi yoki qurilmasiga qarab yoʻnaltirish kabi vazifalar uchun foydalidir.
Middleware loyihangizning ildizida `middleware.js` (yoki `middleware.ts`) nomli faylda aniqlanadi.
Misol:
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
// Foydalanuvchi autentifikatsiyadan oʻtganligini tekshirish
const isAuthenticated = false; // Oʻz autentifikatsiya mantigʻingiz bilan almashtiring
if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
// Ko'proq ma'lumot olish uchun quyidagi "Mos Keluvchi Yo'llar" bo'limiga qarang
export const config = {
matcher: '/admin/:path*',
}
Ushbu misol foydalanuvchiga `/admin` ostidagi har qanday marshrutga kirishga ruxsat berishdan oldin uning autentifikatsiyadan oʻtganligini tekshiradigan middleware'ni belgilaydi. Agar foydalanuvchi autentifikatsiyadan oʻtmagan boʻlsa, ular `/login` sahifasiga yoʻnaltiriladi.
Faylga Asoslangan Marshrutlash uchun Eng Yaxshi Amaliyotlar
App Router'ning faylga asoslangan marshrutlash tizimidan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni koʻrib chiqing:
- Fayl tuzilmangizni tartibli saqlang: Mazmunli jild nomlaridan foydalaning va bogʻliq fayllarni birgalikda guruhlang.
- Umumiy UI uchun maketlardan foydalaning: Bir nechta sahifalarda umumiy boʻlgan sarlavhalar, altbilgilar, yon panellar va boshqa elementlar uchun maketlar yarating.
- Yuklanish UI'laridan foydalaning: Ma'lumotlarni yuklaydigan yoki boshqa asinxron operatsiyalarni bajaradigan marshrutlar uchun yuklanish UI'larini taqdim eting.
- Xatoliklarni ohista boshqaring: Xatoliklar yuz berganda yaxshiroq foydalanuvchi tajribasini ta'minlash uchun maxsus xatolik UI'larini yarating.
- Tashkil qilish uchun marshrut guruhlaridan foydalaning: URL tuzilmasiga ta'sir qilmasdan marshrutlaringizni tashkil qilish uchun marshrut guruhlaridan foydalaning.
- Unumdorlik uchun server komponentlaridan foydalaning: Ma'lumotlarni yuklash va UI'ni serverda render qilish uchun server komponentlaridan foydalaning, bu unumdorlik va SEO'ni yaxshilaydi.
- Kerak boʻlganda mijoz komponentlaridan foydalaning: Hodisa tinglovchilari, holat (state) va brauzer API'lari kabi mijoz tomonidagi xususiyatlardan foydalanish kerak boʻlganda mijoz komponentlaridan foydalaning.
Next.js App Router bilan Xalqarolashtirish (Internationalization) Misollari
Next.js App Router faylga asoslangan marshrutlash orqali xalqarolashtirishni (i18n) soddalashtiradi. I18n ni samarali amalga oshirish yoʻllari quyidagicha:
1. Sub-path (Pastki yoʻl) Marshrutlash
Marshrutlaringizni lokal (til) boʻyicha pastki yoʻllardan foydalanib tashkil qiling. Masalan:
app/
[locale]/
page.tsx // Lokal uchun asosiy sahifa
about/
page.tsx // Lokal uchun haqida sahifasi
// 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(`Lokal ${locale} uchun tarjimalarni yuklashda xatolik yuz berdi`, error);
return dictionaries.en();
}
};
Ushbu sozlamada `[locale]` dinamik marshrut segmenti turli lokallarni (masalan, `/en`, `/es`) boshqaradi. Tarjimalar lokalga qarab dinamik ravishda yuklanadi.
2. Domen Marshrutlash
Yanada ilgʻor yondashuv uchun har bir lokal uchun turli domenlar yoki subdomenlardan foydalanishingiz mumkin. Bu koʻpincha xosting provayderingiz bilan qoʻshimcha sozlashlarni talab qiladi.
3. Lokalni Aniqlash uchun Middleware
Foydalanuvchining afzal koʻrgan lokalini avtomatik ravishda aniqlash va ularni shunga mos ravishda yoʻnaltirish uchun middleware'dan foydalaning.
// 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'); // Standart lokal sifatida "en" dan foydalaning
} catch (error) {
console.error("Lokalni moslashtirishda xatolik:", error);
return 'en'; // Moslashtirishda xatolik yuz bersa, ingliz tiliga qaytish
}
}
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).*)',
],
};
Ushbu middleware soʻralgan yoʻlda lokal prefiksi bor-yoʻqligini tekshiradi. Agar yoʻq boʻlsa, u `Accept-Language` sarlavhasi yordamida foydalanuvchining afzal koʻrgan lokalini aniqlaydi va ularni tegishli lokalga xos yoʻlga yoʻnaltiradi. Lokal muzokaralarini boshqarish uchun `@formatjs/intl-localematcher` va `negotiator` kabi kutubxonalardan foydalaniladi.
Next.js App Router va Global Foydalanish Imkoniyati (Accessibility)
Global miqyosda foydalanish mumkin boʻlgan veb-ilovalarni yaratish foydalanish imkoniyati (a11y) tamoyillarini diqqat bilan koʻrib chiqishni talab qiladi. Next.js App Router foydalanishga qulay tajribalarni yaratish uchun mustahkam poydevor yaratadi, lekin ilovangizdan qobiliyatlaridan qat'i nazar, hamma foydalana olishini ta'minlash uchun eng yaxshi amaliyotlarni qoʻllash muhimdir.
Foydalanish Imkoniyatining Asosiy Jihatlari
- Semantik HTML: Kontentingizni tuzish uchun semantik HTML elementlaridan (masalan, `<article>`, `<nav>`, `<aside>`, `<main>`) foydalaning. Bu yordamchi texnologiyalarga ma'no beradi va foydalanuvchilarga saytingizda osonroq harakatlanishiga yordam beradi.
- ARIA Atributlari: Maxsus komponentlar va vidjetlarning foydalanish imkoniyatini oshirish uchun ARIA (Accessible Rich Internet Applications) atributlaridan foydalaning. ARIA atributlari yordamchi texnologiyalarga elementlarning roli, holati va xususiyatlari haqida qoʻshimcha ma'lumot beradi.
- Klaviatura Navigatsiyasi: Barcha interaktiv elementlarga klaviatura orqali kirish mumkinligini ta'minlang. Foydalanuvchilar `Tab` tugmasi yordamida ilovangiz boʻylab harakatlana olishlari va `Enter` yoki `Space` tugmasi yordamida elementlar bilan oʻzaro ta'sir oʻtkaza olishlari kerak.
- Rang Kontrasti: Koʻrish qobiliyati zaif foydalanuvchilar uchun oʻqishni ta'minlash uchun matn va fon oʻrtasida yetarli rang kontrastidan foydalaning. Web Content Accessibility Guidelines (WCAG) oddiy matn uchun kamida 4.5:1 va katta matn uchun 3:1 kontrast nisbatini tavsiya qiladi.
- Rasm Alt Matni: Barcha rasmlar uchun tavsiflovchi alt matnini taqdim eting. Alt matni ekran oʻquvchilari tomonidan oʻqilishi mumkin boʻlgan rasmlar uchun matnli alternativani taqdim etadi.
- Forma Yorliqlari: Forma yorliqlarini `<label>` elementi yordamida ularning mos keladigan kiritish maydonlari bilan bogʻlang. Bu foydalanuvchilarga har bir maydonda qanday ma'lumot kutilayotganini aniq koʻrsatadi.
- Ekran Oʻquvchi bilan Sinov: Koʻrish qobiliyati zaif foydalanuvchilar uchun foydalanish mumkinligini ta'minlash uchun ilovangizni ekran oʻquvchi bilan sinab koʻring. Mashhur ekran oʻquvchilari NVDA, JAWS va VoiceOver'ni oʻz ichiga oladi.
Next.js App Router'da Foydalanish Imkoniyatini Amalga Oshirish
- Next.js Link Komponentidan foydalaning: Navigatsiya uchun `<Link>` komponentidan foydalaning. U oldindan yuklash va fokusni boshqarish kabi oʻrnatilgan foydalanish imkoniyati xususiyatlarini taqdim etadi.
- Fokusni Boshqarish: Sahifalar oʻrtasida harakatlanayotganda yoki modallarni ochayotganda, fokusning toʻgʻri boshqarilishini ta'minlang. Fokus yangi sahifa yoki modaldagi eng mantiqiy elementga oʻrnatilishi kerak.
- Foydalanishga Qulay Maxsus Komponentlar: Maxsus komponentlar yaratayotganda, yuqorida keltirilgan tamoyillarga amal qilgan holda ularning foydalanishga qulayligini ta'minlang. Komponentlaringizni hamma uchun qulay qilish uchun semantik HTML, ARIA atributlari va klaviatura navigatsiyasidan foydalaning.
- Linting va Sinov: Kodingizdagi potentsial foydalanish imkoniyati muammolarini aniqlash uchun ESLint kabi linting vositalaridan foydalanish imkoniyati plaginlari bilan foydalaning. Shuningdek, ilovangizni foydalanish imkoniyati buzilishlari uchun sinab koʻrish uchun avtomatlashtirilgan sinov vositalaridan foydalaning.
Xulosa
Next.js App Routerning faylga asoslangan marshrutlash tizimi ilovalaringizni tuzish va ularda harakatlanishning kuchli va intuitiv usulini taklif etadi. Ushbu qoʻllanmada keltirilgan asosiy tushunchalar va eng yaxshi amaliyotlarni tushunib, siz mustahkam, kengaytiriladigan va qoʻllab-quvvatlanadigan Next.js ilovalarini yaratishingiz mumkin. App Router'ning turli xususiyatlari bilan tajriba qilib koʻring va u sizning ishlab chiqish jarayoningizni qanday soddalashtirishi va foydalanuvchi tajribasini yaxshilashi mumkinligini kashf eting.