Next.js Interception Routes: Ovladavanje modalnim i overlay obrascima

Next.js, popularan React framework, nudi moćne značajke za izradu performantnih i skalabilnih web aplikacija. Jedna takva značajka, Interception Routes, pruža sofisticiran način za rukovanje složenim scenarijima usmjeravanja, posebno pri implementaciji modalnih i overlay obrazaca. Ovaj sveobuhvatni vodič istražuje kako iskoristiti Interception Routes za stvaranje besprijekornih i privlačnih korisničkih iskustava.

Što su Interception Routes?

Interception Routes omogućuju vam da presretnete rutu i prikažete drugačije korisničko sučelje bez promjene URL-a u pregledniku. Zamislite to kao privremeno skretanje koje obogaćuje korisničko iskustvo. Ovo je posebno korisno za:

• Modali: Prikazivanje sadržaja u modalnom prozoru bez navigacije na novu stranicu.
• Overlayi: Prikazivanje dodatnih informacija ili kontrola povrh postojećeg sadržaja.
• Galerije slika: Stvaranje glatkog iskustva navigacije unutar galerije slika, nalik na stranice.
• Procesi uvođenja: Vođenje korisnika kroz višefazni proces bez potpunog ponovnog učitavanja stranice.

Zašto koristiti Interception Routes za modale i overlaye?

Tradicionalne metode rukovanja modalima i overlayima često uključuju upravljanje stanjem unutar komponente, što može postati složeno i dovesti do problema s performansama. Interception Routes nude nekoliko prednosti:

• Poboljšani SEO: Sadržaj prikazan u modalu ili overlayu i dalje je dostupan tražilicama jer je povezan s određenom rutom.
• Djeljivi URL-ovi: Korisnici mogu podijeliti izravnu poveznicu na sadržaj modala ili overlaya.
• Povijest preglednika: Gumbi za natrag i naprijed u pregledniku rade očekivano, omogućujući korisnicima navigaciju kroz povijest modala.
• Pojednostavljeno upravljanje stanjem: Smanjena složenost u upravljanju stanjem vidljivosti modala, što dovodi do čišćeg koda koji je lakši za održavanje.
• Poboljšane performanse: Izbjegavanje nepotrebnih ponovnih iscrtavanja ažuriranjem samo sadržaja modala.

Postavljanje Interception Routes u Next.js-u

Ilustrirajmo kako implementirati Interception Routes praktičnim primjerom: stvaranjem modala za prikaz detalja proizvoda u aplikaciji za e-trgovinu.

Struktura projekta

Prvo, definirajmo strukturu direktorija. Pretpostavimo da imamo direktorij `products` gdje svaki proizvod ima jedinstveni ID.

app/
  products/
    [id]/
      page.js       // Stranica s detaljima proizvoda
    @modal/
      [id]/
        page.js   // Sadržaj modala za detalje proizvoda
    default.js  // Layout za direktorij proizvoda
  page.js           // Početna stranica

Objašnjenje

• `app/products/[id]/page.js`: Ovo je glavna stranica s detaljima proizvoda.
• `app/products/@modal/[id]/page.js`: Ovo definira Interception Route koja će prikazati sadržaj modala. Primijetite konvenciju `@modal` – ovo je ključno kako bi Next.js prepoznao presretajuću rutu.
• `app/products/default.js`: Ovo je layout za direktorij `products`. Potrebno je omotati `@modal` rutu unutar ovog layouta.
• `app/page.js`: Početna stranica, koja će sadržavati poveznice na naše proizvode.

Implementacija koda

1. Početna stranica (app/page.js)

Ova stranica prikazuje popis proizvoda, od kojih svaki ima poveznicu koja otvara detalje proizvoda u modalu.

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

