Als je op zoek bent naar een moderne blogtemplate die is gebouwd met Next.js, dan is het NextJS Base Blog- project een uitstekend startpunt. Het is een complete open-source blogapplicatie, gebouwd met Next.js 15, React 19, TypeScript en Tailwind CSS 4 .
Het project biedt een overzichtelijke architectuur, een moderne gebruikersinterface componentsen een mock API-laag, waardoor het ideaal is voor ontwikkelaars die snel een blog willen bouwen zonder een backend te hoeven opzetten.
GitHub-repository: https://github.com/bfotool/nextjs-base-blog
Dit project is met name nuttig voor:
Ontwikkelaars leren Next.js-appsRouter
Snel een blog of contentwebsite bouwen
Een Next.js boilerplate-project maken
UI-functies ontwikkelen voordat een echte backend-API wordt gekoppeld.
Projectoverzicht
NextJS Base Blog is ontworpen als een productiegereed blogtemplate met veel gangbare functies die je terugvindt op moderne contentwebsites.
Het project omvat:
een homepage met uitgelichte berichten
blogpostpagina's
categoriefiltering
volledige tekst zoeken
paginering
inhoudsopgave
gerelateerde berichten
donker/licht thema
Een van de meest interessante onderdelen van het project is de Fake API Layer, die een REST API simuleert met behulp van Axios-interceptors. Dit stelt ontwikkelaars in staat om de applicatie te bouwen en te testen zonder dat er een backend-server nodig is .
Belangrijkste kenmerken
Startpagina
De homepage toont verschillende belangrijke onderdelen:
uitgelicht hero-bericht
categoriefilters
een raster van blogberichten
gepagineerde navigatie
De lay-out is volledig responsief en geoptimaliseerd voor zowel desktop- als mobiele apparaten.
Blogberichtpagina
Elk artikel is toegankelijk via een dynamische route:
/blog/[slug]
De blogpagina bevat diverse handige functies:
volledige artikelinhoud
automatische inhoudsopgave
geschatte leestijd
Sociale deelknoppen
suggesties voor gerelateerde berichten
Deze functies dragen bij aan een professionele leeservaring, vergelijkbaar met moderne blogplatformen.
Categoriepagina's
Gebruikers kunnen berichten per categorie bekijken.
Voorbeeldroute:
/blog/category/[slug]
Deze functie stelt lezers in staat om content binnen specifieke onderwerpen te verkennen.
Zoekfunctionaliteit
Het project bevat een ingebouwde zoekpagina:
/search
Zoekondersteuning:
realtime resultaten
ontstuiterde invoer
Zoeken in titels, fragmenten en tags
Dit verbetert de gebruiksvriendelijkheid en helpt gebruikers snel relevante content te vinden.
Over ons en contactpagina's
Het project omvat ook extra pagina's die vaak op professionele blogs te vinden zijn.
Over ons-pagina
De 'Over ons'-pagina introduceert:
het team
het projectverhaal
kernwaarden
Contactpagina
De contactpagina bevat een volledig gevalideerd formulier met:
formuliervalidatie
toastmeldingen
feedback over succes en fouten
Ondersteuning voor de donkere modus
De blog ondersteunt zowel de donkere als de lichte modus .
De kenmerken omvatten:
automatische systeemthema-detectie
handmatige schakelaar
Themapersistentie met behulp van localStorage
Nep-API-laag(ontwikkeling zonder backend)
Een van de meest interessante onderdelen van dit project is het Fake API-systeem .
In plaats van een echte server aan te roepen, gebruikt de applicatie Axios-interceptors om REST API-reacties te simuleren.
Hoe de nep-API werkt
Het Axios-exemplaar wordt aangemaakt in:
src/services/api-client.ts
Wanneer de omgevingsvariabele is ingeschakeld:
NEXT_PUBLIC_USE_MOCK_API=true
Verzoeken worden onderschept voordat ze het netwerk bereiken.
Mock handlers retourneren nepreacties met realistische vertragingen(200-600 ms).
De reacties gedragen zich als echte API-reacties.
De nepgegevens worden opgeslagen in:
src/mocks/
Inbegrepen:
voorbeeldberichten
auteurs
categorieën
Beschikbare API-eindpunten
De mock-API ondersteunt meerdere eindpunten:
| Methode | Eindpunt | Beschrijving |
|---|---|---|
| KRIJGEN | /berichten | Blogberichten met paginering |
| KRIJGEN | /berichten/uitgelicht | Uitgelichte berichten |
| KRIJGEN | /posts/:slug | Losse blogpost |
| KRIJGEN | /categorieën | Categorieënlijst |
| KRIJGEN | /auteurs | Auteurslijst |
| NA | /contact | Contactformulier verzenden |
Technologie-stack
Het project maakt gebruik van een moderne frontend-stack.
| Laag | Technologie |
|---|---|
| Kader | Next.js 15 |
| UI-bibliotheek | React 19 |
| Taal | TypeScript |
| Styling | Tailwind CSS 4 |
| HTTP-client | Axios |
| Pictogrammen | Lucide React |
| Pluisjes | ESLint |
| Opmaak | Mooier |
Deze stapel biedt:
sterke veiligheidsvoorschriften
onderhoudbare architectuur
moderne ontwikkelaarservaring
Projectstructuur
De projectstructuur volgt een overzichtelijke en schaalbare architectuur.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
AppRouter
De appmap bevat alle applicatieroutes.
Voorbeelden:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Dit volgt de Next.js- Routerapparchitectuur die is geïntroduceerd in nieuwere versies van Next.js.
Onderdelen
De gebruikersinterface componentsis georganiseerd in logische groepen:
components/layout
components/common
components/blog
Deze structuur zorgt ervoor dat de UI-code overzichtelijk blijft en gemakkelijker te onderhouden is.
Servicelaag
De servicesmap bevat API-gerelateerde logica:
API-clientconfiguratie
postdienst
categorie service
contactformulier service
Deze laag scheidt de logica voor het ophalen van gegevens van de gebruikersinterfacecomponents, wat de schaalbaarheid verbetert.
Installatiehandleiding
Vereisten
Zorg ervoor dat je, voordat je begint, het volgende hebt:
Node.js 18 of later
npm, yarn of pnpm
Kloon de repository
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Installeer afhankelijkheden
npm install
Omgevingsvariabelen configureren
cp .env.example .env
Start de ontwikkelingsserver
npm run dev
Open uw browser en ga naar:
http://localhost:3000
Beschikbare scripts
| Commando | Beschrijving |
|---|---|
| npm run dev | Start de ontwikkelingsserver |
| npm run build | Maak een productiebuild aan |
| npm run start | Start de productieserver |
| npm run lint | Voer ESLint uit |
| npm run-formaat | Formatteer code met Prettier |
| npm run type-check | Voer TypeScript-controles uit |
Overstappen naar een echte API
Als je het project wilt koppelen aan een echte backend-API, volg dan deze stappen.
Stap 1: Schakel de Mock API uit
Bewerk het .envbestand:
NEXT_PUBLIC_USE_MOCK_API=false
Stap 2: Stel de API-basis-URL in
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Stap 3: Gegevenstypen matchen
Zorg ervoor dat uw backend-API gegevens retourneert die overeenkomen met de TypeScript-definities in:
src/types/index.ts
Er zijn geen verdere codewijzigingen nodig.
Inhoud aanpassen
De voorbeeldinhoud kan binnenin worden bewerkt:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Dit stelt ontwikkelaars in staat om de demo-inhoud snel aan te passen.
Thema en gebruikersinterface aanpassen
De wereldwijde stijl is te vinden in:
src/app/globals.css
Het project maakt gebruik van de volgende lettertypen:
DM Sans
JetBrains Mono
Je kunt stijlen aanpassen of lettertypen vervangen, afhankelijk van je ontwerpvereisten.
Conclusie
NextJS Base Blog is een krachtige en moderne startertemplate voor het bouwen van een blog met Next.js.
De belangrijkste voordelen van het project zijn:
moderne technologie-stack
schone architectuur
mock API voor ontwikkeling
eenvoudige integratie met echte backend-API's
responsieve gebruikersinterface en moderne functies
Als je een blog, ontwikkelaarswebsite of contentplatform bouwt met Next.js, kan deze repository je aanzienlijk veel ontwikkeltijd besparen.
Bekijk de broncode hier: https://github.com/bfotool/nextjs-base-blog