Vinext 1.0: Zvýšení přenositelnosti Next.js aplikací s využitím Vite

Vinext 1.0 představuje významný krok vpřed v nasazování Next.js aplikací na jakoukoli webovou platformu, přinášející vylepšenou kompatibilitu a stabilitu. Umožňuje developerům snadno převést stávající Next.js projekty a využít jejich plný potenciál napříč různými runtime prostředími.

Vinext 1.0: Zvýšení přenositelnosti Next.js aplikací s využitím Vite

Když byl projekt Vinext představen, byl výsledkem ambiciózního experimentu, který měl za cíl ověřit, jak daleko se lze dostat s replikací frameworku Next.js s využitím Vite. Během sedmi měsíců od tohoto experimentu se Vinext rozvinul ve framework, který je dnes spolehlivě nasazován v produkčním prostředí pro náročné dynamické aplikace s vysokou návštěvností.

Dnes oznamujeme vydání Vinextu 1.0, což je další milník na cestě k umožnění nasazení Next.js aplikací kdekoli. Vinext umožňuje vzít jakoukoli Next.js aplikaci, ať už byla postavena s Pages nebo App Routerem, a učinit ji přenositelnou pro nasazení na jakoukoli webovou platformu, včetně platforem jako jsou Cloudflare Workers, Netlify nebo AWS Lambda. Verze 1.0 přináší rozsáhlá vylepšení v oblasti kompatibility, stability a chování cache, a připravuje projekt na dlouhodobou udržitelnost. Nikdy nebyla lepší doba pro převod vašeho Next.js projektu na Vinext, stačí spustit příkazy `npx vinext check` a `npx vinext init`.

Při svém prvním vydání byl Vinext slibný, ale neúplný. Od té doby jsme intenzivně pracovali na zlepšení kompatibility s App Routerem a rozšíření podpory na Pages Router aplikace, u nichž jsme zjistili, že mají mnoho dlouholetých uživatelů s velkými a komplexními projekty, které je obtížné migrovat. Naším cílem nebylo vytvořit nástroj fungující pouze pro uživatele nejnovějších funkcí App Routeru.

Zaměřili jsme se na podporu obou typů routerů a pečlivě sledovali testovací kompatibilitu, která u většiny důležitých funkcí požadovaných uživateli přesahuje 99 %. Toto zlepšení bylo poháněno aktivní komunitou kolem projektu na GitHubu. Ihned po spuštění Vinextu komunita testovala širokou škálu aplikací a identifikovala mezery. Díky jejich pečlivosti jsme objevili výzvy, které nebyly okamžitě zjevné v testovacím pokrytí. Vinext se musí chovat přesně tak, jak se chová Next.js. Nestačí imitovat funkce se stejným názvem; například vytvoření alternativy pro `import { revalidatePath }` je jednoduché, ale obtíž spočívá v zajištění, že správně ovlivní vykreslené stránky, položky cache a budoucí požadavky. Sledování požadavků v aplikaci, aby Vinext reagoval očekávaným způsobem – a replikace nejen API, ale i chování celého mechanismu – bylo zdaleka největší výzvou.

Jakmile opravíme problémy a přidáme nové funkce, je zásadní, abychom nezpůsobili regrese, zejména pokud Next.js provede změnu. Proto jsme také vybudovali rozsáhlou testovací sadu: tisíce cílených testů pokrývajících základní chování frameworku napříč oběma routery, vývojovým a produkčním serverem a cílovými nasazovacími prostředími Node.js a Cloudflare Workers. Každou noc také spouštíme end-to-end testovací sadu Next.js proti Vinextu, což nám poskytuje neustále aktuální pohled na naši kompatibilitu a zajišťuje, že si okamžitě všimneme regresí vyplývajících ze sloučených změn. Kromě automatizovaného testování spolupracujeme přímo s velkými zákazníky, kteří Vinext používají v produkci, abychom zajistili, že se nesetkávají s problémy.

Nejjasnější zprávy, které jsme obdrželi od uživatelů Vinextu, naznačovaly, že určité funkce Next.js jsou pro framework klíčové a že Vinext ve skutečnosti nepotřebuje implementovat vše, co Next.js v posledních verzích vydal, aby byl pro ně mimořádně užitečný. Zaměřili jsme se proto na lepší podporu tam, kde ji skutečně potřebujete:

App Router, Pages Router a hybridní aplikace: Zpětná vazba od uživatelů potvrdila, že Pages Router je stále důležitý a migrace nejsou jednoduchý krok. Vinext proto podporuje obě cesty routování, včetně React Server Components, Server Actions, API rout, route handlerů, middleware a navigace na straně klienta.

Kompletní životní cyklus stránky: Stránky mohou být vykreslovány mnoha různými způsoby: na serveru, předrenderovány během sestavení, exportovány jako statické soubory nebo cachovány s Incremental Static Regeneration (ISR) na úrovni stránky. Zajistili jsme, že revalidace na pozadí a na vyžádání funguje s jakýmkoli výstupem.

Cache: Vinext má sadu sdílených funkcí cache napříč App a Pages Routerem a podporovanými runtimy. Poskytujeme další podporu pro využití cache specifické pro danou platformu.

Observability: Vinext poskytuje sledování kompatibilní s Next.js napříč oběma routery, takže stávající nastavení OpenTelemetry a Sentry nadále fungují. Na některých platformách se také trasování integruje s nativními nástroji pro observability.

Dominik Medal

Potřebujete pomoc s webem nebo aplikací?

Ozvěte se mi — do 24 hodin se Vám ozvu zpět s návrhem dalšího postupu.

Kompatibilita s ekosystémem Next.js: Vinext implementuje veřejné rozhraní `next/*` a podporuje běžné vzory Next.js pro použití autentizace, MDX, optimalizace obrázků, písem, metadat, proměnných prostředí a mnoho dalšího.

Plnohodnotná podpora runtime pro Workers: Ačkoli Vinext může běžet kdekoli, serverový kód může běžet v runtime prostředí Workers během vývoje i produkce, s přímým přístupem k bindingům, jako je optimalizace obrázků.

Součástí frameworku jsme také učinili migraci: stačí dva příkazy k ověření kompatibility vaší Next.js instalace a provedených úprav, a k nastavení konfigurace pro Vite a nasazení, přičemž se zachová celá původní struktura projektu Next.js.

Když jsme hovořili s týmy o tom, jaké funkce jsou pro ně důležité, něco se ukázalo. Next.js 16 zaujal postoj, že Cache Components jsou důležitou součástí budoucnosti frameworku, nicméně většina týmů, se kterými jsme mluvili, je nepoužívala a nepovažovala jejich podporu za předpoklad pro přechod. Proto má dnes Vinext omezenou podporu pro direktivu „use cache“, která pohání Cache Components, a ačkoli budeme vylepšovat kompatibilitu i v této oblasti, mnohem více se zaměřujeme na výše uvedené klíčové priority.

Dominik Medal

Popovídejme si o Vašem projektu

Napište mi, co potřebujete, a společně určíme nejlepší postup.

Už nescrollujte, volejte

+420 735 505 585