close

NextJS Base ბლოგი: თანამედროვე ბლოგის დამწყები Next.js 15-ით და Tailwind-ით

თუ თქვენ ეძებთ Next.js-ით შექმნილ თანამედროვე ბლოგის სასტარტო შაბლონს, NextJS Base Blog პროექტი შესანიშნავი საწყისი წერტილია. ეს არის სრულფუნქციური ღია კოდის ბლოგის აპლიკაცია, რომელიც შექმნილია Next.js 15-ის, React 19-ის, TypeScript-ის და Tailwind CSS 4-ის გამოყენებით .

პროექტი გთავაზობთ სუფთა არქიტექტურას, თანამედროვე ინტერფეისს componentsდა იმიტირებულ API ფენას, რაც მას იდეალურს ხდის დეველოპერებისთვის, რომელთაც სურთ ბლოგის სწრაფად შექმნა ბექენდის დაყენების გარეშე.

GitHub-ის საცავი: https://github.com/bfotool/nextjs-base-blog

ეს პროექტი განსაკუთრებით სასარგებლოა:

  • დეველოპერები სწავლობენ Next.js აპლიკაციასRouter

  • ბლოგის ან კონტენტის ვებსაიტის სწრაფად შექმნა

  • Next.js-ის შაბლონური პროექტის შექმნა

  • UI ფუნქციების შემუშავება რეალური backend API-ის დაკავშირებამდე

პროექტის მიმოხილვა

NextJS Base Blog შექმნილია როგორც წარმოებისთვის მზა ბლოგის შაბლონი, რომელსაც თანამედროვე კონტენტის ვებსაიტებში არსებული მრავალი საერთო ფუნქცია აქვს.

პროექტი მოიცავს:

  • მთავარი გვერდი გამორჩეული პოსტებით

  • ბლოგ პოსტების გვერდები

  • კატეგორიის ფილტრაცია

  • სრული ტექსტის ძიება

  • გვერდების დახარისხება

  • შინაარსი

  • დაკავშირებული პოსტები

  • მუქი/ღია თემა

პროექტის ერთ-ერთი ყველაზე საინტერესო ნაწილია Fake API Layer, რომელიც ახდენს REST API-ის სიმულირებას Axios ინტერცეპტორების გამოყენებით. ეს საშუალებას აძლევს დეველოპერებს შექმნან და გამოსცადონ აპლიკაცია ბექენდ სერვერის გარეშე .

ძირითადი მახასიათებლები

მთავარი გვერდი

მთავარ გვერდზე რამდენიმე მნიშვნელოვანი განყოფილებაა ნაჩვენები:

  • გამორჩეული გმირის პოსტი

  • კატეგორიის ფილტრები

  • ბლოგ პოსტების ბადე

  • გვერდებიანი ნავიგაცია

განლაგება სრულად ადაპტირებადია და ოპტიმიზირებულია როგორც დესკტოპის, ასევე მობილური მოწყობილობებისთვის.

ბლოგ პოსტის გვერდი

თითოეული სტატია ხელმისაწვდომია დინამიური მარშრუტის საშუალებით:

/blog/[slug]

ბლოგ პოსტის გვერდი მოიცავს რამდენიმე სასარგებლო ფუნქციას:

  • სტატიის სრული შინაარსი

  • ავტომატური შინაარსის ცხრილი

  • სავარაუდო კითხვის დრო

  • სოციალური გაზიარების ღილაკები

  • დაკავშირებული პოსტების შემოთავაზებები

ეს ფუნქციები ხელს უწყობს პროფესიონალური კითხვის გამოცდილების შექმნას, თანამედროვე ბლოგინგის პლატფორმების მსგავსი.

კატეგორიის გვერდები

მომხმარებლებს შეუძლიათ პოსტების კატეგორიის მიხედვით დათვალიერება.

მაგალითის მარშრუტი:

/blog/category/[slug]

ეს ფუნქცია მკითხველს საშუალებას აძლევს, შეისწავლოს შინაარსი კონკრეტულ თემებში.

ძიების ფუნქციონალი

პროექტს აქვს ჩაშენებული საძიებო გვერდი:

/search

ძიება მხარს უჭერს:

  • რეალურ დროში შედეგები

  • გაუქმებული შეყვანა

  • სათაურების, ამონარიდების და თეგების მიხედვით ძიება

ეს აუმჯობესებს გამოყენებადობას და ეხმარება მომხმარებლებს სწრაფად იპოვონ შესაბამისი შინაარსი.

შესახებ და საკონტაქტო გვერდები

პროექტი ასევე მოიცავს დამატებით გვერდებს, რომლებიც ხშირად გვხვდება პროფესიულ ბლოგებზე.

გვერდის შესახებ

გვერდი „შესახებ“ წარმოგიდგენთ:

  • გუნდი

  • პროექტის ისტორია

  • ძირითადი ღირებულებები

