Next.js je populární framework založený na Reactu, který umožňuje vytvářet aplikace s renderováním na straně serveru (SSR) a generováním statických stránek (SSG). Kód aplikace je psán v TypeScriptu. Next.js si získal popularitu díky snadnému vytváření aplikací, které využívají server-side rendering, a také díky podpoře statické generace stránek (SSG), která umožňuje vytvářet statické verze webů, které lze uživatelům rychle doručit. Nicméně u některých projektů může být vhodné prozkoumat alternativu k Next.js.
Nedávno jsem vytvořil seznam vývojářských blogů pomocí tohoto frameworku a musím přiznat, že je to skvělé řešení, zejména pokud jde o nasazení aplikace na platformu vercel.com. Proces nasazení byl rychlý a intuitivní, což činí Next.js velmi atraktivním pro takové projekty. Kromě toho bylo vytvoření tohoto webu testem, zda je Next.js optimálním řešením pro můj další projekt, který bude dostupný ve většině světových jazyků.
I když je Next.js výkonný nástroj, není vždy optimálním řešením pro všechny projekty. Proto jsem začal zvažovat, jaká alternativa k Next.js by mohla být nejvhodnější pro mé projekty. Například framework automaticky přidává do HTML kódu další data, jako jsou JSON soubory, které obsahují informace potřebné pro obnovení stavu aplikace v prohlížeči. Tento proces, ačkoli je v některých případech užitečný, může vést k odesílání více dat, než je nutné.
Například při vytváření vícejazyčného webu Next.js často odesílá všechny překlady (pro více jazyků) do prohlížeče, i když uživatel zobrazuje pouze jednu jazykovou verzi stránky. Next.js umisťuje tato data do zdrojového kódu stránky jako JSON soubory, aby umožnil okamžité přepínání jazyků nebo obnovení stavu aplikace na straně klienta. Problém nastává, když web podporuje více jazyků — všechny překlady mohou být odeslány do prohlížeče, i když uživatel sleduje pouze anglickou verzi stránky.
Představme si například, že váš web podporuje 10 jazyků. V takovém případě může Next.js generovat JSON soubory, které obsahují všechny překlady, i ty, které se aktuálně nezobrazují. To vede k přenosu nadbytečných dat, čímž se zvyšuje velikost stránky a tedy i doba načítání. Uživatel, který navštíví stránku v angličtině, nepotřebuje data pro francouzštinu, němčinu nebo japonštinu, přesto jsou tato data odesílána. Právě zde může zvážení alternativy k Next.js pomoci vyhnout se těmto neefektivnostem a zajistit, že se doručují pouze nezbytná data.
To může mít významný dopad na výkon webu, zejména pro uživatele s pomalejším internetovým připojením nebo používající mobilní zařízení. Větší objem dat ke stažení znamená delší dobu načítání, což negativně ovlivňuje uživatelský zážitek (UX) i pozici webu ve výsledcích vyhledávání (SEO).
Pokud tedy chcete mít plnou kontrolu nad tím, jaká data se odesílají a jak se stránka generuje, stojí za to zvážit alternativní řešení k Next.js, jako je NestJS v kombinaci s Nunjucks nebo jiným šablonovacím systémem. V tomto přístupu se vykreslování provádí zcela na straně serveru a do prohlížeče se odesílají pouze data potřebná pro aktuálně zobrazenou verzi stránky. Tímto způsobem se vyhnete problému nadbytečných dat a každá jazyková verze webu bude načítána optimálně a rychle.
Jedním z takových přístupů je kombinace NestJS s Nunjucks a Tailwind CSS, která nabízí větší flexibilitu a kontrolu nad procesem generování stránek. V tomto článku si vysvětlíme, proč stojí za to zvážit tyto technologie při tvorbě globálních vícejazyčných projektů, které mohou generovat vysokou návštěvnost. Díky kombinaci Nunjucks a Tailwind CSS lze vytvářet rychlé, flexibilní a škálovatelné aplikace, které připomínají klasická serverová řešení (podobná těm známým z PHP), ale s moderními nástroji a větší kontrolou nad výkonem.
Pokud jste někdy používali PHP pro vytváření webových stránek, pravděpodobně si pamatujete, jak fungoval proces vykreslování stránek. PHP skripty dynamicky generují HTML na serveru a odesílají jej do prohlížeče uživatele. Podobně NestJS s Nunjucks umožňuje vykreslovat HTML stránky na serveru na základě dat, což poskytuje větší flexibilitu a kontrolu nad tím, co a kdy se generuje.
NestJS je moderní framework pro Node.js, navržený pro tvorbu škálovatelných a efektivních aplikací na straně serveru. Je založen na modulární architektuře, která usnadňuje správu složitých projektů, podobně jako backendové frameworky typu Spring v Javě nebo ASP.NET v ekosystému Microsoftu. NestJS používá TypeScript a nabízí vestavěnou podporu pro server-side rendering, díky čemuž je vynikající volbou pro vytváření aplikací založených na API, webových aplikací nebo backendových systémů.
Pokud jde o vykreslování HTML stránek, NestJS spolupracuje s různými šablonovacími systémy, z nichž jedním z nejsilnějších a nejflexibilnějších je Nunjucks. Nunjucks je univerzální šablonovací engine inspirovaný Jinja2 z Pythonu, který nabízí pokročilé funkce jako dědění šablon, makra, smyčky, podmínky a dynamické vkládání dat. Pomocí Nunjucks můžete snadno spravovat složité HTML struktury, vykreslovat dynamický obsah a řídit logiku zobrazení prvků na stránce. Je to ideální řešení pro tvorbu globálních aplikací, které potřebují pracovat s mnoha komponentami a dynamickým obsahem v různých jazycích.
Pokud se vám NestJS s Nunjucks zdá jako vhodné řešení a lepší alternativa k Next.js, stojí za to vědět, že existuje mnoho dalších šablonovacích systémů. Enginy jako Pug, Handlebars, Mustache nebo EJS nabízejí různé funkce a přístupy k server-side renderingu. Výběr správného engine závisí na složitosti projektu, struktuře šablon a osobních preferencích syntaxe.
Next.js automatizuje mnoho aspektů server-side renderingu, což může být u některých projektů omezující. S NestJS a Nunjucks máte plnou kontrolu nad každým krokem procesu vykreslování — od přístupu k databázi až po generování finálního HTML. Tímto způsobem můžete stránky optimalizovat přesně podle svých potřeb.
V Next.js (SSR i SSG) se při generování stránek kromě statického HTML kódu přidávají do zdrojového kódu i data ve formě JSON souborů. Tato data jsou potřebná k obnovení stavu aplikace na straně klienta, což je typické pro React aplikace. Tento přístup však může vést k odesílání více dat, než je nutné, což stránku zpomaluje. Větší množství přenášených dat znamená nejen delší dobu načítání, ale také vyšší náklady, pokud používáte cloudové služby jako Azure, AWS nebo Google Cloud. V závislosti na zvoleném řešení se za přenos dat často účtuje poplatek, zejména při vysoké návštěvnosti webu.
S Nunjucks v NestJS generujete pouze to, co je skutečně potřeba v daném okamžiku, čímž minimalizujete množství přenášených dat. Tímto způsobem nejen zlepšujete výkon stránek, ale také snižujete náklady na přenos dat, což může v dlouhodobém horizontu přinést významné úspory, zejména u velkých aplikací nebo webů s vysokou návštěvností.
Po představení výhod kombinace NestJS s Nunjucks a Tailwind CSS se nyní přesuneme k praktické části. Níže najdete kompletní krok za krokem průvodce, který vás provede nastavením prostředí, instalací potřebných balíčků a přípravou struktury projektu.
Nainstalujte globálně NestJS CLI, pokud jej ještě nemáte:
Angular
AWS
Azure
Blockchain
C#
CSS
Docker
Git
HTML
Java
JavaScript
Kotlin
MongoDB
Node.js
PHP
Python
R
React
RxJS
SQL
Swift
TypeScript
Vue.js
npm i -g @nestjs/cliVytvořte nový projekt NestJS:
nest new name-of-your-projectNainstalujte šablonovací engine Nunjucks:
npm install nunjucksNastavte Nunjucks jako view engine v souboru main.ts:
import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { NestExpressApplication } from '@nestjs/platform-express'; async function bootstrap() { const app = await NestFactory.create<NestExpressApplication>(AppModule); // Nastavení adresáře pro šablony a Nunjucks engine nunjucks.configure('views', { autoescape: true, express: app, watch: true, }); app.setViewEngine('njk'); // Servírování statických souborů z adresáře 'public' app.useStaticAssets(join(__dirname, '..', 'public')); await app.listen(3000); } bootstrap();Nainstalujte Tailwind CSS a potřebné závislosti:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss initNakonfigurujte soubor tailwind.config.js:
module.exports = { content: [ './views/**/*.njk', './public/**/*.js', ], theme: { extend: {}, }, plugins: [], };Vytvořte soubor Tailwind CSS ve složce src/css/, například src/css/styles.css, a přidejte direktivy Tailwind:
@tailwind base; @tailwind components; @tailwind utilities;Nakonfigurujte PostCSS vytvořením souboru postcss.config.js:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };Vytvořte složku views. Do souborů Nunjucks přidejte odkaz na vygenerovaný CSS soubor (například ve views/index.njk):
<link href=\"/styles.css\" rel=\"stylesheet\">Zpracujte Tailwind pro generování finálního CSS souboru:
npx tailwindcss -o public/styles.cssV souboru kontroleru (např. app.controller.ts) vytvořte metodu, která vrátí pohled Nunjucks. Zde je příklad kódu:
import { Controller, Get, Render } from '@nestjs/common'; @Controller() export class AppController { @Get() @Render('index') // Odkazuje na soubor 'index.njk' ve složce 'views' getHome() { return { title: 'Domovská stránka' }; // Data předaná do šablony Nunjucks } }V souboru index.njk můžete přidat jednoduchý HTML kód pro zobrazení domovské stránky:
<!DOCTYPE html> <html lang=\"cs\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"/css/styles.css\" rel=\"stylesheet\"> <title>{{ title }}</title> </head> <body> <h1>Ahoj!</h1> </body> </html>Spusťte aplikaci a přejděte na domovskou stránku (http://localhost:3000/). Měli byste vidět stránku s obsahem souboru index.njk.
Shrnutí:
views.index.njk a její zobrazení řídí kontroler.Pokud chcete, můžete tuto šablonu rozšířit o další sekce a komponenty a plně využít možnosti Tailwind CSS pro stylování. Věřím, že kombinace NestJS, Nunjucks a Tailwind CSS je vynikající alternativou k Next.js, zejména pro projekty, které vyžadují plnou kontrolu nad procesem vykreslování a minimalizaci přenášených dat.
V dalším článku (nebo aktualizací tohoto) ukážu, jak aplikaci rozšířit o integraci s MongoDB. To nám umožní spravovat data v databázi a aplikace se stane plně dynamickou a připravenou pro větší projekty. Také ukážu, jak snadno lze integrovat MongoDB s NestJS pomocí modulu @nestjs/mongoose a jak vytvořit CRUD (Create, Read, Update, Delete) operace pro pokročilejší aplikace.
Sledujte další články, abyste se dozvěděli více!
Alternativa k Next.js (SSR)? Vyzkoušej NestJS + Nunjucks + Tailwind CSS
Copyright © 2025 IT Flashcards
