विषयसूची  परिचय  प्रोजेक्ट की स्थापना  फ़ोल्डर संरचना को समझना  सभी ब्लॉग पोस्ट सूचीबद्ध करना  एकल ब्लॉग पोस्ट का प्रदर्शन  Next.js में लोडिंग यूआई और स्ट्रीमिंग का उपयोग  निष्कर्ष  संदर्भ  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  अब,   पर जाएं जहां आपको डिफ़ॉल्ट Next.js टेम्पलेट पेज मिलेगा। http://localhost:3000  3. फ़ोल्डर संरचना को समझना  इस बिंदु पर, हमारे Next.js ऐप की संरचना को समझना फायदेमंद है। फ़ोल्डर लेआउट के दृश्य प्रतिनिधित्व के लिए कृपया निम्नलिखित छवि देखें।   4. सभी ब्लॉग पोस्ट सूचीबद्ध करना  4.1. एपीआई मार्ग    के अंदर, हम ब्लॉग पोस्ट के लिए एक डमी एपीआई स्थापित करेंगे। यहां,   निर्दिष्ट करता है कि हम हर 60 सेकंड में अपने डेटा को पुनः सत्यापित करना चाहेंगे। /app/api/posts/route.js next: { revalidate: 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  प्रोत्साहित करना!

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

He/Him/Master of Discovery

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

He/Him/Master of Discovery

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps