Pokud hledáte moderní šablonu pro začátek blogu vytvořenou pomocí Next.js, je projekt NextJS Base Blog vynikajícím výchozím bodem. Jedná se o plně funkční open-source blogovací aplikaci vytvořenou pomocí Next.js 15, Reactu 19, TypeScriptu a Tailwind CSS 4 .
Projekt nabízí čistou architekturu, moderní uživatelské rozhraní componentsa simulovanou vrstvu API, což je ideální pro vývojáře, kteří chtějí rychle vytvořit blog bez nutnosti nastavovat backend.
Repozitář GitHubu: https://github.com/bfotool/nextjs-base-blog
Tento projekt je obzvláště užitečný pro:
Vývojáři se učí aplikaci Next.jsRouter
Rychlé vytvoření blogu nebo webu s obsahem
Vytvoření standardního projektu Next.js
Vývoj funkcí uživatelského rozhraní před připojením skutečného backendového API
Přehled projektu
NextJS Base Blog je navržen jako šablona blogu připravená k produkci s mnoha běžnými funkcemi, které se nacházejí na moderních obsahových webech.
Projekt zahrnuje:
domovská stránka s doporučenými příspěvky
stránky blogových příspěvků
filtrování kategorií
fulltextové vyhledávání
stránkování
obsah
související příspěvky
tmavé/světlé téma
Jednou z nejzajímavějších částí projektu je falešná vrstva API, která simuluje REST API pomocí interceptorů Axios. To umožňuje vývojářům vytvářet a testovat aplikaci bez nutnosti backendového serveru .
Klíčové vlastnosti
Domovská stránka
Domovská stránka zobrazuje několik důležitých sekcí:
hlavní příspěvek
filtry kategorií
mřížka blogových příspěvků
stránkovaná navigace
Rozvržení je plně responzivní a optimalizované pro stolní počítače i mobilní zařízení.
Stránka blogového příspěvku
Každý článek je přístupný prostřednictvím dynamické trasy:
/blog/[slug]
Stránka s příspěvkem na blogu obsahuje několik užitečných funkcí:
celý obsah článku
automatický obsah
odhadovaná doba čtení
tlačítka pro sdílení na sociálních sítích
návrhy souvisejících příspěvků
Tyto funkce pomáhají vytvořit profesionální čtenářský zážitek podobný moderním blogovacím platformám.
Stránky kategorií
Uživatelé si mohou prohlížet příspěvky podle kategorií.
Příklad trasy:
/blog/category/[slug]
Tato funkce umožňuje čtenářům prozkoumávat obsah v rámci konkrétních témat.
Funkce vyhledávání
Projekt obsahuje vestavěnou vyhledávací stránku:
/search
Vyhledávání podporuje:
výsledky v reálném čase
odražený vstup
vyhledávání v názvech, úryvcích a tazích
To zlepšuje použitelnost a pomáhá uživatelům rychle najít relevantní obsah.
Stránky O nás a Kontakt
Projekt zahrnuje i další stránky, které se běžně nacházejí na profesionálních blozích.
O stránce
Stránka O nás představuje:
tým
příběh projektu
základní hodnoty
Kontaktní stránka
Kontaktní stránka obsahuje plně ověřený formulář s:
ověření formuláře
oznámení v toastovém režimu
zpětná vazba o úspěchu a chybě
Podpora tmavého režimu
Blog podporuje tmavý i světlý režim .
Mezi funkce patří:
automatická detekce systémového motivu
ruční přepínání
perzistence motivu pomocí localStorage
Falešná vrstva API(vývoj bez backendu)
Jednou z nejzajímavějších částí tohoto projektu je jeho systém falešných API .
Místo volání skutečného serveru používá aplikace interceptory Axios k simulaci odpovědí REST API.
Jak funguje falešné API
Instance Axios je vytvořena v:
src/services/api-client.ts
Když je proměnná prostředí povolena:
NEXT_PUBLIC_USE_MOCK_API=true
Požadavky jsou zachyceny před dosažením sítě.
Falešné obslužné rutiny vracejí falešné odpovědi s realistickým zpožděním(200–600 ms).
Odpovědi se chovají jako skutečné odpovědi API.
Simulovaná data jsou uložena v:
src/mocks/
Včetně:
ukázkové příspěvky
autoři
kategorie
Dostupné koncové body API
Rozhraní API podporuje několik koncových bodů:
| Metoda | Koncový bod | Popis |
|---|---|---|
| ZÍSKAT | /příspěvky | Stránkované příspěvky na blogu |
| ZÍSKAT | /příspěvky/vybrané | Doporučené příspěvky |
| ZÍSKAT | /příspěvky/:slimák | Jeden příspěvek na blogu |
| ZÍSKAT | /kategorie | Seznam kategorií |
| ZÍSKAT | /autoři | Seznam autorů |
| ZVEŘEJNIT | /kontakt | Odeslat kontaktní formulář |
Technologický zásobník
Projekt využívá moderní frontend stack.
| Vrstva | Technologie |
|---|---|
| Rámec | Next.js 15 |
| Knihovna uživatelského rozhraní | Reagovat 19 |
| Jazyk | TypeScript |
| Styling | Tailwind CSS 4 |
| HTTP klient | Axios |
| Ikony | Lucide React |
| Linting | ESLint |
| Formátování | Hezčí |
Tento zásobník poskytuje:
silná typová bezpečnost
udržovatelná architektura
moderní vývojářské zkušenosti
Struktura projektu
Struktura projektu se řídí čistou a škálovatelnou architekturou.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikaceRouter
Adresář appobsahuje všechny trasy aplikace.
Příklady:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Toto navazuje na architekturu aplikací Next.js,Router která byla představena v novějších verzích Next.js.
Součásti
Uživatelská rozhraní componentsjsou uspořádána do logických skupin:
components/layout
components/common
components/blog
Tato struktura udržuje kód uživatelského rozhraní organizovaný a snadněji se udržuje.
Vrstva služeb
Složka servicesobsahuje logiku související s API:
Konfigurace klienta API
poštovní služba
kategorie služeb
služba kontaktního formuláře
Tato vrstva odděluje logiku načítání dat od uživatelského rozhranícomponents, což zlepšuje škálovatelnost.
Instalační příručka
Požadavky
Než začnete, ujistěte se, že máte:
Node.js 18 nebo novější
npm, příze nebo pnpm
Klonování repozitáře
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Instalace závislostí
npm install
Konfigurace proměnných prostředí
cp .env.example .env
Spuštění vývojového serveru
npm run dev
Otevřete prohlížeč a navštivte:
http://localhost:3000
Dostupné skripty
| Příkaz | Popis |
|---|---|
| běh npm vývoj | Spuštění vývojového serveru |
| běhové sestavení npm | Vytvořit produkční sestavení |
| spuštění npm | Spuštění produkčního serveru |
| npm run lint | Spustit ESLint |
| formát běhu npm | Formátování kódu pomocí Prettier |
| npm run type check | Spouštět kontroly TypeScriptu |
Přechod na skutečné API
Pokud chcete projekt propojit se skutečným backendovým API, postupujte podle těchto kroků.
Krok 1: Zakažte rozhraní Mock API
Upravte .envsoubor:
NEXT_PUBLIC_USE_MOCK_API=false
Krok 2: Nastavení základní adresy URL API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Krok 3: Porovnání datových typů
Ujistěte se, že vaše backendové API vrací data odpovídající definicím TypeScript v:
src/types/index.ts
Nejsou vyžadovány žádné další změny kódu.
Přizpůsobení obsahu
Obsah simulace lze upravovat uvnitř:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
To umožňuje vývojářům rychle přizpůsobit demo obsah.
Přizpůsobení motivu a uživatelského rozhraní
Globální styling lze nalézt v:
src/app/globals.css
Projekt používá následující fonty:
DM Sans
JetBrains Mono
Styly můžete upravit nebo nahradit písma v závislosti na vašich požadavcích na design.
Závěr
NextJS Base Blog je výkonná a moderní šablona pro začátečníky, která vám umožní vytvořit blog s Next.js.
Mezi klíčové výhody projektu patří:
moderní technologický stack
čistá architektura
simulované API pro vývoj
snadná integrace se skutečnými backendovými API
responzivní uživatelské rozhraní a moderní funkce
Pokud vytváříte blog, webové stránky pro vývojáře nebo platformu pro obsah s Next.js, toto úložiště vám může ušetřit značné množství času při vývoji.
Prozkoumejte zdrojový kód zde: https://github.com/bfotool/nextjs-base-blog