Αν ψάχνετε για ένα σύγχρονο πρότυπο εκκίνησης ιστολογίου που έχει δημιουργηθεί με το Next.js, το έργο NextJS Base Blog είναι ένα εξαιρετικό σημείο εκκίνησης. Είναι μια πλήρης εφαρμογή ιστολογίου ανοιχτού κώδικα που έχει δημιουργηθεί με το Next.js 15, το React 19, το TypeScript και το Tailwind CSS 4 .
Το έργο παρέχει μια καθαρή αρχιτεκτονική, μοντέρνο UI componentsκαι ένα mock API layer, καθιστώντας το ιδανικό για προγραμματιστές που θέλουν να δημιουργήσουν ένα ιστολόγιο γρήγορα χωρίς να δημιουργήσουν ένα backend.
Αποθετήριο GitHub: https://github.com/bfotool/nextjs-base-blog
Αυτό το έργο είναι ιδιαίτερα χρήσιμο για:
Προγραμματιστές που μαθαίνουν την εφαρμογή Next.jsRouter
Γρήγορη δημιουργία ιστολογίου ή ιστοσελίδας περιεχομένου
Δημιουργία ενός τυποποιημένου έργου Next.js
Ανάπτυξη λειτουργιών UI πριν από τη σύνδεση ενός πραγματικού API backend
Επισκόπηση Έργου
Το NextJS Base Blog έχει σχεδιαστεί ως πρότυπο ιστολογίου έτοιμο για παραγωγή με πολλά κοινά χαρακτηριστικά που συναντώνται σε σύγχρονους ιστότοπους περιεχομένου.
Το έργο περιλαμβάνει:
μια αρχική σελίδα με προτεινόμενες αναρτήσεις
σελίδες αναρτήσεων ιστολογίου
φιλτράρισμα κατηγοριών
αναζήτηση πλήρους κειμένου
σελιδοποίηση
πίνακας περιεχομένων
σχετικές αναρτήσεις
σκοτεινό/φωτεινό θέμα
Ένα από τα πιο ενδιαφέροντα μέρη του έργου είναι το Fake API Layer, το οποίο προσομοιώνει ένα REST API χρησιμοποιώντας interceptors Axios. Αυτό επιτρέπει στους προγραμματιστές να δημιουργήσουν και να δοκιμάσουν την εφαρμογή χωρίς να χρειάζονται διακομιστή backend .
Βασικά χαρακτηριστικά
Αρχική σελίδα
Η αρχική σελίδα εμφανίζει αρκετές σημαντικές ενότητες:
προτεινόμενη ανάρτηση πρωταγωνιστή
φίλτρα κατηγορίας
ένα πλέγμα αναρτήσεων ιστολογίου
πλοήγηση με σελίδες
Η διάταξη είναι πλήρως προσαρμόσιμη και βελτιστοποιημένη τόσο για επιτραπέζιους υπολογιστές όσο και για κινητές συσκευές.
Σελίδα ανάρτησης ιστολογίου
Κάθε άρθρο είναι προσβάσιμο μέσω μιας δυναμικής διαδρομής:
/blog/[slug]
Η σελίδα ανάρτησης ιστολογίου περιλαμβάνει αρκετές χρήσιμες λειτουργίες:
πλήρες περιεχόμενο άρθρου
αυτόματος πίνακας περιεχομένων
εκτιμώμενος χρόνος ανάγνωσης
κουμπιά κοινωνικής κοινοποίησης
προτάσεις σχετικών αναρτήσεων
Αυτές οι λειτουργίες βοηθούν στη δημιουργία μιας επαγγελματικής εμπειρίας ανάγνωσης παρόμοιας με τις σύγχρονες πλατφόρμες ιστολογίου.
Σελίδες κατηγορίας
Οι χρήστες μπορούν να περιηγηθούν στις αναρτήσεις ανά κατηγορία.
Παράδειγμα διαδρομής:
/blog/category/[slug]
Αυτή η λειτουργία επιτρέπει στους αναγνώστες να εξερευνήσουν περιεχόμενο εντός συγκεκριμένων θεμάτων.
Λειτουργικότητα αναζήτησης
Το έργο περιλαμβάνει μια ενσωματωμένη σελίδα αναζήτησης:
/search
Η αναζήτηση υποστηρίζει:
αποτελέσματα σε πραγματικό χρόνο
αποκρουσμένη είσοδος
αναζήτηση σε τίτλους, αποσπάσματα και ετικέτες
Αυτό βελτιώνει την χρηστικότητα και βοηθά τους χρήστες να βρίσκουν γρήγορα σχετικό περιεχόμενο.
Σχετικά με εμάς και σελίδες επικοινωνίας
Το έργο περιλαμβάνει επίσης πρόσθετες σελίδες που βρίσκονται συνήθως σε επαγγελματικά ιστολόγια.
Σχετικά με τη σελίδα
Η σελίδα "Πληροφορίες" παρουσιάζει:
η ομάδα
η ιστορία του έργου
βασικές αξίες
Σελίδα επικοινωνίας
Η σελίδα επικοινωνίας περιλαμβάνει μια πλήρως επικυρωμένη φόρμα με:
επικύρωση φόρμας
ειδοποιήσεις πρόποσης
ανατροφοδότηση επιτυχίας και σφάλματος
Υποστήριξη σκοτεινής λειτουργίας
Το ιστολόγιο υποστηρίζει σκοτεινή και φωτεινή λειτουργία .
Τα χαρακτηριστικά περιλαμβάνουν:
αυτόματη ανίχνευση θεμάτων συστήματος
χειροκίνητη εναλλαγή
διατήρηση θέματος χρησιμοποιώντας localStorage
Ψεύτικο Επίπεδο API(Ανάπτυξη Χωρίς Backend)
Ένα από τα πιο ενδιαφέροντα μέρη αυτού του έργου είναι το σύστημα ψεύτικων API .
Αντί να καλεί έναν πραγματικό διακομιστή, η εφαρμογή χρησιμοποιεί αναχαιτιστές Axios για να προσομοιώσει τις απαντήσεις του REST API.
Πώς λειτουργεί το ψεύτικο API
Η παρουσία του Axios δημιουργείται σε:
src/services/api-client.ts
Όταν η μεταβλητή περιβάλλοντος είναι ενεργοποιημένη:
NEXT_PUBLIC_USE_MOCK_API=true
Τα αιτήματα αναχαιτίζονται πριν φτάσουν στο δίκτυο.
Οι εικονικοί χειριστές επιστρέφουν ψεύτικες απαντήσεις με ρεαλιστικές καθυστερήσεις(200–600 ms).
Οι απαντήσεις συμπεριφέρονται σαν πραγματικές απαντήσεις API.
Τα εικονικά δεδομένα αποθηκεύονται σε:
src/mocks/
Συμπεριλαμβανομένου:
δείγματα αναρτήσεων
συγγραφείς
κατηγορίες
Διαθέσιμα τελικά σημεία API
Το mock API υποστηρίζει πολλά τελικά σημεία:
| Μέθοδος | Τελικό σημείο | Περιγραφή |
|---|---|---|
| ΠΑΙΡΝΩ | /αναρτήσεις | Σελιδοποιημένες αναρτήσεις ιστολογίου |
| ΠΑΙΡΝΩ | /αναρτήσεις/προβεβλημένα | Προτεινόμενες αναρτήσεις |
| ΠΑΙΡΝΩ | /αναρτήσεις/:slug | Μία ανάρτηση ιστολογίου |
| ΠΑΙΡΝΩ | /κατηγορίες | Λίστα κατηγοριών |
| ΠΑΙΡΝΩ | /συγγραφείς | Λίστα συγγραφέων |
| ΘΕΣΗ | /επαφή | Υποβολή φόρμας επικοινωνίας |
Στοίβα Τεχνολογίας
Το έργο χρησιμοποιεί ένα σύγχρονο frontend stack.
| Στρώμα | Τεχνολογία |
|---|---|
| Σκελετός | Next.js 15 |
| Βιβλιοθήκη UI | Αντιδράστε 19 |
| Γλώσσα | TypeScript |
| Στυλ | Ούριος άνεμος CSS 4 |
| Πρόγραμμα-πελάτης HTTP | Αξιός |
| Εικονίδια | Lucide React |
| Χνούδι | ESLint |
| Μορφοποίηση | Πιο όμορφο |
Αυτή η στοίβα παρέχει:
ισχυρή ασφάλεια τύπου
διατηρήσιμη αρχιτεκτονική
σύγχρονη εμπειρία προγραμματιστή
Δομή Έργου
Η δομή του έργου ακολουθεί μια καθαρή και επεκτάσιμη αρχιτεκτονική.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ΕφαρμογήRouter
Ο appκατάλογος περιέχει όλες τις διαδρομές εφαρμογών.
Παραδείγματα:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Αυτό ακολουθεί την αρχιτεκτονική εφαρμογής Next.jsRouter που εισήχθη σε νεότερες εκδόσεις του Next.js.
Στοιχεία
Τα UI componentsοργανώνονται σε λογικές ομάδες:
components/layout
components/common
components/blog
Αυτή η δομή διατηρεί τον κώδικα UI οργανωμένο και ευκολότερο στη συντήρηση.
Επίπεδο υπηρεσιών
Ο servicesφάκελος περιέχει λογική που σχετίζεται με το API:
Ρύθμιση παραμέτρων προγράμματος-πελάτη API
ταχυδρομική υπηρεσία
κατηγορία υπηρεσίας
υπηρεσία φόρμας επικοινωνίας
Αυτό το επίπεδο διαχωρίζει τη λογική ανάκτησης δεδομένων από το περιβάλλον χρήστηcomponents, γεγονός που βελτιώνει την επεκτασιμότητα.
Οδηγός εγκατάστασης
Απαιτήσεις
Πριν ξεκινήσετε, βεβαιωθείτε ότι έχετε:
Node.js 18 ή νεότερη έκδοση
npm, νήμα ή pnpm
Κλωνοποίηση του Αποθετηρίου
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Εγκατάσταση εξαρτήσεων
npm install
Ρύθμιση παραμέτρων μεταβλητών περιβάλλοντος
cp .env.example .env
Έναρξη του διακομιστή ανάπτυξης
npm run dev
Ανοίξτε το πρόγραμμα περιήγησής σας και επισκεφθείτε:
http://localhost:3000
Διαθέσιμα σενάρια
| Εντολή | Περιγραφή |
|---|---|
| npm εκτέλεση προγραμματιστή | Έναρξη διακομιστή ανάπτυξης |
| npm εκτέλεση έκδοσης | Δημιουργία έκδοσης παραγωγής |
| έναρξη εκτέλεσης npm | Έναρξη διακομιστή παραγωγής |
| npm τρέχει χνούδι | Εκτέλεση ESLint |
| μορφή εκτέλεσης npm | Μορφοποίηση κώδικα με Prettier |
| npm εκτέλεση ελέγχου τύπου | Εκτέλεση ελέγχων TypeScript |
Μετάβαση σε ένα πραγματικό API
Αν θέλετε να συνδέσετε το έργο με ένα πραγματικό API backend, ακολουθήστε τα παρακάτω βήματα.
Βήμα 1: Απενεργοποίηση Mock API
Επεξεργαστείτε το .envαρχείο:
NEXT_PUBLIC_USE_MOCK_API=false
Βήμα 2: Ορίστε τη διεύθυνση URL βάσης API
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Βήμα 3: Αντιστοίχιση τύπων δεδομένων
Βεβαιωθείτε ότι το API backend σας επιστρέφει δεδομένα που ταιριάζουν με τους ορισμούς TypeScript στο:
src/types/index.ts
Δεν απαιτούνται πρόσθετες αλλαγές στον κώδικα.
Προσαρμογή περιεχομένου
Το ψεύτικο περιεχόμενο μπορεί να επεξεργαστεί μέσα σε:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Αυτό επιτρέπει στους προγραμματιστές να προσαρμόζουν γρήγορα το περιεχόμενο επίδειξης.
Προσαρμογή θέματος και περιβάλλοντος εργασίας χρήστη
Το παγκόσμιο στυλ μπορεί να βρεθεί σε:
src/app/globals.css
Το έργο χρησιμοποιεί τις ακόλουθες γραμματοσειρές:
DM Sans
JetBrains Mono
Μπορείτε να τροποποιήσετε στυλ ή να αντικαταστήσετε γραμματοσειρές ανάλογα με τις απαιτήσεις σχεδιασμού σας.
Σύναψη
Το NextJS Base Blog είναι ένα ισχυρό και μοντέρνο πρότυπο εκκίνησης για τη δημιουργία ενός ιστολογίου με το Next.js.
Τα βασικά πλεονεκτήματα του έργου περιλαμβάνουν:
σύγχρονη τεχνολογική στοίβα
καθαρή αρχιτεκτονική
προσομοίωση API για ανάπτυξη
εύκολη ενσωμάτωση με πραγματικά API backend
responsive UI και μοντέρνα χαρακτηριστικά
Εάν δημιουργείτε ένα ιστολόγιο, έναν ιστότοπο προγραμματιστή ή μια πλατφόρμα περιεχομένου με το Next.js, αυτό το αποθετήριο μπορεί να σας εξοικονομήσει σημαντικό χρόνο ανάπτυξης.
Εξερευνήστε τον πηγαίο κώδικα εδώ: https://github.com/bfotool/nextjs-base-blog