close

NextJS બેઝ બ્લોગ: Next.js 15 અને Tailwind સાથે આધુનિક બ્લોગ સ્ટાર્ટર

જો તમે Next.js સાથે બનેલ આધુનિક બ્લોગ સ્ટાર્ટર ટેમ્પ્લેટ શોધી રહ્યા છો, તો NextJS બેઝ બ્લોગ પ્રોજેક્ટ એક ઉત્તમ શરૂઆત છે. તે Next.js 15, React 19, TypeScript અને Tailwind CSS 4 સાથે બનેલ એક સંપૂર્ણ સુવિધાયુક્ત ઓપન-સોર્સ બ્લોગ એપ્લિકેશન છે .

આ પ્રોજેક્ટ સ્વચ્છ આર્કિટેક્ચર, આધુનિક UI componentsઅને મોક API લેયર પ્રદાન કરે છે, જે તેને એવા વિકાસકર્તાઓ માટે આદર્શ બનાવે છે જેઓ બેકએન્ડ સેટ કર્યા વિના ઝડપથી બ્લોગ બનાવવા માંગે છે.

ગિટહબ રિપોઝીટરી: https://github.com/bfotool/nextjs-base-blog

આ પ્રોજેક્ટ ખાસ કરીને આ માટે ઉપયોગી છે:

  • Next.js એપ શીખી રહેલા ડેવલપર્સRouter

  • ઝડપથી બ્લોગ અથવા કન્ટેન્ટ વેબસાઇટ બનાવવી

  • Next.js બોઈલરપ્લેટ પ્રોજેક્ટ બનાવી રહ્યા છીએ

  • વાસ્તવિક બેકએન્ડ API ને કનેક્ટ કરતા પહેલા UI સુવિધાઓ વિકસાવવી

પ્રોજેક્ટ ઝાંખી

નેક્સ્ટજેએસ બેઝ બ્લોગને પ્રોડક્શન-રેડી બ્લોગ ટેમ્પલેટ તરીકે ડિઝાઇન કરવામાં આવ્યો છે જેમાં આધુનિક કન્ટેન્ટ વેબસાઇટ્સમાં જોવા મળતી ઘણી સામાન્ય સુવિધાઓ છે.

આ પ્રોજેક્ટમાં શામેલ છે:

  • ફીચર્ડ પોસ્ટ્સ સાથેનું હોમપેજ

  • બ્લોગ પોસ્ટ પૃષ્ઠો

  • શ્રેણી ફિલ્ટરિંગ

  • પૂર્ણ-લખાણ શોધ

  • પૃષ્ઠ ક્રમાંકન

  • સામગ્રીનું કોષ્ટક

  • સંબંધિત પોસ્ટ્સ

  • શ્યામ/પ્રકાશ થીમ

આ પ્રોજેક્ટનો સૌથી રસપ્રદ ભાગ ફેક API લેયર છે, જે Axios ઇન્ટરસેપ્ટર્સનો ઉપયોગ કરીને REST API નું અનુકરણ કરે છે. આ વિકાસકર્તાઓને બેકએન્ડ સર્વરની જરૂર વગર એપ્લિકેશન બનાવવા અને તેનું પરીક્ષણ કરવાની મંજૂરી આપે છે .

મુખ્ય વિશેષતાઓ

હોમપેજ

હોમપેજ ઘણા મહત્વપૂર્ણ વિભાગો દર્શાવે છે:

  • ફીચર્ડ હીરો પોસ્ટ

  • શ્રેણી ફિલ્ટર્સ

  • બ્લોગ પોસ્ટ્સનો ગ્રીડ

  • પૃષ્ઠાંકિત નેવિગેશન

આ લેઆઉટ સંપૂર્ણપણે રિસ્પોન્સિવ છે અને ડેસ્કટોપ અને મોબાઇલ બંને ઉપકરણો માટે ઑપ્ટિમાઇઝ કરેલ છે.

બ્લોગ પોસ્ટ પેજ

દરેક લેખ ગતિશીલ માર્ગ દ્વારા સુલભ છે:

/blog/[slug]

બ્લોગ પોસ્ટ પેજમાં ઘણી ઉપયોગી સુવિધાઓ શામેલ છે:

  • સંપૂર્ણ લેખ સામગ્રી

  • સામગ્રીનું સ્વચાલિત કોષ્ટક

  • અંદાજિત વાંચન સમય

  • સોશિયલ શેર બટનો

  • સંબંધિત પોસ્ટ્સ સૂચનો

આ સુવિધાઓ આધુનિક બ્લોગિંગ પ્લેટફોર્મ જેવો વ્યાવસાયિક વાંચન અનુભવ બનાવવામાં મદદ કરે છે.

શ્રેણી પાના

વપરાશકર્તાઓ શ્રેણી દ્વારા પોસ્ટ્સ બ્રાઉઝ કરી શકે છે.

ઉદાહરણ રૂટ:

/blog/category/[slug]

આ સુવિધા વાચકોને ચોક્કસ વિષયોમાં સામગ્રીનું અન્વેષણ કરવાની મંજૂરી આપે છે.

શોધ કાર્યક્ષમતા

આ પ્રોજેક્ટમાં બિલ્ટ-ઇન સર્ચ પેજ શામેલ છે:

