Jak fungují Markdown Pages

Kompletní vysvětlení jak generování stránek z Markdown souborů funguje.

Princip

Každý .md soubor ve složce src/content/pages/ se automaticky stane stránkou na webu. Nemusíte psát žádný React kód — stačí vytvořit soubor a napsat text.

Jak to technicky funguje

1. Server Component čte souborový systém

Stránka /demos/markdown-pages je Server Component — běží pouze na serveru. To znamená, že může přímo číst soubory z disku pomocí Node.js fs modulu:

`

const files = fs.readdirSync("src/content/pages")

`

2. Dynamické routy s generateStaticParams

Pro jednotlivé stránky používáme dynamickou routu [slug]/page.tsx. Next.js zavolá funkci generateStaticParams, která vrátí seznam všech slugů (názvů souborů bez .md).

3. Markdown se parsuje na HTML

Obsah .md souboru se při renderování převede na HTML s Tailwind CSS třídami. Každý markdown element (nadpisy, seznamy, bloky kódu) dostane odpovídající styling.

4. Statické generování při buildu

Díky generateStaticParams se všechny stránky předgenerují při buildu. Výsledkem je statický HTML — žádný server, žádná databáze, maximální rychlost.

Jak přidat novou stránku

  • Vytvořte soubor v src/content/pages/, například muj-clanek.md
  • Napište obsah v Markdown formátu
  • Stránka bude automaticky na /demos/markdown-pages/muj-clanek
  • Nadpis (první # ...) se zobrazí v seznamu stránek
  • Popis (první > ...) se zobrazí jako podtitulek

    • Podporovaný Markdown

  • Nadpisy — #, ##, ###
  • Tučné — text
  • Kurzíva — text
  • Kód — ` inline `
  • Seznamy — - položka
  • Citace — > text