एक सरल Next.js 13 ब्लॉग बनाने के लिए चरण-दर-चरण मार्गदर्शिका

विषयसूची

1. परिचय
2. प्रोजेक्ट की स्थापना
3. फ़ोल्डर संरचना को समझना
4. सभी ब्लॉग पोस्ट सूचीबद्ध करना
5. एकल ब्लॉग पोस्ट का प्रदर्शन
6. Next.js में लोडिंग यूआई और स्ट्रीमिंग का उपयोग
7. निष्कर्ष
8. संदर्भ

1 परिचय

नमस्ते!

आज के ट्यूटोरियल में, हम Next.js का उपयोग करके एक सरल लेकिन शक्तिशाली ब्लॉग बनाने की यात्रा शुरू कर रहे हैं।

चाहे आप Next.js में नए हों या आप बस कुछ बुनियादी बातों पर ध्यान देना चाह रहे हों, यह मार्गदर्शिका आपके लिए तैयार की गई है।

हम न केवल प्रोजेक्ट सेट अप करने के तरीके पर चर्चा करेंगे, बल्कि फ़ोल्डर संरचनाओं, सर्वर-साइड रेंडरिंग और भी बहुत कुछ पर भी चर्चा करेंगे।

आप संपूर्ण भंडार यहां पा सकते हैं

आइए सीधे गोता लगाएँ!

2. परियोजना की स्थापना

चरण 1: ऐप बनाएं

आरंभ करने के लिए, आइए अपना Next.js ऐप सेट करने के लिए निम्नलिखित कमांड का उपयोग करें:

 npx create-next-app@latest blog-example

एक बार हो जाने पर, नव निर्मित प्रोजेक्ट पर जाएँ:

 cd blog-example

चरण 2: विकास सर्वर प्रारंभ करें

हालाँकि मैं इस गाइड में yarn उपयोग कर रहा हूँ, बेझिझक npm या pnpm उपयोग करें:

 yarn dev

अब, http://localhost:3000 पर जाएं जहां आपको डिफ़ॉल्ट Next.js टेम्पलेट पेज मिलेगा।

3. फ़ोल्डर संरचना को समझना

इस बिंदु पर, हमारे Next.js ऐप की संरचना को समझना फायदेमंद है। फ़ोल्डर लेआउट के दृश्य प्रतिनिधित्व के लिए कृपया निम्नलिखित छवि देखें।

4. सभी ब्लॉग पोस्ट सूचीबद्ध करना

4.1. एपीआई मार्ग

/app/api/posts/route.js के अंदर, हम ब्लॉग पोस्ट के लिए एक डमी एपीआई स्थापित करेंगे। यहां, next: { revalidate: 60 } निर्दिष्ट करता है कि हम हर 60 सेकंड में अपने डेटा को पुनः सत्यापित करना चाहेंगे।

डेटा को पुनः मान्य करना

पुनर्वैधीकरण डेटा कैश को शुद्ध करने और नवीनतम डेटा को पुनः प्राप्त करने की प्रक्रिया है। यह तब उपयोगी होता है जब आपका डेटा बदलता है और आप यह सुनिश्चित करना चाहते हैं कि आप नवीनतम जानकारी दिखाएं।

कैश्ड डेटा को दो तरीकों से पुनः सत्यापित किया जा सकता है:

• समय-आधारित पुनर्वैधीकरण : एक निश्चित समय बीत जाने के बाद डेटा को स्वचालित रूप से पुनर्वैधीकरण करें। यह उस डेटा के लिए उपयोगी है जो बार-बार बदलता है और ताजगी उतनी महत्वपूर्ण नहीं है।
• ऑन-डिमांड पुनर्वैधीकरण : किसी घटना (जैसे फॉर्म सबमिशन) के आधार पर डेटा को मैन्युअल रूप से पुनः मान्य करें। ऑन-डिमांड पुनर्वैधीकरण एक बार में डेटा के समूहों को पुन: मान्य करने के लिए टैग-आधारित या पथ-आधारित दृष्टिकोण का उपयोग कर सकता है। यह तब उपयोगी होता है जब आप यह सुनिश्चित करना चाहते हैं कि नवीनतम डेटा जल्द से जल्द दिखाया जाए (उदाहरण के लिए जब आपके हेडलेस सीएमएस से सामग्री अपडेट की जाती है)।

समय-आधारित पुनर्वैधीकरण

एक समय अंतराल पर डेटा को पुनः सत्यापित करने के लिए, आप किसी संसाधन के कैश जीवनकाल (सेकंड में) को सेट करने के लिए fetch के next.revalidate विकल्प का उपयोग कर सकते हैं।

