Dynamický routing v Next.js 14 s TypeScriptem

Dynamický routing v Next.js 14

Dynamické směrování je jednou z nejmocnějších funkcí frameworku Next.js, zvláště v kombinaci s App Directory a TypeScript. Tato funkce umožňuje vytvářet flexibilní a škálovatelné webové aplikace. Tento článek vám krok za krokem ukáže, jak dynamické směrování v Next.js 14 funguje, a jak jej můžete efektivně využít ve svých projektech.

Co je dynamický routing a proč je důležitý?

Dynamické směrování umožňuje vytvářet stránky, které jsou generovány na základě dynamických parametrů v URL. Například pokud máte stránku produktů, každý produkt může mít svou vlastní URL, jako například '/product/123', kde '123' je ID produktu. S Next.js je možné tyto dynamické cesty snadno vytvořit a spravovat.

Struktura složek v App Directory

V Next.js 14 s App Directory je struktura složek mírně odlišná od starších verzí. Složka app nahrazuje tradiční složku pages. Tato složka umožňuje organizovat komponenty a stránky podle funkcionality a ne pouze podle URL. Pojďme se podívat, jak vypadá základní struktura pro dynamický routing.

/app
    /blog
        [slug]
            page.tsx
    /product
        [id]
            page.tsx
    layout.tsx

V tomto příkladu máme složky blog a product uvnitř složky app. Každá složka obsahuje soubor page.tsx, který reprezentuje dynamickou stránku. Dynamické části URL jsou uzavřeny v hranatých závorkách, jako například [slug] nebo [id], což značí, že se jedná o dynamický segment URL.

Vytváření dynamických stránek pomocí useRouter

Jedním z hlavních nástrojů pro práci s dynamickým routingem v Next.js je hook useRouter. Tento hook vám umožňuje přistupovat k parametrům v URL a podle nich dynamicky vykreslovat obsah na stránce. Následující příklad ukazuje, jak můžete použít useRouter k zobrazení dynamického obsahu.

// /app/blog/[slug]/page.tsx

import { useRouter } from 'next/router';
import { NextPage } from 'next';

const BlogPost: NextPage = () => {
    const router = useRouter();
    const { slug } = router.query;

    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            <p>Tento článek je o {slug}.</p>
        </div>
    );
};

export default BlogPost;

V tomto příkladu používáme hook useRouter pro přístup k parametru slug z URL. Tento parametr můžeme poté použít k načtení příslušných dat nebo k dynamickému zobrazení obsahu na stránce.

Práce s více parametry v URL

Next.js umožňuje pracovat s více parametry v URL, což je užitečné pro složitější stránky. Například můžeme mít URL ve formátu '/product/category/123', kde 'category' je kategorie produktu a '123' je ID produktu. Tímto způsobem můžete vytvářet dynamické stránky pro produkty podle kategorií.

// /app/product/[category]/[id]/page.tsx

import { useRouter } from 'next/router';
import { NextPage } from 'next';

const ProductPage: NextPage = () => {
    const router = useRouter();
    const { category, id } = router.query;

    return (
        <div>
            <h1>Produkt z kategorie: {category}</h1>
            <p>ID produktu: {id}</p>
        </div>
    );
};

export default ProductPage;

Tento příklad ukazuje, jak jednoduše lze přistupovat k více parametrům a používat je na stránce. Toto dynamické směrování je klíčové pro aplikace, které mají komplexní strukturu URL.

Načítání dat na straně serveru s asynchronními komponentami

V Next.js 14 můžete načítat data přímo v asynchronních komponentách bez nutnosti použití metod jako getStaticProps nebo getServerSideProps. Tento přístup zjednodušuje celý proces načítání dat a integrace s logikou serverových komponent. Umožňuje také lepší optimalizaci výkonu aplikace.

// /app/blog/[slug]/page.tsx

import { notFound } from 'next/navigation';

async function fetchBlogPost(slug: string) {
    const res = await fetch(`https://api.example.com/posts/${slug}`);
    if (!res.ok) {
        return notFound();
    }
    return res.json();
}

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
    const post = await fetchBlogPost(params.slug);

    if (!post) {
        return notFound();
    }

    return (
        <article>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </article>
    );
}

V tomto příkladu vidíte, jak můžete načítat data na základě dynamického parametru slug a zobrazit je na stránce. Díky tomu, že je funkce fetch() volána přímo v rámci komponenty, je celý proces zjednodušený a více propojený s logikou renderování. Tento přístup také umožňuje snadnější správu stavů jako je například zobrazení chyb nebo načítání.

Použití fallbacku pro dynamicky generované stránky

Pokud vaše aplikace obsahuje mnoho dynamických stránek, může být užitečné nastavit fallback pro neznámé cesty. To umožní načíst obsah dynamicky, pokud není k dispozici staticky generovaná stránka. Tento přístup je ideální pro stránky, kde data nejsou předem známa nebo se často mění.

// /app/blog/[slug]/page.tsx

export async function getStaticPaths() {
    return {
        paths: [], // Dynamically handled
        fallback: 'blocking',
    };
}

Tento přístup umožňuje, aby se nové stránky generovaly při prvním načtení a byly k dispozici pro všechny další návštěvníky. Tím zajistíte, že vaše aplikace bude reagovat rychle i při dynamickém obsahu.

Optimalizace dynamického směrování pro výkon

Při práci s dynamickým směrováním je důležité zvážit také výkon aplikace. Next.js poskytuje několik nástrojů a technik, které vám umožní optimalizovat načítání dat a zpracování dynamických stránek. Mezi ně patří použití Incremental Static Regeneration (ISR), což umožňuje pravidelně regenerovat stránky na základě nových dat, aniž by bylo nutné aplikaci znovu nasazovat.

Další technikou je využití cachování a CDN (Content Delivery Network), které mohou výrazně zrychlit doručování statického obsahu. Dynamické směrování vám umožňuje vytvářet složité a interaktivní aplikace, ale s těmito optimalizacemi můžete zajistit, že vaše aplikace bude nejen funkční, ale také rychlá a škálovatelná.