const products = [
 { id: '1', name: 'Prijenosno računalo' },
 { id: '2', name: 'Pametni telefon' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Popis proizvoda
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. Stranica s detaljima proizvoda (app/products/[id]/page.js)

Ova stranica prikazuje pune detalje o proizvodu. U stvarnoj aplikaciji, ovo bi dohvaćalo podatke s API-ja ili iz baze podataka. Važno je da pruža poveznicu natrag na originalni popis proizvoda.

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

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

 return (
 

 
Detalji proizvoda
 
ID proizvoda: {id}
 
Ovo je puna stranica s detaljima proizvoda.
 Natrag na popis proizvoda
 
 );
}

3. Sadržaj modala (app/products/@modal/[id]/page.js)

Ovo je ključni dio – Interception Route. Prikazuje sadržaj modala koristeći isti ID proizvoda. Primijetite `useParams` hook za pristup ID-u.

// 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 (
 

 

 
Modal proizvoda
 
ID proizvoda: {id}
 
Ovaj sadržaj se prikazuje unutar modala!
  history.back()}>Zatvori modal
 
 
 );
}

Napomena: Direktiva `'use client';` je neophodna za interaktivnost na klijentskoj strani, posebno pri korištenju `useParams`.

Stiliziranje (modal.module.css): Jednostavan CSS modul koristi se za osnovno stiliziranje modala. To je ključno za ispravno pozicioniranje modala.

/* 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; /* Osigurava da je na vrhu */
}

.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)

Ovaj layout omotava `@modal` rutu, osiguravajući da se prikazuje unutar konteksta proizvoda.

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

 {children}
 
 );
}

Kako to radi

1. Kada korisnik klikne na poveznicu proizvoda na početnoj stranici (npr. `/products/1`), Next.js to prepoznaje kao rutu unutar direktorija `products`.
2. Zbog `@modal` presretajuće rute, Next.js provjerava postoji li odgovarajuća ruta pod `@modal`.
3. Ako se pronađe podudaranje (npr. `/products/@modal/1`), Next.js prikazuje sadržaj iz `app/products/@modal/[id]/page.js` unutar trenutne stranice. URL u pregledniku ostaje `/products/1`.
4. Stilovi `modalOverlay` pozicioniraju modal povrh temeljnog sadržaja.
5. Klikom na "Zatvori modal" koristi se `history.back()` za povratak, što efektivno zatvara modal i vraća se na prethodno stanje.

Napredne tehnike Interception Routes

1. Rukovanje gumbom za povratak

Ključan aspekt implementacije modala je osiguravanje ispravnog ponašanja s gumbom za povratak u pregledniku. Kada korisnik otvori modal, a zatim klikne gumb za povratak, idealno bi bilo da se modal zatvori i da se korisnik vrati u prethodni kontekst, a ne da napusti aplikaciju.

Metoda `history.back()` korištena u primjeru postiže ovaj efekt navigacijom jedan korak unatrag u povijesti preglednika. Međutim, za složenije scenarije možda ćete morati implementirati prilagođeni rukovatelj gumbom za povratak koji uzima u obzir trenutno stanje usmjeravanja.

2. Dinamički sadržaj modala

U stvarnim aplikacijama, sadržaj modala će vjerojatno biti dinamičan, dohvaćen s API-ja ili iz baze podataka na temelju ID-a proizvoda. Možete koristiti `fetch` API ili biblioteku za dohvaćanje podataka poput SWR-a ili React Queryja unutar modalne komponente kako biste dohvatili potrebne podatke.

// 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}`); // Zamijenite sa svojim API endpointom
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Učitavanje...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... ostali detalji o proizvodu ... */}
  history.back()}>Zatvori modal
 
 );
}

3. Ugniježđeni modali

Interception Routes mogu se ugniježđivati kako bi se stvorili složeni tijekovi rada s modalima. Na primjer, korisnik može otvoriti modal s detaljima proizvoda, a zatim kliknuti gumb za otvaranje modala s povezanim proizvodom. To se može postići stvaranjem dodatnih presretajućih ruta unutar direktorija `@modal`.

4. Rukovanje 404 greškama

Razmotrite scenarij u kojem korisnik navigira na URL modala s nevažećim ID-om proizvoda (npr. `/products/@modal/nonexistent`). Trebali biste implementirati ispravno rukovanje greškama kako biste prikazali korisniku prijateljsku 404 stranicu ili ga preusmjerili na važeću stranicu proizvoda.

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

// ... (ostatak komponente)

 if (!product) {
 return 
Proizvod nije pronađen.
; // Ili preusmjerite na 404 stranicu
 }