/search

શોધ સપોર્ટ કરે છે:

  • રીઅલ-ટાઇમ પરિણામો

  • ઇનપુટ રદિયો આપ્યો

  • શીર્ષકો, અવતરણો અને ટૅગ્સ દ્વારા શોધવું

આ ઉપયોગીતામાં સુધારો કરે છે અને વપરાશકર્તાઓને સંબંધિત સામગ્રી ઝડપથી શોધવામાં મદદ કરે છે.

વિશે અને સંપર્ક પાના

આ પ્રોજેક્ટમાં વ્યાવસાયિક બ્લોગ્સ પર સામાન્ય રીતે જોવા મળતા વધારાના પૃષ્ઠોનો પણ સમાવેશ થાય છે.

પૃષ્ઠ વિશે

વિશે પૃષ્ઠ રજૂ કરે છે:

  • ટીમ

  • પ્રોજેક્ટની વાર્તા

  • મુખ્ય મૂલ્યો

સંપર્ક પાનું

સંપર્ક પૃષ્ઠમાં સંપૂર્ણ માન્ય ફોર્મ શામેલ છે જેમાં:

  • ફોર્મ માન્યતા

  • ટોસ્ટ સૂચનાઓ

  • સફળતા અને ભૂલ પ્રતિસાદ

ડાર્ક મોડ સપોર્ટ

આ બ્લોગ ડાર્ક મોડ અને લાઇટ મોડને સપોર્ટ કરે છે .

સુવિધાઓમાં શામેલ છે:

  • ઓટોમેટિક સિસ્ટમ થીમ શોધ

  • મેન્યુઅલ ટૉગલ

  • લોકલ સ્ટોરેજનો ઉપયોગ કરીને થીમ પર્સિસ્ટન્સ

નકલી API સ્તર(બેકએન્ડ વિના વિકાસ)

આ પ્રોજેક્ટનો સૌથી રસપ્રદ ભાગ તેની નકલી API સિસ્ટમ છે .

વાસ્તવિક સર્વરને કૉલ કરવાને બદલે, એપ્લિકેશન REST API પ્રતિભાવોનું અનુકરણ કરવા માટે Axios ઇન્ટરસેપ્ટર્સનો ઉપયોગ કરે છે.

નકલી API કેવી રીતે કાર્ય કરે છે

  1. એક્સિઓસ ઇન્સ્ટન્સ આમાં બનાવવામાં આવે છે:

src/services/api-client.ts

  1. જ્યારે પર્યાવરણ ચલ સક્ષમ હોય ત્યારે:

NEXT_PUBLIC_USE_MOCK_API=true

  1. નેટવર્ક સુધી પહોંચતા પહેલા વિનંતીઓ અટકાવવામાં આવે છે.

  2. મોક હેન્ડલર્સ વાસ્તવિક વિલંબ(200-600 ms) સાથે નકલી પ્રતિભાવો આપે છે.

  3. પ્રતિભાવો વાસ્તવિક API પ્રતિભાવો જેવા વર્તે છે.

મોક ડેટા આમાં સંગ્રહિત થાય છે:

src/mocks/

સહિત:

  • નમૂના પોસ્ટ્સ

  • લેખકો

  • શ્રેણીઓ

ઉપલબ્ધ API એન્ડપોઇન્ટ્સ

મોક API ઘણા એન્ડપોઇન્ટ્સને સપોર્ટ કરે છે:

પદ્ધતિ અંતિમ બિંદુ વર્ણન
મેળવો /પોસ્ટ્સ પૃષ્ઠાંકિત બ્લોગ પોસ્ટ્સ
મેળવો /પોસ્ટ્સ/ફીચર્ડ ફીચર્ડ પોસ્ટ્સ
મેળવો /પોસ્ટ્સ/:સ્લગ એક બ્લોગ પોસ્ટ
મેળવો /શ્રેણીઓ શ્રેણી યાદી
મેળવો /લેખકો લેખકોની યાદી
પોસ્ટ કરો /સંપર્ક કરો સંપર્ક ફોર્મ સબમિટ કરો

ટેકનોલોજી સ્ટેક

આ પ્રોજેક્ટ આધુનિક ફ્રન્ટએન્ડ સ્ટેકનો ઉપયોગ કરે છે.

સ્તર ટેકનોલોજી
ફ્રેમવર્ક આગળ.જેએસ ૧૫
UI લાઇબ્રેરી પ્રતિક્રિયા 19
ભાષા ટાઇપસ્ક્રિપ્ટ
સ્ટાઇલિંગ ટેલવિન્ડ CSS 4
HTTP ક્લાયંટ એક્સિઓસ
ચિહ્નો લ્યુસાઇડ રિએક્ટ
લિનટિંગ ઇએસલિન્ટ
ફોર્મેટિંગ પ્રીટીયર

આ સ્ટેક પૂરી પાડે છે:

  • મજબૂત પ્રકારની સલામતી

  • જાળવણી યોગ્ય સ્થાપત્ય

  • આધુનિક વિકાસકર્તા અનુભવ

પ્રોજેક્ટ માળખું

પ્રોજેક્ટ માળખું સ્વચ્છ અને સ્કેલેબલ આર્કિટેક્ચરને અનુસરે છે.

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