Přepsat do Next.js

[zoul]

Chtěli bychom zkusit přepsat web z Gatsbyho do Next.js, hlavně kvůli zjednodušení celkové architektury. Budu si sem k tomu odkládat poznámky.

Aktuální verze k vidění na https://next.cesko.digital.

TODO

• [x] Základní kostra nového webu
• [x] Zprovoznit jednotkové testy
• [x] Načítání dat z Airtable – projekty, eventy, etc.
• [x] Základní generování stránek – projekty, eventy, role, etc.
• [x] Podpora lokalizace
• [x] Statická metadata v head
• [x] Vizuál: Hlavní stránka
• [x] Vizuál: Partneři
• [x] Vizuál: Projekty (včetně detailu)
• [x] Vizuál: Portál dobrovolníka
• [x] Obnovit anglickou stránku
• [x] Vrátit logo
• [x] API funkce
• [x] Načítání lokálních dat – č.edu
• [x] Vizuál: č.edu
• [x] Google Analytics?
• [x] GitHub Action pro build a testy

Gotchas

• Vercel zatím nepodporuje Git LFS, takže kdybychom chtěli ukládat obrázky do repa, máme spíš smůlu. (Anebo musíme dělat nějaké taškařice kolem.)
• Komponenta next/image je výborný nápad, ale v praxi má docela potíže se stylováním, tak bych prozatím použil/doplnil náš existující toolchain pro zmenšování fotek a obrázků.
• Props jsou háklivé na undefined klíče.
• Props jsou háklivé na serializaci (WTF?).

Výstupní poznámky

Odškrtnutý checkbox tady neznamená nutně, že je daná věc implementovaná; větší část se přeměnila na samostatný ticket.

• [x] Kromě statického seznamu odkazů (common-links) by se nám hodil i jednoduchý router, například pro odkázání na projekt?
• [x] Vyřešit varování ohledně peer deps (ideálně chceme udržovat čistý build bez varování)
• [x] Otagovat původní verzi
• [x] Vrátit favikonu
• [x] Přidat e2e testy přes Playwright (dokumentace)
• [x] Domyslet kešování API funkcí
• [x] Zmínit v dokumentaci .env.local
• [x] Extrahovat řetězce do lokalizačního souboru, zejména u Portálu dobrovolníka
• [x] Vrátit do hry tagy
• [x] Sjednotit názvy URL (/projekty vs. /opportunities)
• [x] Načítat data z produkčního webu, když není token do Airtable
• [x] Dořešit rendering Markdownu (teď generujeme nevalidní markup)
• [x] Dořešit v konzoli chybu v hydrataci komponent

Seznam závislostí ke zbavení se

Tohle používáme, ale třeba jen na málo místech nebo jen kvůli jedné věci, tak nemohli bychom se jich zbavit?

• polished
• formik

Poznámky k architektuře

• Nebojte se psát delší soubory. Mít každou drobnost v samostatném souboru je čistě režie navíc. Lze i zobecnit – míra „procesů“ (abstrakce, dělení do souborů, dělení do funkcí, …) musí odpovídat velikosti řešeného problému. Pokud zakládáte nový soubor kvůli čtyřem řádkům kódu, je slušná šance, že děláte něco špatně.
• Dvakrát se zamyslete, než přidáte novou závislost. Třikrát, pokud má sama nějaké další závislosti. Pokud jde o vyloženě větší závislost (React, GraphQL, …), domluvme se předem, jestli je to opravdu nutné. Pokud jde místo další závislosti napsat funkce o 10–20 řádcích, je to výrazně lepší. Velký počet závislostí zpomaluje build a celkově zhoršuje ergonomii práce na projektu.

[zoul]

Odložím si sem z hlavy: Next kvůli architektuře vyžaduje, aby všechny props byly serializovatelné do JSON:

We need to serialize the result of getStaticProps/getServerSideProps because it has to be sent to the browser to do hydration.

To je velká pruda, pokud chceme používat například hodnoty typu Date. Ty kolečko serializace/deserializace (JSON.parse(JSON.stringify(data))) nepřežijou, skončí jako string. Zatím by mně přišlo ideální, kdyby Next měl nějakou podporu pro serializaci a deserializaci těch props, což zřejmě nemá. Knihovna superjson nabízí nějaký transparentní workaround, na který by stálo za to mrknout (tady?).

K deserializaci datumů viz též Stack Overflow.

[zoul]

Mergnuto, ale ještě nechám otevřené, ať můžu zapracovat ty výstupní poznámky.