यहाँ एक उदाहरण है:

 import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }

4.2. पोस्ट प्रदर्शित करना

आइए एक घटक बनाएं, PostsPage , जो हमारे सर्वर से पोस्ट लाता है और प्रदर्शित करता है। हालाँकि मैंने इसे न्यूनतम रूप से स्टाइल किया है, बेझिझक इसे बेहतर बनाएं!

 export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

अब तक, आपको लेखों की एक सूची दिखनी चाहिए।

5. एकल ब्लॉग पोस्ट का प्रदर्शन

5.1. पोस्ट को लिंक करना

प्रत्येक पोस्ट शीर्षक को क्लिक करने योग्य बनाने के लिए, हम Next.js से Link घटक जोड़ेंगे:

 import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

5.2. एकल पोस्ट के लिए एपीआई रूट

Next.js एपीआई रूट में, हम उनकी आईडी के आधार पर विशिष्ट पोस्ट ला रहे हैं:

 import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }

5.3. एकल पोस्ट प्रदर्शित करना

अलग-अलग पोस्ट प्रदर्शित करने के लिए, Next.js में सर्वर और क्लाइंट घटकों के बीच अंतर को समझना महत्वपूर्ण है।

दिया गया घटक, SinglePost , क्लाइंट-साइड डेटा फ़ेचिंग का उपयोग करता है।

अनिवार्य रूप से, इसका मतलब यह है कि पेज के रेंडर होने के बाद डेटा क्लाइंट पर लाया जाता है। यह प्रदर्शन से समझौता किए बिना समृद्ध अन्तरक्रियाशीलता की अनुमति देता है। इसके बारे में अधिक जानकारी रिएक्ट एसेंशियल पर Next.js दस्तावेज़ में पढ़ी जा सकती है।

ग्राहक घटक

क्लाइंट घटक आपको अपने एप्लिकेशन में क्लाइंट-साइड इंटरैक्टिविटी जोड़ने में सक्षम बनाते हैं। Next.js में, वे सर्वर पर पहले से रेंडर किए जाते हैं और क्लाइंट पर हाइड्रेटेड होते हैं। आप क्लाइंट घटकों के बारे में सोच सकते हैं कि पेज राउटर में घटक हमेशा कैसे काम करते हैं।

 'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }

अब, आपको लेख विवरण देखने में सक्षम होना चाहिए। कृपया, स्टाइल की कमी के लिए क्षमा करें!

6. नेक्स्ट.जेएस में लोडिंग यूआई और स्ट्रीमिंग का उपयोग करना

युक्ति: उन्नत उपयोगकर्ता अनुभव के लिए, एक लोडिंग घटक जोड़ने पर विचार करें। Next.js लोडिंग यूआई और स्ट्रीमिंग के साथ एक इन-बिल्ट समाधान प्रदान करता है। यह आपकी सामग्री तैयार होने तक लोडिंग स्पिनर दिखाने में सहायता करता है। लोडिंग यूआई और स्ट्रीमिंग पर इस आधिकारिक गाइड के साथ गहराई से जानें।

उदाहरण के लिए:

 // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}

सात निष्कर्ष

Next.js एप्लिकेशन बनाना मज़ेदार और ज्ञानवर्धक दोनों हो सकता है।

हमने एक प्रोजेक्ट स्थापित करना, अपनी फ़ोल्डर संरचना प्रबंधित करना, ब्लॉग पोस्ट सूचीबद्ध करना, अलग-अलग पोस्ट प्रदर्शित करना और यहां तक कि लोडिंग स्थिति को भी छूना सीख लिया है।

वेब विकास समुदाय में Next.js की तीव्र वृद्धि के साथ, यहां सीखे गए कौशल अमूल्य हैं।

इस आधार पर विस्तार करें, अधिक सुविधाओं का पता लगाएं, और कोडिंग का आनंद लें!

8. सन्दर्भ

आधिकारिक Next.js दस्तावेज़ीकरण

लेख के डेटा के लिए, मैंने DummyJson का उपयोग किया

लेख बनाने के लिए, मैंने StackEdit का उपयोग किया

सीखने के लिए आपके समय और समर्पण के लिए धन्यवाद। आपकी प्रतिक्रिया अत्यंत मूल्यवान है. यदि आपके पास इस पोस्ट में कोई अतिरिक्त या सुधार है, तो कृपया संपर्क करें।

मेरे साथ जुड़ें: dev.to समुदाय @leandro_nnz

hackernoon.com समुदाय @leandronnz

ट्विटर @digpollution

प्रोत्साहित करना!