საკონტაქტო გვერდი

საკონტაქტო გვერდი შეიცავს სრულად დამოწმებულ ფორმას, რომელიც შეიცავს:

  • ფორმის ვალიდაცია

  • შეტყობინებები

  • წარმატებისა და შეცდომის გამოხმაურება

ბნელი რეჟიმის მხარდაჭერა

ბლოგი მხარს უჭერს როგორც ბნელ, ასევე ღია რეჟიმებს .

მახასიათებლები მოიცავს:

  • სისტემის თემის ავტომატური ამოცნობა

  • ხელით გადართვა

  • თემის შენარჩუნება localStorage-ის გამოყენებით

ყალბი API ფენა(განვითარება ბექენდის გარეშე)

ამ პროექტის ერთ-ერთი ყველაზე საინტერესო ნაწილი მისი ყალბი API სისტემაა .

რეალური სერვერის გამოძახების ნაცვლად, აპლიკაცია იყენებს Axios ინტერცეპტორებს REST API პასუხების სიმულირებისთვის.

როგორ მუშაობს ყალბი API

  1. Axios-ის ეგზემპლარი იქმნება:

src/services/api-client.ts

  1. როდესაც გარემოს ცვლადი ჩართულია:

NEXT_PUBLIC_USE_MOCK_API=true

  1. მოთხოვნები ქსელში მოხვედრამდე იჭრება.

  2. იმიტირებული დამმუშავებლები ყალბ პასუხებს რეალისტური დაგვიანებით(200–600 მილიწამი) აბრუნებენ.

  3. პასუხები იქცევიან როგორც რეალური API პასუხები.

იმიტირებული მონაცემები ინახება:

src/mocks/

მათ შორის:

  • ნიმუშის პოსტები

  • ავტორები

  • კატეგორიები

ხელმისაწვდომი API საბოლოო წერტილები

მოჩვენებითი API მხარს უჭერს რამდენიმე საბოლოო წერტილს:

მეთოდი საბოლოო წერტილი აღწერა
მიიღეთ /პოსტები გვერდებად დაყოფილი ბლოგის პოსტები
მიიღეთ /პოსტები/რჩეული გამორჩეული პოსტები
მიიღეთ /პოსტები/:slug ერთი ბლოგ პოსტი
მიიღეთ /კატეგორიები კატეგორიების სია
მიიღეთ /ავტორები ავტორთა სია
პოსტი /კონტაქტი საკონტაქტო ფორმის გაგზავნა

ტექნოლოგიების დასტა

პროექტი იყენებს თანამედროვე ფრონტენდ სტეკს.

ფენა ტექნოლოგია
ჩარჩო შემდეგი.js 15
ინტერფეისის ბიბლიოთეკა რეაქცია 19
ენა TypeScript
სტილი Tailwind CSS 4
HTTP კლიენტი აქსიოსი
ხატები ლუსიდის რეაქცია
ლინტინგი 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.js აპლიკაციის Routerარქიტექტურას მიჰყვება, რომელიც Next.js-ის ახალ ვერსიებშია წარმოდგენილი.

კომპონენტები

ინტერფეისი 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 run developer გაუშვით განვითარების სერვერი
npm-ის გაშვების ბილდი შექმენით საწარმოო ბილდი
npm გაშვების დაწყება წარმოების სერვერის გაშვება
npm run lint ESLint-ის გაშვება
npm გაშვების ფორმატი კოდის ფორმატირება Prettier-ით
npm-ის გაშვების ტიპის შემოწმება TypeScript შემოწმების გაშვება

რეალურ API-ზე გადასვლა

თუ გსურთ პროექტის რეალურ backend API-თან დაკავშირება, მიჰყევით ამ ნაბიჯებს.

ნაბიჯი 1: გამორთეთ Mock API

ფაილის რედაქტირება .env:

NEXT_PUBLIC_USE_MOCK_API=false

ნაბიჯი 2: დააყენეთ API ბაზის URL

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

ნაბიჯი 3: მონაცემთა ტიპების შესაბამისობა

დარწმუნდით, რომ თქვენი backend API აბრუნებს მონაცემებს, რომლებიც შეესაბამება 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-ის იმიტაცია

  • მარტივი ინტეგრაცია რეალურ backend API-ებთან

  • რესპონსიული ინტერფეისი და თანამედროვე ფუნქციები

თუ Next.js-ის გამოყენებით ბლოგს, დეველოპერის ვებსაიტს ან კონტენტ პლატფორმას ქმნით, ამ საცავს შეუძლია მნიშვნელოვნად დაგიზოგოთ დრო განვითარებისთვის.

საწყისი კოდის სანახავად ეწვიეთ ბმულს: https://github.com/bfotool/nextjs-base-blog