M

MLOG

O'zbek

Next.js Interception Routes'ga chuqur sho'ng'ish, foydalanuvchi tajribasini yaxshilash uchun amaliy modal va overlay'larni tatbiq etish strategiyalari.

Next.js Interception Routes: Modal va Overlay Shakllarini Mukammal O'zlashtirish

Mashhur React freymvorki bo'lgan Next.js yuqori unumdorlikka ega va kengaytiriladigan veb-ilovalar yaratish uchun kuchli xususiyatlarni taklif etadi. Shunday xususiyatlardan biri, Interception Routes, murakkab marshrutlash senariylarini, ayniqsa modal va overlay shakllarini tatbiq etishda zamonaviy yechim beradi. Ushbu keng qamrovli qo'llanma uzluksiz va jozibali foydalanuvchi tajribasini yaratish uchun Interception Routes'dan qanday foydalanishni o'rganadi.

Interception Routes nima?

Interception Routes sizga marshrutni to'xtatib, brauzerdagi URL manzilini o'zgartirmasdan boshqa foydalanuvchi interfeysini (UI) render qilish imkonini beradi. Buni foydalanuvchi tajribasini boyitadigan vaqtinchalik aylanma yo'l deb tasavvur qiling. Bu ayniqsa quyidagilar uchun foydalidir:

Nima uchun Modallar va Overlay'lar uchun Interception Routes'dan foydalanish kerak?

Modallar va overlay'larni boshqarishning an'anaviy usullari ko'pincha komponent ichidagi holatni (state) boshqarishni o'z ichiga oladi, bu esa murakkablashishi va unumdorlik muammolariga olib kelishi mumkin. Interception Routes bir nechta afzalliklarni taklif etadi:

Next.js'da Interception Routes'ni sozlash

Keling, Interception Routes'ni qanday amalga oshirishni amaliy misol bilan ko'rib chiqamiz: elektron tijorat ilovasida mahsulot tafsilotlarini ko'rsatish uchun modal yaratish.

Loyiha tuzilmasi

Birinchidan, papkalar tuzilmasini aniqlab olaylik. Tasavvur qiling, bizda `products` papkasi bor va har bir mahsulotning o'ziga xos ID'si mavjud.

app/
  products/
    [id]/
      page.js       // Mahsulot tafsilotlari sahifasi
    @modal/
      [id]/
        page.js   // Mahsulot tafsilotlari uchun modal kontenti
    default.js  // products papkasi uchun layout
  page.js           // Bosh sahifa

Tushuntirish

Kod implementatsiyasi

1. Bosh sahifa (app/page.js)

Ushbu sahifada mahsulotlar ro'yxati ko'rsatiladi, har biri mahsulot tafsilotlarini modalda ochadigan havolaga ega.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Noutbuk' },
 { id: '2', name: 'Smartfon' },
 { id: '3', name: 'Planshet' },
];

export default function Home() {
 return (
 

 
Mahsulotlar ro'yxati

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. Mahsulot tafsilotlari sahifasi (app/products/[id]/page.js)

Ushbu sahifa to'liq mahsulot tafsilotlarini render qiladi. Haqiqiy ilovada bu ma'lumotlar API yoki ma'lumotlar bazasidan olinadi. Muhimi, u asl mahsulotlar ro'yxatiga qaytish havolasini taqdim etadi.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Mahsulot tafsilotlari

 
Mahsulot ID: {id}

 
Bu to'liq mahsulot tafsilotlari sahifasi.

 Mahsulotlar ro'yxatiga qaytish
 

 );
}

3. Modal kontenti (app/products/@modal/[id]/page.js)

Bu eng muhim qism - Interception Route. U bir xil mahsulot ID'sidan foydalanib modal kontentini render qiladi. ID'ga kirish uchun `useParams` hook'iga e'tibor bering.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Mahsulot Modali

 
Mahsulot ID: {id}

 
Ushbu kontent modal ichida render qilinadi!

  history.back()}>Modalni yopish
 

 

 );
}

Eslatma: `'use client';` direktivasi mijoz tomonidagi interaktivlik uchun, ayniqsa `useParams` dan foydalanganda zarur.

Stillashtirish (modal.module.css): Oddiy CSS moduli asosiy modal stilizatsiyasi uchun ishlatiladi. Bu modalni to'g'ri joylashtirish uchun juda muhim.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Uning yuqorida turishini ta'minlang */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Layout (app/products/default.js)

Ushbu layout `@modal` marshrutini o'rab oladi va uning mahsulot konteksti ichida render qilinishini ta'minlaydi.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 

 );
}

U qanday ishlaydi

  1. Foydalanuvchi bosh sahifadagi mahsulot havolasini bosganida (masalan, `/products/1`), Next.js buni `products` papkasi ichidagi marshrut sifatida tan oladi.
  2. `@modal` marshrutini to'sish tufayli, Next.js `@modal` ostida mos keladigan marshrut bor-yo'qligini tekshiradi.
  3. Agar moslik topilsa (masalan, `/products/@modal/1`), Next.js `app/products/@modal/[id]/page.js` dan olingan kontentni joriy sahifa ichida render qiladi. Brauzerdagi URL `/products/1` bo'lib qoladi.
  4. `modalOverlay` stillari modalni asosiy kontent ustida joylashtiradi.
  5. "Modalni yopish" tugmasini bosish orqaga qaytish uchun `history.back()` dan foydalanadi, bu esa modalni samarali yopadi va oldingi holatga qaytadi.

