Jeśli szukasz nowoczesnego szablonu startowego bloga zbudowanego w oparciu o Next.js, projekt NextJS Base Blog będzie doskonałym punktem wyjścia. To w pełni funkcjonalna aplikacja blogowa typu open source zbudowana w oparciu o Next.js 15, React 19, TypeScript i Tailwind CSS 4 .
Projekt charakteryzuje się przejrzystą architekturą, nowoczesnym interfejsem użytkownika componentsi pozorowaną warstwą API, dzięki czemu jest idealny dla deweloperów, którzy chcą szybko stworzyć bloga bez konieczności konfigurowania zaplecza.
Repozytorium GitHub: https://github.com/bfotool/nextjs-base-blog
Ten projekt jest szczególnie przydatny dla:
Programiści uczący się aplikacji Next.jsRouter
Szybkie tworzenie bloga lub witryny z treściami
Tworzenie szablonowego projektu Next.js
Opracowywanie funkcji interfejsu użytkownika przed podłączeniem prawdziwego interfejsu API zaplecza
Przegląd projektu
NextJS Base Blog to gotowy do produkcji szablon bloga, zawierający wiele typowych funkcji spotykanych w nowoczesnych witrynach internetowych.
Projekt obejmuje:
strona główna z wyróżnionymi postami
strony wpisów blogowych
filtrowanie kategorii
wyszukiwanie pełnotekstowe
paginacja
spis treści
powiązane posty
ciemny/jasny motyw
Jednym z najciekawszych elementów projektu jest warstwa Fake API, która symuluje API REST za pomocą przechwytywaczy Axios. Pozwala to programistom na tworzenie i testowanie aplikacji bez potrzeby korzystania z serwera zaplecza .
Główne cechy
Strona główna
Na stronie głównej znajduje się kilka ważnych sekcji:
wyróżniony post bohatera
filtry kategorii
siatka wpisów na blogu
nawigacja stronicowana
Strona jest w pełni responsywna i zoptymalizowana zarówno pod kątem komputerów stacjonarnych, jak i urządzeń mobilnych.
Strona wpisu na blogu
Dostęp do każdego artykułu jest możliwy za pośrednictwem dynamicznej ścieżki:
/blog/[slug]
Strona z wpisami na blogu zawiera kilka przydatnych funkcji:
pełna treść artykułu
automatyczny spis treści
szacowany czas czytania
przyciski udostępniania w mediach społecznościowych
sugestie powiązanych postów
Funkcje te pomagają stworzyć profesjonalne środowisko czytelnicze, podobne do tego, jakie oferują nowoczesne platformy blogowe.
Strony kategorii
Użytkownicy mogą przeglądać posty według kategorii.
Przykładowa trasa:
/blog/category/[slug]
Funkcja ta umożliwia czytelnikom zapoznawanie się z treściami dotyczącymi określonych tematów.
Funkcjonalność wyszukiwania
Projekt obejmuje wbudowaną stronę wyszukiwania:
/search
Wyszukiwanie obsługuje:
wyniki w czasie rzeczywistym
odrzucone dane wejściowe
wyszukiwanie w tytułach, fragmentach i tagach
Poprawia to użyteczność i pozwala użytkownikom szybko znaleźć interesujące ich treści.
Strony „O nas” i „Kontakt”
Projekt zawiera również dodatkowe strony powszechnie spotykane na blogach branżowych.
O stronie
Na stronie O nas znajdziesz:
zespół
historia projektu
wartości podstawowe
Strona kontaktowa
Strona Kontaktowa zawiera w pełni sprawdzony formularz zawierający:
walidacja formularza
powiadomienia tostowe
informacje zwrotne o sukcesie i błędach
Obsługa trybu ciemnego
Blog obsługuje tryb ciemny i jasny .
Funkcje obejmują:
automatyczne wykrywanie motywu systemu
przełącznik ręczny
trwałość motywu przy użyciu localStorage
Fałszywa warstwa API(rozwój bez zaplecza)
Jedną z najciekawszych części tego projektu jest jego fałszywy system API .
Zamiast wywoływać prawdziwy serwer, aplikacja używa przechwytywaczy Axios do symulowania odpowiedzi interfejsu API REST.
Jak działa fałszywe API
Instancja Axios jest tworzona w:
src/services/api-client.ts
Gdy zmienna środowiskowa jest włączona:
NEXT_PUBLIC_USE_MOCK_API=true
Żądania są przechwytywane zanim dotrą do sieci.
Obsługujący symulacje zwracają fałszywe odpowiedzi z realistycznymi opóźnieniami(200–600 ms).
Odpowiedzi zachowują się jak prawdziwe odpowiedzi API.
Dane pozorowane są przechowywane w:
src/mocks/
W tym:
przykładowe posty
autorski
kategorie
Dostępne punkty końcowe API
Interfejs API obsługuje kilka punktów końcowych:
| Metoda | Punkt końcowy | Opis |
|---|---|---|
| DOSTAWAĆ | /posty | Paginowane wpisy na blogu |
| DOSTAWAĆ | /posty/polecane | Polecane posty |
| DOSTAWAĆ | /posty/:slug | Pojedynczy wpis na blogu |
| DOSTAWAĆ | /kategorie | Lista kategorii |
| DOSTAWAĆ | /autorski | Lista autorów |
| POST | /kontakt | Wyślij formularz kontaktowy |
Stos technologiczny
Projekt wykorzystuje nowoczesny stos front-endowy.
| Warstwa | Technologia |
|---|---|
| Struktura | Następny.js 15 |
| Biblioteka interfejsu użytkownika | Reaguj 19 |
| Język | Maszynopis |
| Stylizacja | Tailwind CSS 4 |
| Klient HTTP | Axios |
| Ikony | Reakcja Lucide'a |
| Kłapanie | ESLint |
| Formatowanie | Ładniejszy |
Ten stos zapewnia:
silne bezpieczeństwo typu
utrzymywalna architektura
nowoczesne doświadczenie programistyczne
Struktura projektu
Struktura projektu opiera się na czystej i skalowalnej architekturze.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AplikacjaRouter
Katalog appzawiera wszystkie trasy aplikacji.
Przykłady:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Jest to zgodne z architekturą aplikacji Next.jsRouter wprowadzoną w nowszych wersjach Next.js.
Komponenty
Interfejsy użytkownika componentssą podzielone na logiczne grupy:
components/layout
components/common
components/blog
Taka struktura sprawia, że kod interfejsu użytkownika jest uporządkowany i łatwiejszy w utrzymaniu.
Warstwa usług
Folder serviceszawiera logikę związaną z API:
Konfiguracja klienta API
usługa pocztowa
kategoria usług
usługa formularza kontaktowego
Ta warstwa oddziela logikę pobierania danych od interfejsu użytkownikacomponents, co poprawia skalowalność.
Przewodnik instalacji
Wymagania
Przed rozpoczęciem upewnij się, że masz:
Node.js 18 lub nowszy
npm, yarn lub pnpm
Klonuj repozytorium
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Zainstaluj zależności
npm install
Konfiguruj zmienne środowiskowe
cp .env.example .env
Uruchom serwer programistyczny
npm run dev
Otwórz przeglądarkę i odwiedź:
http://localhost:3000
Dostępne skrypty
| Rozkaz | Opis |
|---|---|
| npm run dev | Uruchom serwer programistyczny |
| npm uruchom kompilację | Utwórz wersję produkcyjną |
| npm uruchom start | Uruchom serwer produkcyjny |
| npm run lint | Uruchom ESLint |
| format uruchomienia npm | Formatuj kod za pomocą Prettier |
| npm uruchom sprawdzanie typu | Uruchom sprawdzanie TypeScript |
Przejście na Real API
Jeśli chcesz połączyć projekt z prawdziwym interfejsem API, wykonaj następujące kroki.
Krok 1: Wyłącz interfejs API Mock
Edytuj .envplik:
NEXT_PUBLIC_USE_MOCK_API=false
Krok 2: Ustaw adres URL bazowy API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Krok 3: Dopasuj typy danych
Upewnij się, że Twoje API zaplecza zwraca dane zgodne z definicjami TypeScript w:
src/types/index.ts
Nie są wymagane żadne dodatkowe zmiany kodu.
Dostosowywanie treści
Treść pozorowaną można edytować w:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Dzięki temu programiści mogą szybko dostosować treść demonstracyjną.
Dostosowywanie motywu i interfejsu użytkownika
Styl globalny można znaleźć w:
src/app/globals.css
W projekcie wykorzystano następujące czcionki:
DM Sans
JetBrains Mono
Możesz modyfikować style lub zamieniać czcionki zależnie od wymagań projektu.
Wniosek
NextJS Base Blog to zaawansowany i nowoczesny szablon startowy do tworzenia bloga przy użyciu Next.js.
Główne zalety projektu obejmują:
nowoczesny stos technologiczny
czysta architektura
makieta API do celów programistycznych
łatwa integracja z prawdziwymi interfejsami API zaplecza
responsywny interfejs użytkownika i nowoczesne funkcje
Jeśli tworzysz bloga, witrynę internetową dla deweloperów lub platformę treści przy użyciu Next.js, to repozytorium może zaoszczędzić Ci sporo czasu poświęconego na prace programistyczne.
Przeglądaj kod źródłowy tutaj: https://github.com/bfotool/nextjs-base-blog