Se stai cercando un moderno modello di blog iniziale realizzato con Next.js, il progetto NextJS Base Blog è un ottimo punto di partenza. Si tratta di un'applicazione blog open source completa, sviluppata con Next.js 15, React 19, TypeScript e Tailwind CSS 4 .
Il progetto fornisce un'architettura pulita, un'interfaccia utente moderna componentse un livello API fittizio, rendendolo ideale per gli sviluppatori che desiderano creare rapidamente un blog senza dover configurare un backend.
Repository GitHub: https://github.com/bfotool/nextjs-base-blog
Questo progetto è particolarmente utile per:
Sviluppatori che imparano l'app Next.jsRouter
Creare rapidamente un blog o un sito web di contenuti
Creazione di un progetto boilerplate Next.js
Sviluppo di funzionalità dell'interfaccia utente prima di connettere una vera API backend
Panoramica del progetto
NextJS Base Blog è progettato come modello di blog pronto per la produzione, dotato di molte caratteristiche comuni ai moderni siti web di contenuti.
Il progetto comprende:
una homepage con post in evidenza
pagine di post del blog
filtraggio per categoria
ricerca full-text
impaginazione
sommario
post correlati
tema scuro/chiaro
Una delle parti più interessanti del progetto è il Fake API Layer, che simula un'API REST utilizzando gli intercettori Axios. Ciò consente agli sviluppatori di creare e testare l'applicazione senza bisogno di un server backend .
Caratteristiche principali
Pagina iniziale
La homepage presenta diverse sezioni importanti:
post dell'eroe in evidenza
filtri di categoria
una griglia di post del blog
navigazione paginata
Il layout è completamente reattivo e ottimizzato sia per i dispositivi desktop che per quelli mobili.
Pagina del post del blog
Ogni articolo è accessibile tramite un percorso dinamico:
/blog/[slug]
La pagina dei post del blog include diverse utili funzionalità:
contenuto completo dell'articolo
indice automatico
tempo di lettura stimato
pulsanti di condivisione social
suggerimenti per post correlati
Queste funzionalità contribuiscono a creare un'esperienza di lettura professionale, simile a quella delle moderne piattaforme di blogging.
Pagine di categoria
Gli utenti possono sfogliare i post per categoria.
Esempio di percorso:
/blog/category/[slug]
Questa funzione consente ai lettori di esplorare contenuti relativi ad argomenti specifici.
Funzionalità di ricerca
Il progetto include una pagina di ricerca integrata:
/search
La ricerca supporta:
risultati in tempo reale
input debounced
ricerca tra titoli, estratti e tag
Ciò migliora l'usabilità e aiuta gli utenti a trovare rapidamente i contenuti pertinenti.
Pagine Informazioni e Contatti
Il progetto include anche pagine aggiuntive comunemente reperibili sui blog professionali.
Pagina Informazioni
La pagina Informazioni presenta:
la squadra
la storia del progetto
valori fondamentali
Pagina dei contatti
La pagina Contatti include un modulo completamente convalidato con:
convalida del modulo
notifiche di tipo toast
feedback di successo ed errore
Supporto modalità scura
Il blog supporta la modalità scura e la modalità chiara .
Le caratteristiche includono:
rilevamento automatico del tema del sistema
interruttore manuale
persistenza del tema tramite localStorage
Livello API falso(sviluppo senza backend)
Una delle parti più interessanti di questo progetto è il suo sistema Fake API .
Invece di chiamare un server reale, l'applicazione utilizza gli intercettori Axios per simulare le risposte dell'API REST.
Come funziona la falsa API
L'istanza di Axios è stata creata in:
src/services/api-client.ts
Quando la variabile d'ambiente è abilitata:
NEXT_PUBLIC_USE_MOCK_API=true
Le richieste vengono intercettate prima di raggiungere la rete.
I gestori fittizi restituiscono risposte false con ritardi realistici(200-600 ms).
Le risposte si comportano come risposte API reali.
I dati fittizi sono archiviati in:
src/mocks/
Inclusi:
post di esempio
autori
categorie
Endpoint API disponibili
L'API fittizia supporta diversi endpoint:
| Metodo | Punto finale | Descrizione |
|---|---|---|
| OTTENERE | /post | Post di blog suddivisi in pagine |
| OTTENERE | /post/in evidenza | Post in evidenza |
| OTTENERE | /post/:slug | Singolo post del blog |
| OTTENERE | /categorie | Elenco delle categorie |
| OTTENERE | /autori | Elenco degli autori |
| INVIARE | /contatto | Invia modulo di contatto |
Stack tecnologico
Il progetto utilizza uno stack frontend moderno.
| Strato | Tecnologia |
|---|---|
| Struttura | Next.js 15 |
| Libreria UI | Reagisci 19 |
| Lingua | Dattiloscritto |
| Stile | CSS 4 di Tailwind |
| Cliente HTTP | Axios |
| Icone | Lucide React |
| Linting | ESLint |
| Formattazione | Più carino |
Questo stack fornisce:
tipo forte di sicurezza
architettura manutenibile
esperienza di sviluppo moderna
Struttura del progetto
La struttura del progetto segue un'architettura pulita e scalabile.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ApplicazioneRouter
La appdirectory contiene tutti i percorsi dell'applicazione.
Esempi:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Segue l' architettura dell'app Next.jsRouter introdotta nelle versioni più recenti di Next.js.
Componenti
Le interfacce utente componentssono organizzate in gruppi logici:
components/layout
components/common
components/blog
Questa struttura mantiene il codice dell'interfaccia utente organizzato e più facile da gestire.
Livello di servizi
La servicescartella contiene la logica correlata all'API:
Configurazione del client API
servizio postale
servizio di categoria
servizio di modulo di contatto
Questo livello separa la logica di recupero dei dati dall'interfaccia utentecomponents, migliorando la scalabilità.
Guida all'installazione
Requisiti
Prima di iniziare, assicurati di avere:
Node.js 18 o successivo
npm, yarn o pnpm
Clona il repository
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Installare le dipendenze
npm install
Configurare le variabili di ambiente
cp .env.example .env
Avviare il server di sviluppo
npm run dev
Apri il tuo browser e visita:
http://localhost:3000
Script disponibili
| Comando | Descrizione |
|---|---|
| npm run dev | Avvia il server di sviluppo |
| npm run build | Crea build di produzione |
| npm run start | Avvia il server di produzione |
| npm run lint | Esegui ESLint |
| formato di esecuzione npm | Formatta il codice con Prettier |
| npm run type-check | Esegui controlli TypeScript |
Passaggio a una vera API
Se vuoi connettere il progetto a una vera API backend, segui questi passaggi.
Passaggio 1: disabilitare l'API fittizia
Modifica il .envfile:
NEXT_PUBLIC_USE_MOCK_API=false
Passaggio 2: imposta l'URL di base dell'API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Passaggio 3: Abbina i tipi di dati
Assicurati che la tua API backend restituisca dati corrispondenti alle definizioni TypeScript in:
src/types/index.ts
Non sono necessarie ulteriori modifiche al codice.
Personalizzazione dei contenuti
Il contenuto fittizio può essere modificato all'interno di:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Ciò consente agli sviluppatori di personalizzare rapidamente i contenuti demo.
Personalizzazione del tema e dell'interfaccia utente
Lo stile globale può essere trovato in:
src/app/globals.css
Il progetto utilizza i seguenti font:
DM Sans
JetBrains Mono
È possibile modificare gli stili o sostituire i font in base alle proprie esigenze di progettazione.
Conclusione
NextJS Base Blog è un modello di partenza potente e moderno per creare un blog con Next.js.
I principali vantaggi del progetto includono:
stack tecnologico moderno
architettura pulita
API fittizia per lo sviluppo
facile integrazione con API backend reali
interfaccia utente reattiva e funzionalità moderne
Se stai creando un blog, un sito web per sviluppatori o una piattaforma di contenuti con Next.js, questo repository può farti risparmiare molto tempo di sviluppo.
Esplora il codice sorgente qui: https://github.com/bfotool/nextjs-base-blog