// ... (ostatak komponente)

5. Overlay obrasci

Iako su se primjeri fokusirali na modale, Interception Routes se također mogu koristiti za overlaye. Umjesto centriranja sadržaja, overlay se može pojaviti kao bočna traka ili panel koji klizi sa strane ekrana. CSS stiliziranje bi bilo drugačije, ali logika usmjeravanja ostaje ista.

Primjeri iz stvarnog svijeta i slučajevi upotrebe

• E-trgovina: Prikazivanje detalja proizvoda, sažetaka košarice ili procesa naplate u modalu ili overlayu.
• Društvene mreže: Prikazivanje pregleda slika, odjeljaka za komentare ili korisničkih profila u modalu.
• Upravljanje dokumentima: Prikazivanje pregleda dokumenata, alata za uređivanje ili povijesti verzija u overlayu.
• Aplikacije za mapiranje: Prikazivanje detalja o lokaciji, točaka interesa ili informacija o ruti u overlayu.
• CRM sustavi: Prikazivanje detalja kontakta, dnevnika aktivnosti ili prodajnih prilika u modalu.

Primjer: Međunarodna platforma za e-trgovinu Zamislite globalnu stranicu za e-trgovinu. Kada korisnik klikne na proizvod, detalji se otvaraju u modalu. URL se mijenja u `/products/[product_id]`, omogućujući izravno povezivanje i SEO prednosti. Ako korisnik promijeni jezik na stranici modala (npr. s engleskog na španjolski), detalji proizvoda se dohvaćaju na odabranom jeziku, a sadržaj modala se besprijekorno ažurira. Nadalje, stranica bi mogla otkriti lokaciju korisnika (uz pristanak) i prikazati informacije o dostavi relevantne za njihovu regiju unutar modala.

Najbolje prakse za korištenje Interception Routes

• Neka sadržaj modala bude sažet: Izbjegavajte preopterećivanje modala s previše informacija. Usredotočite se na predstavljanje bitnih detalja.
• Osigurajte jasnu navigaciju: Pobrinite se da korisnici mogu lako zatvoriti modal i vratiti se u prethodni kontekst.
• Optimizirajte za mobilne uređaje: Dizajnirajte izgled modala tako da bude responzivan i jednostavan za korištenje na manjim ekranima.
• Temeljito testirajte: Testirajte ponašanje modala na različitim preglednicima i uređajima kako biste osigurali dosljedno iskustvo.
• Uzmite u obzir pristupačnost: Implementirajte odgovarajuće ARIA atribute i navigaciju tipkovnicom kako bi modal bio dostupan korisnicima s invaliditetom.

Alternative za Interception Routes

Iako Interception Routes nude moćno rješenje za modalne i overlay obrasce, mogu se razmotriti i drugi pristupi:

• Tradicionalno upravljanje stanjem: Korištenje Reactovog `useState` hook-a ili biblioteke za upravljanje stanjem poput Reduxa ili Zustanda za kontrolu vidljivosti modala. Ovo je jednostavnije za vrlo osnovne implementacije modala, ali postaje teže za upravljanje u većem opsegu.
• Biblioteke za modale trećih strana: Korištenje gotovih modalnih komponenti iz biblioteka poput React Modal ili Material UI. One mogu pružiti brzo rješenje, ali mogu ograničiti mogućnosti prilagodbe.
• Biblioteke za usmjeravanje na klijentskoj strani: Biblioteke poput React Routera mogu se koristiti za upravljanje usmjeravanjem na klijentskoj strani i vidljivošću modala.

Zaključak

Next.js Interception Routes pružaju robustan i elegantan način za implementaciju modalnih i overlay obrazaca u vašim web aplikacijama. Korištenjem ove moćne značajke možete stvoriti besprijekorna, SEO-prijateljska i korisnički orijentirana iskustva. Iako postoje alternativni pristupi, Interception Routes nude jedinstvenu kombinaciju prednosti, što ih čini vrijednim alatom u arsenalu svakog Next.js developera.

Dodatni resursi

• Next.js Interception Routes dokumentacija
• React dokumentacija