Interception Route'ning ilg'or texnikalari

1. "Orqaga" tugmasini boshqarish

Modalni amalga oshirishning muhim jihati bu brauzerning "orqaga" tugmasi bilan to'g'ri ishlashini ta'minlashdir. Foydalanuvchi modalni ochib, keyin "orqaga" tugmasini bosganda, ular ilovadan uzoqlashmasdan, ideal holda modalni yopib, oldingi kontekstga qaytishlari kerak.

Misolda ishlatilgan `history.back()` usuli brauzer tarixida bir qadam orqaga o'tish orqali bu effektga erishadi. Biroq, murakkabroq stsenariylar uchun joriy marshrutlash holatini hisobga oladigan maxsus "orqaga" tugmasi ishlovchisini amalga oshirishingiz kerak bo'lishi mumkin.

2. Dinamik modal kontenti

Haqiqiy ilovalarda modal kontenti, ehtimol, mahsulot ID'siga asoslanib API yoki ma'lumotlar bazasidan olingan dinamik bo'ladi. Kerakli ma'lumotlarni olish uchun modal komponenti ichida `fetch` API yoki SWR yoki React Query kabi ma'lumotlarni olish kutubxonasidan foydalanishingiz mumkin.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // O'zingizning API manzilingiz bilan almashtiring
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Yuklanmoqda...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... boshqa mahsulot tafsilotlari ... */}
  history.back()}>Modalni yopish
 

 );
}

3. Ichma-ich modallar

Interception Routes murakkab modal ish oqimlarini yaratish uchun ichma-ich joylashtirilishi mumkin. Masalan, foydalanuvchi mahsulot tafsilotlari modalini ochishi va keyin bog'liq mahsulot modalini ochish uchun tugmani bosishi mumkin. Bunga `@modal` papkasi ichida qo'shimcha marshrutlarni to'sish orqali erishish mumkin.

4. 404 xatoliklarini boshqarish

Foydalanuvchi noto'g'ri mahsulot ID'si bilan modal URL'iga o'tadigan stsenariyni ko'rib chiqing (masalan, `/products/@modal/nonexistent`). Foydalanuvchiga qulay 404 sahifasini ko'rsatish yoki foydalanuvchini haqiqiy mahsulot sahifasiga yo'naltirish uchun to'g'ri xatoliklarni qayta ishlashni amalga oshirishingiz kerak.

// app/products/@modal/[id]/page.js

// ... (komponentning qolgan qismi)

 if (!product) {
 return 
Mahsulot topilmadi.
; // Yoki 404 sahifasiga yo'naltirish
 }

// ... (komponentning qolgan qismi)

5. Overlay shakllari

Misollar modallarga qaratilgan bo'lsa-da, Interception Routes overlay'lar uchun ham ishlatilishi mumkin. Kontentni markazlashtirish o'rniga, overlay yon panel yoki ekranning yon tomonidan sirg'alib kiradigan panel sifatida paydo bo'lishi mumkin. CSS uslubi boshqacha bo'ladi, lekin marshrutlash mantig'i bir xil bo'lib qoladi.

Real hayotiy misollar va qo'llash holatlari

Misol: Xalqaro elektron tijorat platformasi Global elektron tijorat saytini tasavvur qiling. Foydalanuvchi mahsulotni bosganda, tafsilotlar modalda ochiladi. URL `/products/[product_id]` ga o'zgaradi, bu to'g'ridan-to'g'ri havola berish va SEO afzalliklariga imkon beradi. Agar foydalanuvchi modal sahifasida tillarni o'zgartirsa (masalan, ingliz tilidan ispan tiliga), mahsulot tafsilotlari tanlangan tilda olinadi va modal kontenti uzluksiz yangilanadi. Bundan tashqari, sayt foydalanuvchining joylashuvini (rozilik bilan) aniqlashi va ularning mintaqasiga tegishli yetkazib berish ma'lumotlarini modal ichida ko'rsatishi mumkin.

Interception Routes'dan foydalanish bo'yicha eng yaxshi amaliyotlar

Interception Routes'ga alternativlar

Interception Routes modal va overlay shakllari uchun kuchli yechim taklif qilsa-da, boshqa yondashuvlarni ham ko'rib chiqish mumkin:

Xulosa

Next.js Interception Routes veb-ilovalaringizda modal va overlay shakllarini amalga oshirishning mustahkam va nafis usulini taqdim etadi. Ushbu kuchli xususiyatdan foydalanib, siz uzluksiz, SEO-ga mos va foydalanuvchiga qulay tajribalar yaratishingiz mumkin. Alternativ yondashuvlar mavjud bo'lsa-da, Interception Routes afzalliklarning noyob kombinatsiyasini taklif etadi, bu ularni har qanday Next.js dasturchisining arsenalidagi qimmatli vositaga aylantiradi.

Qo'shimcha manbalar