Tomuto řešení věříme. A tak jsme o něm mluvili na Barcampu

Hlavu a tělo spojuje krk

A jak se tedy data z administrace WordPressu dostávají na frontend v Next.js? Náš spojovací most je REST API neboli JSON endpointy.

Jednoduše řečeno – každá stránka, článek, obrázek nebo metapopis má svoji strukturovanou podobu v podobě JSON endpointů. Next.js si pak z těchto endpointů bere přesně to, co potřebuje.

Je to rychlé, přehledné a perfektně připravené na další růst a úpravy – třeba přidání vícejazyčnosti, mobilní aplikace nebo headless e-shopu.

Jak z WordPressu udělat headless redakční systém?

Na internetu najdete spoustu návodů, jak na headless WordPress – v něčem se shodují, jinde si protiřečí. My vám univerzální recept nedáme. Proč? Protože žádný není. Každý projekt je jiný a my se u každého rádi pouštíme do nových řešení a neustále zkoušíme, co jde udělat líp.

Ale i tak pro vás máme tipy, které vám můžou pomoct vykročit správným směrem.

Náš výběr 10 nejvíce užitečných f(ant)astických rozšíření headless WordPressu:

Základní čistý WordPress a libovolná šablona z rodiny Twenty je dobrý startovací bod.
Pro vlastní funkce a hooky vám pomůže plugin Code Snippet díky jednoduché a přehledné možnosti strukturovat jednotlivé snippety, které jsou pro headless klíčové.
Pro jednoduchou správu obsahu stránek padla volba na osvědčený Advanced Custom Field (ACF) PRO, který podporuje jak REST API, tak případný GraphQL.
WP REST Cache je dobrý pomocník, když máte hodně stránek a článků pro cachování endpointů, čímž minimalizuje prodlevu pro načtení dat mezi WordPressem a Nextem.
Bez SEO pluginu by to také nebylo ono. Ačkoliv máme oblíbený Rank Math, pro headless se nám více osvědčil konkurenční Yoast SEO, který doplňuje data přímo do standardních endpointů.
WP STAGING nám zase pomáhá vytvářet pravidelné či rychlé průběžné zálohy celého backendu, zároveň umožňuje vytváření testovacích verzí na klik.
Zabezpečení administrace je optimální řešit například pomocí omezení vstupu přes konkrétní IP adresy. Pokud to možné není, tak alespoň vsaďte na osvědčený WordFence a nezapomeňte na dvoufázové ověření.
Ačkoliv je možné libovolný obsah do administrace WordPressu plnit ručně, často si pomáháme také různými jednorázovými či automatickými importy. To přichází na řadu WP All Import.
WordPress můžete provozovat na běžném sdíleném hostingu, avšak pro lepší rychlost a blízkost k jeho Next.js frontendu jsme vsadili na kontejnerový provoz pomocí Dockeru na VPS od Hostingeru.
Směřování domény do kontejnerů WordPressu, ale i frontendu v Next.js, řešíme pomocí Nginx Proxy Manageru, ve kterém vyřešíte i SSL certifikát přes Let’s Encrypt pro HTTPS spojení.

Čím dál vylepšujeme Next.js?

Ačkoliv samotný Next.js už v základu poskytuje našim kóderům dost možností pro tvorbu samotného frontendu dle předpřipravených grafických návrhů, využíváme také řadu knihoven, frameworků i jiných rozšíření, které nám šetří čas a dělají celkový výsledek ještě více (TOP).

Tady je náš výběr 8 nejvíce užitečných rozšíření nástrojů pro práci s React a Next.js frameworkem:

Tailwind CSS (utility-first framework), který nám pomáhá snadno a rychle stylovat komponenty přímo ve značkách HTML/JSX pomocí předdefinovaných tříd. Nemusíme tak psát vlastní CSS soubory, což urychluje vývoj a udržuje konzistentní vzhled webové prezentace.
Knihovna komponent shadcn/ui nebo třeba Prism UI jsou klíčové sbírky znovupoužitelných UI komponent postavených na Tailwind CSS, díky kterým nemusíme nutně psát všechny základní UI prvky od nuly. A jsme zase u té časové úspory…
Mezi další využitelné knihovny patří také třeba Fancy components, Magic UI nebo třeba Hover.dev, které plní podobnou funkci. Jsou však designově už více předpřipravené a komplexnější, než zmíněné UI komponenty.
(framer) Motion pak patří mezi klíčovou animační knihovnu, která je vhodná pro vytváření plynulých a interaktivních animací v Reactu. Nabízí širokou škálu animací od základních přechodů a transformací po složité orchestrace a fyzikální simulace či animace na základě pohybu myši, dotyku apod.
Různé druhý formulářů je možné pohodlně vytvářet například pomocí React Hook Form, které je vhodné doplnit také o různé scénáře validací (ať už server-side či client-side) s využitím knihovny Yup.
K případné asistenci za využití AI při vytváření jednotlivých komponent či jejich úpravami je vhodné využívat nástroj od Vercelu v0, který si poradí jak s různými druhy promptování, tak se vstupem například z Figmy.
O chlup lepší je pak ještě využívání samotného IDE Cursor AI, který funguje jako editor kódu s umělou inteligencí využívající modely GPT, Claude, Gemini apod. Je postavený na základech VS Code od Microsoftu. Pomáhá psát kód rychleji díky chytrému doplňování a generování kódu z promptů. Taky kontroluje celkovou podobu kódu v rámci celého projektu.
Stejně jako headless WordPress, i samotný frontend webu nebo aplikace běží v kontejnerizovaném prostředí za využití Dockeru na VPS od Hostingeru.

Zní to jako něco pro vás?

Láká vás mít web, který kombinuje výhody headless WordPressu a moderního React frontendu? Chcete si pohodlně spravovat obsah ve známé administraci a přitom neřešit žádná omezení ve vzhledu ani funkcích?

Tak napište na info@antstudio.cz nebo +420 774 828 242.

A pokud byste na podobných výzvách chtěli pracovat s námi, mrkněte na naší pozici frontend developera nebo full-stack developera. Třeba příští článek budeme psát společně.

Inspirativní myšlenky, které si svět zaslouží vidět

Mají ty PPCčka ještě smysl?

Web není galerie. Je to data-driven stroj na byznys.

(další články)

Konverze: Vyplatí se počkat

Meta Andromeda – největší změna v Meta Ads za poslední roky?

Headless WordPress s Next.js pro (WOW) weby