Next.js verze 13: Střet s realitou
Je nejvyšší čas rozebrat dopodrobna Next.js ve verzi 13. Tato verze vyšla na konci října roku 2022 a my se na ni můžeme nyní podívat s odstupem několika měsíců a reálného vyzkoušení.
Na začátek se hodí zmínit, že používání Next.js 13 je podmíněno upgradem na React.js 18 a dále vyžaduje alespoň Node.js 14. Tato verze také upouští od podpory prohlížeče Internet Explorer 11.
Na co se dneska podíváme?
- Nová “tajemná” app složka
- Turbopack, nová budoucnost buildu?
- Vylepšený next/image
- Nový @next/font
- Vylepšený next/link
App directory, největší změna v Next.js verzi 13
Next.js kompletně přepracováná způsob, jakým v něm vytváříme stránky a k tomu slouží právě nová složka app. V Nextím configu je to zatím jako experimentální funkce, takže si ji musíte ručně zapnout. Je kompatibilní s aktuální pages metodou tvorby stránek, takže naštěstí se dá migrovat i postupně.
Uvnitř app složky se nachází několik částí, z kterých se skládají výsledné stránky. V rootu adresáře je hlavní head.tsx, layout.tsx a page.tsx.
V ukázce níže jsou About a Dashboard další typové stránky, které obsahují vlastní soubory. Například head.tsx obsahuje hlavičku, která se generuje pro konkrétní stránku a nahrazuje dříve používanou next/head. Každá stránka musí mít tak hlavičku vlastní a úplnou.
K tomuto tématu se určitě brzy vrátíme. Je totiž tak rozsáhlé, že o něm chystám další přednášku. 🙂
(Zatím) marná snaha o optimalizaci buildu
Turbopack je úplně nová věc, která má v Next.js nahradit Webpack. Cílem by mělo být zrychlení buildu a snížení procesorového času. Na této funkcionalitě mimo jiné pracuje i Tobias Koppers, což je původní autor Webpacku.
V aktuální verzi ale není Turbopack příliš použitelný, nepodporuje ani vlastní Next.js moduly, zdaleka nedosahuje takového zrychlení buildu, jaké vývojáři slíbili a neumí ani produkční režim.
Video: https://youtu.be/4b_mEpyur9A
Vylepšený Next/image
U této funkcionality došlo k jedné změně, která je velmi prospěšná. Dříve se obrázek generoval zabalený do různých spanů, což bylo nepřehledné a problematické na přestylování. Nyní next/image generuje pouze <img> tag, navíc s nativním lazy loadingem.
Next.js a jeho ambice pomoct vývojářům s fonty
Úplně novou vlastností je @next/font, prozatím v Beta verzi. Aktuálně si jej musíte nainstalovat samostatně, jako další závislost. Tato komponenta podporuje jak Google Fonty, tak jakékoliv self-hosted fonty a kromě jiného vytváří automatické preloady na použité řezy písma. Vývojáři v Nextu mysleli i na přidání důležitých CSS vlastností jako size-adjust, nebo font-display.
Malá změna, která znamená velký rozdíl
Dříve bylo potřeba next/link používat s anchor elementem, což od nové verze není potřeba. Pokud bychom chtěli uvnitř linku použít vlastní komponentu, která vrací <a> element, tak to je také možné. Jenom je potřeba na link přidat atribut legacyBehavior.
Video: https://youtu.be/4b_mEpyur9A?t=122
O této Next.js verzi by se dalo mluvit daleko více a podrobněji, což jsem také udělal během své přednášky v rámci meetupu Frontendisti.cz.
