Блог з SSG

Створи повноцінний статичний блог на Next.js. Статті зберігаються як MDX-файли, сторінки генеруються під час збірки (SSG), а навігація працює через file-based routing.

Підготовка

Створи новий Next.js проект:

npx create-next-app@latest my-blog --typescript --tailwind --app
cd my-blog
npm install gray-matter

Створи структуру для контенту:

content/
  posts/
    hello-world.mdx
    nextjs-intro.mdx
    react-hooks-guide.mdx
    css-grid-tutorial.mdx
    typescript-basics.mdx

Кожен MDX-файл має frontmatter:

---
title: "Вступ до Next.js"
date: "2026-01-15"
description: "Дізнайтеся, навіщо Next.js і як почати"
tags: ["nextjs", "react", "ssr"]
---

Завдання

1. Утиліти для роботи з постами

Створи файл src/lib/posts.ts з функціями:

• getAllPosts() -- повертає масив всіх постів (meta + slug), відсортованих за датою (нові першими)
• getPostBySlug(slug) -- повертає один пост (meta + content)
• getAllTags() -- повертає масив унікальних тегів з усіх постів

2. Головна сторінка блогу (/blog)

• Список всіх статей з заголовком, датою, описом та тегами
• Кожна стаття -- посилання на окрему сторінку
• Використай generateStaticParams або серверний компонент для отримання даних

3. Сторінка статті (/blog/[slug])

• Відображає повний контент статті
• Заголовок, дата публікації, теги
• Навігація "Назад до блогу"
• Використай generateStaticParams для SSG

4. Фільтрація за тегами (/blog/tag/[tag])

• Сторінка з постами, що мають конкретний тег
• Заголовок: "Статті з тегом: {tag}"
• Посилання на кожну статтю

5. Layout та навігація

• Спільний layout з header (логотип + навігація) та footer
• Навігація: Головна, Блог, Про автора
• Сторінка "Про автора" (/about) зі статичним контентом

6. SEO metadata

• Кожна сторінка має title та description
• Динамічні metadata для сторінок статей (generateMetadata)
• Open Graph метадані

Вимоги до постів

Створи мінімум 5 статей на різні теми (можна взяти теми з попередніх уроків курсу):

1. Стаття про HTML семантику
2. Стаття про CSS Flexbox
3. Стаття про JavaScript масиви
4. Стаття про React хуки
5. Стаття про Next.js routing

Кожна стаття -- мінімум 3-5 абзаців тексту.

Бонус

• Пагінація: показуй по 3 статті на сторінку з навігацією "Попередня / Наступна"
• Пошук: додай поле пошуку, що фільтрує статті за заголовком (Client Component)
• RSS feed: створи API route /api/rss або статичний файл public/rss.xml
• Час читання: розрахуй і покажи приблизний час читання для кожної статті
• Попередня/наступна стаття: навігація між статтями на сторінці посту

Критерії оцінки