Jos etsit modernia blogin aloitusmallia, joka on rakennettu Next.js:llä, NextJS Base Blog -projekti on erinomainen lähtökohta. Se on täysin varusteltu avoimen lähdekoodin blogisovellus, joka on rakennettu Next.js 15:llä, React 19:llä, TypeScriptillä ja Tailwind CSS 4:llä .
Projekti tarjoaa puhtaan arkkitehtuurin, modernin käyttöliittymän componentsja simuloidun API-kerroksen, mikä tekee siitä ihanteellisen kehittäjille, jotka haluavat rakentaa blogin nopeasti ilman taustajärjestelmän perustamista.
GitHub-arkisto: https://github.com/bfotool/nextjs-base-blog
Tämä projekti on erityisen hyödyllinen seuraaville:
Kehittäjät oppivat Next.js-sovellustaRouter
Blogin tai sisältösivuston nopea rakentaminen
Next.js-malliprojektin luominen
Käyttöliittymäominaisuuksien kehittäminen ennen todellisen taustajärjestelmän API:n yhdistämistä
Projektin yleiskatsaus
NextJS Base Blog on suunniteltu tuotantovalmiiksi blogimalliksi, jossa on monia nykyaikaisilla sisältösivustoilla yleisesti käytettyjä ominaisuuksia.
Projekti sisältää:
kotisivu, jossa on esillä olevia julkaisuja
blogikirjoitussivut
luokkasuodatus
kokotekstihaku
sivunumerointi
sisällysluettelo
aiheeseen liittyvät viestit
tumma/vaalea teema
Yksi projektin mielenkiintoisimmista osista on Fake API Layer, joka simuloi REST API:a Axios-interceptorien avulla. Tämä mahdollistaa kehittäjien rakentaa ja testata sovellusta ilman erillistä taustapalvelinta .
Tärkeimmät ominaisuudet
Etusivu
Etusivulla on useita tärkeitä osioita:
esillä oleva sankaripostaus
luokkasuodattimet
blogikirjoitusten ruudukko
sivutettu navigointi
Sivuston ulkoasu on täysin responsiivinen ja optimoitu sekä tietokoneille että mobiililaitteille.
Blogikirjoitussivu
Jokainen artikkeli on saatavilla dynaamisen reitin kautta:
/blog/[slug]
Blogikirjoitussivulla on useita hyödyllisiä ominaisuuksia:
koko artikkelin sisältö
automaattinen sisällysluettelo
arvioitu lukuaika
sosiaalisen median jakopainikkeet
aiheeseen liittyviä ehdotuksia
Nämä ominaisuudet auttavat luomaan ammattimaisen lukukokemuksen, joka on samanlainen kuin nykyaikaisilla blogialustoilla.
Luokkasivut
Käyttäjät voivat selata julkaisuja luokittain.
Esimerkkireitti:
/blog/category/[slug]
Tämän ominaisuuden avulla lukijat voivat tutustua tiettyjen aiheiden sisältöön.
Hakutoiminto
Projekti sisältää sisäänrakennetun hakusivun:
/search
Haku tukee:
reaaliaikaiset tulokset
palautumaton syöte
haku nimikkeiden, katkelmien ja tunnisteiden joukosta
Tämä parantaa käytettävyyttä ja auttaa käyttäjiä löytämään asiaankuuluvaa sisältöä nopeasti.
Tietoja ja yhteystiedot -sivut
Projekti sisältää myös lisäsivuja, joita usein löytyy ammattiblogeista.
Tietoja sivusta
Tietoja-sivulla esitellään:
joukkue
projektin tarina
ydinarvot
Yhteystiedot
Yhteydenottosivulla on täysin validoitu lomake, jossa on seuraavat tiedot:
lomakkeen validointi
paahtoleipäilmoitukset
onnistumis- ja virhepalaute
Tumman tilan tuki
Blogi tukee sekä tummaa että vaaleaa tilaa .
Ominaisuuksiin kuuluvat:
automaattinen järjestelmäteeman tunnistus
manuaalinen vaihtokytkin
teeman pysyvyys paikallisen tallennuksen avulla
Väärennetty API-kerros(kehitys ilman taustajärjestelmää)
Yksi tämän projektin mielenkiintoisimmista osista on sen Fake API -järjestelmä .
Sen sijaan, että sovellus kutsuisi oikeaa palvelinta, se käyttää Axios-interceptoreita simuloidakseen REST API -vastauksia.
Kuinka väärennetty API toimii
Axios-instanssi luodaan seuraavasti:
src/services/api-client.ts
Kun ympäristömuuttuja on käytössä:
NEXT_PUBLIC_USE_MOCK_API=true
Pyynnöt siepataan ennen kuin ne ehtivät verkkoon.
Valekäsittelijät palauttavat tekaistuja vastauksia realistisilla viiveillä(200–600 ms).
Vastaukset toimivat kuten oikeat API-vastaukset.
Mallitiedot tallennetaan seuraaviin paikkoihin:
src/mocks/
Mukaan lukien:
esimerkkipostauksia
kirjoittajat
kategoriat
Käytettävissä olevat API-päätepisteet
Mock-API tukee useita päätepisteitä:
| Menetelmä | Päätepiste | Kuvaus |
|---|---|---|
| SAADA | /viestit | Sivutetut blogikirjoitukset |
| SAADA | /postaukset/esillä | Esittelyssä olevat julkaisut |
| SAADA | /viestit/:etana | Yksi blogikirjoitus |
| SAADA | /luokat | Luokkaluettelo |
| SAADA | /kirjoittajat | Tekijäluettelo |
| LÄHETTÄÄ | /yhteystiedot | Lähetä yhteydenottolomake |
Teknologiapino
Projektissa käytetään modernia käyttöliittymäpinoa.
| Kerros | Teknologia |
|---|---|
| Kehys | Next.js 15 |
| Käyttöliittymäkirjasto | Reaktio 19 |
| Kieli | TypeScript |
| Muotoilu | Myötätuuli CSS 4 |
| HTTP-asiakasohjelma | Axios |
| Kuvakkeet | Lucide React |
| Nukkautuminen | ESLint |
| Muotoilu | Kauniimpi |
Tämä pino tarjoaa:
vahva tyyppiturvallisuus
ylläpidettävä arkkitehtuuri
moderni kehittäjäkokemus
Projektin rakenne
Projektin rakenne noudattaa selkeää ja skaalautuvaa arkkitehtuuria.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
SovellusRouter
Hakemisto appsisältää kaikki sovellusreitit.
Esimerkkejä:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Tämä seuraa Next.js-sovellusarkkitehtuuria Router, joka esiteltiin uudemmissa Next.js-versioissa.
Komponentit
Käyttöliittymät componentson järjestetty loogisiin ryhmiin:
components/layout
components/common
components/blog
Tämä rakenne pitää käyttöliittymäkoodin järjestyksessä ja helpommin ylläpidettävänä.
Palvelukerros
Kansio servicessisältää API-logiikkaa:
API-asiakasohjelman määritys
postipalvelu
luokkapalvelu
yhteydenottolomakepalvelu
Tämä kerros erottaa tiedonhakulogiikan käyttöliittymästäcomponents, mikä parantaa skaalautuvuutta.
Asennusopas
Vaatimukset
Ennen aloittamista varmista, että sinulla on:
Node.js 18 tai uudempi
npm, lanka tai pnpm
Kloonaa arkisto
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Asenna riippuvuudet
npm install
Ympäristömuuttujien määrittäminen
cp .env.example .env
Käynnistä kehityspalvelin
npm run dev
Avaa selain ja käy osoitteessa:
http://localhost:3000
Käytettävissä olevat skriptit
| Komento | Kuvaus |
|---|---|
| npm-ajokehitys | Käynnistä kehityspalvelin |
| npm-ajon koonti | Luo tuotantokoonti |
| npm-ajon aloitus | Käynnistä tuotantopalvelin |
| npm-juoksun nukka | Suorita ESLint |
| npm-ajomuoto | Muotoile koodi Prettierillä |
| npm-ajotyypin tarkistus | Suorita TypeScript-tarkistukset |
Vaihtaminen oikeaan API:in
Jos haluat yhdistää projektin oikeaan taustajärjestelmän API:in, noudata näitä ohjeita.
Vaihe 1: Poista Mock-API käytöstä
Muokkaa .envtiedostoa:
NEXT_PUBLIC_USE_MOCK_API=false
Vaihe 2: Määritä API:n perus-URL-osoite
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Vaihe 3: Tietotyyppien täsmäys
Varmista, että taustajärjestelmän API palauttaa TypeScript-määritelmiä vastaavat tiedot kohdassa:
src/types/index.ts
Lisämuutoksia koodiin ei tarvita.
Sisällön mukauttaminen
Valesisältöä voi muokata sisällä:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Tämä antaa kehittäjille mahdollisuuden muokata demosisältöä nopeasti.
Teeman ja käyttöliittymän mukauttaminen
Globaali tyyli löytyy seuraavista:
src/app/globals.css
Projektissa käytetään seuraavia fontteja:
DM Sans
JetBrains Mono
Voit muokata tyylejä tai korvata fontteja suunnitteluvaatimustesi mukaan.
Johtopäätös
NextJS Base Blog on tehokas ja moderni aloitusmalli blogin rakentamiseen Next.js:n avulla.
Hankkeen keskeisiä etuja ovat:
moderni teknologiapino
puhdas arkkitehtuuri
malli-API kehitystä varten
helppo integrointi oikeiden taustapään API-rajapintojen kanssa
responsiivinen käyttöliittymä ja modernit ominaisuudet
Jos rakennat blogia, kehittäjäsivustoa tai sisältöalustaa Next.js:n avulla, tämä repositorio voi säästää merkittävästi kehitysaikaa.
Tutustu lähdekoodiin täällä: https://github.com/bfotool/nextjs-base-blog