మీరు Next.js తో నిర్మించిన ఆధునిక బ్లాగ్ స్టార్టర్ టెంప్లేట్ కోసం చూస్తున్నట్లయితే, NextJS బేస్ బ్లాగ్ ప్రాజెక్ట్ ఒక అద్భుతమైన ప్రారంభ స్థానం. ఇది Next.js 15, React 19, TypeScript మరియు Tailwind CSS 4 తో నిర్మించిన పూర్తి ఫీచర్లతో కూడిన ఓపెన్-సోర్స్ బ్లాగ్ అప్లికేషన్ .
ఈ ప్రాజెక్ట్ క్లీన్ ఆర్కిటెక్చర్, ఆధునిక UI componentsమరియు మాక్ API లేయర్ను అందిస్తుంది, ఇది బ్యాకెండ్ను సెటప్ చేయకుండా త్వరగా బ్లాగును నిర్మించాలనుకునే డెవలపర్లకు అనువైనదిగా చేస్తుంది.
GitHub రిపోజిటరీ: https://github.com/bfotool/nextjs-base-blog
ఈ ప్రాజెక్ట్ ముఖ్యంగా వీటికి ఉపయోగపడుతుంది:
Next.js యాప్ నేర్చుకుంటున్న డెవలపర్లుRouter
బ్లాగ్ లేదా కంటెంట్ వెబ్సైట్ను త్వరగా నిర్మించడం
Next.js బాయిలర్ప్లేట్ ప్రాజెక్ట్ను సృష్టిస్తోంది
నిజమైన బ్యాకెండ్ API ని కనెక్ట్ చేసే ముందు UI లక్షణాలను అభివృద్ధి చేయడం
ప్రాజెక్ట్ అవలోకనం
NextJS బేస్ బ్లాగ్ అనేది ఆధునిక కంటెంట్ వెబ్సైట్లలో కనిపించే అనేక సాధారణ లక్షణాలతో ప్రొడక్షన్-రెడీ బ్లాగ్ టెంప్లేట్గా రూపొందించబడింది .
ఈ ప్రాజెక్టులో ఇవి ఉన్నాయి:
ఫీచర్ చేసిన పోస్ట్లతో హోమ్పేజీ
బ్లాగ్ పోస్ట్ పేజీలు
వర్గం ఫిల్టరింగ్
పూర్తి-టెక్స్ట్ శోధన
పేజీల రూపకల్పన
విషయ సూచిక
సంబంధిత పోస్ట్లు
చీకటి/కాంతి థీమ్
ఈ ప్రాజెక్ట్ యొక్క అత్యంత ఆసక్తికరమైన భాగాలలో ఒకటి ఫేక్ API లేయర్, ఇది Axios ఇంటర్సెప్టర్లను ఉపయోగించి REST APIని అనుకరిస్తుంది. ఇది డెవలపర్లు బ్యాకెండ్ సర్వర్ అవసరం లేకుండా అప్లికేషన్ను నిర్మించడానికి మరియు పరీక్షించడానికి అనుమతిస్తుంది .
ముఖ్య లక్షణాలు
హోమ్పేజీ
హోమ్పేజీ అనేక ముఖ్యమైన విభాగాలను ప్రదర్శిస్తుంది:
ఫీచర్డ్ హీరో పోస్ట్
వర్గం ఫిల్టర్లు
బ్లాగ్ పోస్ట్ల గ్రిడ్
పేజీల వారీగా నావిగేషన్
లేఅవుట్ పూర్తిగా స్పందించే మరియు డెస్క్టాప్ మరియు మొబైల్ పరికరాల రెండింటికీ ఆప్టిమైజ్ చేయబడింది.
బ్లాగ్ పోస్ట్ పేజీ
ప్రతి కథనాన్ని డైనమిక్ మార్గం ద్వారా యాక్సెస్ చేయవచ్చు:
/blog/[slug]
బ్లాగ్ పోస్ట్ పేజీలో అనేక ఉపయోగకరమైన లక్షణాలు ఉన్నాయి:
పూర్తి వ్యాసం కంటెంట్
ఆటోమేటిక్ విషయ సూచిక
అంచనా పఠన సమయం
సామాజిక భాగస్వామ్య బటన్లు
సంబంధిత పోస్ట్ల సూచనలు
ఈ లక్షణాలు ఆధునిక బ్లాగింగ్ ప్లాట్ఫారమ్ల మాదిరిగానే ప్రొఫెషనల్ పఠన అనుభవాన్ని సృష్టించడంలో సహాయపడతాయి.
వర్గం పేజీలు
వినియోగదారులు వర్గం వారీగా పోస్ట్లను బ్రౌజ్ చేయవచ్చు.
ఉదాహరణ మార్గం:
/blog/category/[slug]
ఈ ఫీచర్ పాఠకులను నిర్దిష్ట అంశాలలోని కంటెంట్ను అన్వేషించడానికి అనుమతిస్తుంది.
శోధన కార్యాచరణ
ఈ ప్రాజెక్ట్ అంతర్నిర్మిత శోధన పేజీని కలిగి ఉంది:
/search
శోధన మద్దతులు:
రియల్-టైమ్ ఫలితాలు
డీబౌన్స్డ్ ఇన్పుట్
శీర్షికలు, సారాంశాలు మరియు ట్యాగ్లలో శోధించడం
ఇది వినియోగ సౌలభ్యాన్ని మెరుగుపరుస్తుంది మరియు వినియోగదారులు సంబంధిత కంటెంట్ను త్వరగా కనుగొనడంలో సహాయపడుతుంది.
పరిచయం మరియు సంప్రదింపు పేజీలు
ఈ ప్రాజెక్టులో ప్రొఫెషనల్ బ్లాగులలో సాధారణంగా కనిపించే అదనపు పేజీలు కూడా ఉన్నాయి.
పేజీ గురించి
పరిచయం పేజీ పరిచయం చేస్తుంది:
జట్టు
ప్రాజెక్ట్ కథ
ప్రధాన విలువలు
కాంటాక్ట్ పేజీ
కాంటాక్ట్ పేజీలో పూర్తిగా ధృవీకరించబడిన ఫారమ్ ఉంటుంది, ఇందులో ఇవి ఉంటాయి:
ఫారమ్ ధ్రువీకరణ
టోస్ట్ నోటిఫికేషన్లు
విజయం మరియు లోపం అభిప్రాయం
డార్క్ మోడ్ సపోర్ట్
ఈ బ్లాగ్ డార్క్ మోడ్ మరియు లైట్ మోడ్లకు మద్దతు ఇస్తుంది .
ఫీచర్లు:
ఆటోమేటిక్ సిస్టమ్ థీమ్ గుర్తింపు
మాన్యువల్ టోగుల్
localStorage ఉపయోగించి థీమ్ నిలకడ
నకిలీ API లేయర్(బ్యాకెండ్ లేకుండా అభివృద్ధి)
ఈ ప్రాజెక్ట్ యొక్క అత్యంత ఆసక్తికరమైన భాగాలలో ఒకటి దాని నకిలీ API వ్యవస్థ .
నిజమైన సర్వర్కు కాల్ చేయడానికి బదులుగా, అప్లికేషన్ REST API ప్రతిస్పందనలను అనుకరించడానికి Axios ఇంటర్సెప్టర్లను ఉపయోగిస్తుంది.
నకిలీ API ఎలా పనిచేస్తుంది
ఆక్సియోస్ ఉదాహరణ దీనిలో సృష్టించబడింది:
src/services/api-client.ts
ఎన్విరాన్మెంట్ వేరియబుల్ ఎనేబుల్ చేయబడినప్పుడు:
NEXT_PUBLIC_USE_MOCK_API=true
నెట్వర్క్ను చేరుకోవడానికి ముందే అభ్యర్థనలు అడ్డగించబడతాయి.
మాక్ హ్యాండ్లర్లు వాస్తవిక జాప్యాలతో(200–600 ms) నకిలీ ప్రతిస్పందనలను తిరిగి ఇస్తారు.
ప్రతిస్పందనలు నిజమైన API ప్రతిస్పందనల వలె ప్రవర్తిస్తాయి.
మాక్ డేటా దీనిలో నిల్వ చేయబడుతుంది:
src/mocks/
సహా:
నమూనా పోస్ట్లు
రచయితలు
వర్గాలు
అందుబాటులో ఉన్న API ఎండ్ పాయింట్లు
మాక్ API అనేక ఎండ్ పాయింట్లకు మద్దతు ఇస్తుంది:
| పద్ధతి | ఎండ్పాయింట్ | వివరణ |
|---|---|---|
| పొందండి | /పోస్టులు | పేజీల వారీగా బ్లాగ్ పోస్ట్లు |
| పొందండి | /పోస్ట్లు/ఫీచర్ చేయబడింది | ఫీచర్ చేయబడిన పోస్ట్లు |
| పొందండి | /పోస్ట్లు/:స్లగ్ | ఒకే బ్లాగ్ పోస్ట్ |
| పొందండి | /వర్గాలు | కేటగిరీ జాబితా |
| పొందండి | /రచయితలు | రచయిత జాబితా |
| పోస్ట్ | /సంప్రదింపు | కాంటాక్ట్ ఫారమ్ను సమర్పించండి |
టెక్నాలజీ స్టాక్
ఈ ప్రాజెక్ట్ ఆధునిక ఫ్రంటెండ్ స్టాక్ను ఉపయోగిస్తుంది.
| పొర | టెక్నాలజీ |
|---|---|
| ముసాయిదా | నెక్స్ట్.జెఎస్ 15 |
| UI లైబ్రరీ | ప్రతిచర్య 19 |
| భాష | టైప్స్క్రిప్ట్ |
| స్టైలింగ్ | టెయిల్విండ్ CSS 4 |
| HTTP క్లయింట్ | ఆక్సియోస్ |
| చిహ్నాలు | లూసైడ్ రియాక్ట్ |
| లైనింగ్ | ESLint తెలుగు in లో |
| ఫార్మాటింగ్ | ప్రెట్టియర్ |
ఈ స్టాక్ వీటిని అందిస్తుంది:
బలమైన రకం భద్రత
నిర్వహించదగిన నిర్మాణం
ఆధునిక డెవలపర్ అనుభవం
ప్రాజెక్ట్ నిర్మాణం
ప్రాజెక్ట్ నిర్మాణం శుభ్రమైన మరియు స్కేలబుల్ ఆర్కిటెక్చర్ను అనుసరిస్తుంది.
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 యొక్క కొత్త వెర్షన్లలో ప్రవేశపెట్టబడిన Next.js యాప్ Routerఆర్కిటెక్చర్ను అనుసరిస్తుంది.
భాగాలు
UIలు componentsలాజికల్ గ్రూపులుగా నిర్వహించబడ్డాయి:
components/layout
components/common
components/blog
ఈ నిర్మాణం UI కోడ్ను క్రమబద్ధంగా ఉంచుతుంది మరియు నిర్వహించడానికి సులభం చేస్తుంది.
సేవల పొర
ఫోల్డర్ servicesAPI-సంబంధిత లాజిక్ను కలిగి ఉంది:
API క్లయింట్ కాన్ఫిగరేషన్
పోస్ట్ సర్వీస్
కేటగిరీ సర్వీస్
ఫారమ్ సేవను సంప్రదించండి
ఈ పొర UI నుండి డేటా పొందడం లాజిక్ను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 రన్ ఫార్మాట్ | ప్రెట్టియర్తో కోడ్ను ఫార్మాట్ చేయండి |
| npm రన్ టైప్-చెక్ | టైప్స్క్రిప్ట్ తనిఖీలను అమలు చేయండి |
రియల్ API కి మారుతోంది
మీరు ప్రాజెక్ట్ను నిజమైన బ్యాకెండ్ APIకి కనెక్ట్ చేయాలనుకుంటే, ఈ దశలను అనుసరించండి.
దశ 1: మాక్ API ని నిలిపివేయండి
ఫైల్ను సవరించండి .env:
NEXT_PUBLIC_USE_MOCK_API=false
దశ 2: API బేస్ URL ని సెట్ చేయండి
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
దశ 3: డేటా రకాలను సరిపోల్చండి
మీ బ్యాకెండ్ API టైప్స్క్రిప్ట్ నిర్వచనాలకు సరిపోలే డేటాను అందిస్తుందని నిర్ధారించుకోండి:
src/types/index.ts
అదనపు కోడ్ మార్పులు అవసరం లేదు.
కంటెంట్ను అనుకూలీకరించడం
నకిలీ కంటెంట్ను లోపల సవరించవచ్చు:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
ఇది డెవలపర్లు డెమో కంటెంట్ను త్వరగా అనుకూలీకరించడానికి అనుమతిస్తుంది.
థీమ్ మరియు UIని అనుకూలీకరించడం
గ్లోబల్ స్టైలింగ్ను ఇక్కడ చూడవచ్చు:
src/app/globals.css
ఈ ప్రాజెక్ట్ కింది ఫాంట్లను ఉపయోగిస్తుంది:
డిఎం సాన్స్
జెట్బ్రెయిన్స్ మోనో
మీ డిజైన్ అవసరాలను బట్టి మీరు శైలులను సవరించవచ్చు లేదా ఫాంట్లను భర్తీ చేయవచ్చు.
ముగింపు
NextJS బేస్ బ్లాగ్ అనేది Next.jsతో బ్లాగును నిర్మించడానికి ఒక శక్తివంతమైన మరియు ఆధునిక స్టార్టర్ టెంప్లేట్.
ఈ ప్రాజెక్ట్ యొక్క ముఖ్య ప్రయోజనాలు:
ఆధునిక సాంకేతిక పరిజ్ఞానం
క్లీన్ ఆర్కిటెక్చర్
అభివృద్ధి కోసం మాక్ API
నిజమైన బ్యాకెండ్ API లతో సులభమైన ఏకీకరణ
ప్రతిస్పందించే UI మరియు ఆధునిక లక్షణాలు
మీరు Next.jsతో బ్లాగ్, డెవలపర్ వెబ్సైట్ లేదా కంటెంట్ ప్లాట్ఫారమ్ను నిర్మిస్తుంటే, ఈ రిపోజిటరీ మీకు గణనీయమైన అభివృద్ధి సమయాన్ని ఆదా చేస్తుంది.
సోర్స్ కోడ్ను ఇక్కడ అన్వేషించండి: https://github.com/bfotool/nextjs-base-blog