সুচিপত্র  ভূমিকা  প্রজেক্ট সেট আপ করা হচ্ছে  ফোল্ডারের কাঠামো বোঝা  সমস্ত ব্লগ পোস্ট তালিকা  একটি একক ব্লগ পোস্ট প্রদর্শন  Next.js-এ লোডিং UI এবং স্ট্রিমিং ব্যবহার করা  উপসংহার  তথ্যসূত্র  1। পরিচিতি  হ্যালো সেখানে!  আজকের টিউটোরিয়ালে, আমরা 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। API রুট    এর ভিতরে, আমরা ব্লগ পোস্টের জন্য একটি ডামি API সেট আপ করব। এখানে,   নির্দিষ্ট করে যে আমরা প্রতি 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। একটি একক পোস্টের জন্য API রুট  Next.js API রুটে, আমরা তাদের আইডির উপর ভিত্তি করে নির্দিষ্ট পোস্ট আনছি:   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-এ, সেগুলি সার্ভারে   হয় এবং ক্লায়েন্টে হাইড্রেট করা হয়। আপনি ক্লায়েন্ট উপাদানগুলি সম্পর্কে ভাবতে পারেন যে কীভাবে   উপাদানগুলি সর্বদা কাজ করে। প্রি-রেন্ডার করা পেজ রাউটারের   '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-এ লোডিং UI এবং স্ট্রিমিং ব্যবহার করা    উন্নত ব্যবহারকারীর অভিজ্ঞতার জন্য, একটি লোডিং উপাদান যোগ করার কথা বিবেচনা করুন। Next.js লোডিং UI এবং স্ট্রিমিংয়ের সাথে একটি অন্তর্নির্মিত সমাধান প্রদান করে। আপনার সামগ্রী প্রস্তুত না হওয়া পর্যন্ত এটি একটি লোডিং স্পিনার দেখাতে সহায়তা করে৷   সাথে আরও গভীরে যান। টিপ: লোডিং UI এবং স্ট্রিমিং-এ এই অফিসিয়াল গাইডের  উদাহরণ স্বরূপ:   // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}  7. উপসংহার  একটি Next.js অ্যাপ্লিকেশন তৈরি করা মজাদার এবং আলোকিত উভয়ই হতে পারে।  আমরা একটি প্রকল্প সেট আপ করতে, আমাদের ফোল্ডার কাঠামো পরিচালনা করতে, ব্লগ পোস্টগুলি তালিকাভুক্ত করতে, পৃথক পোস্টগুলি প্রদর্শন করতে এবং এমনকি লোডিং অবস্থার উপর স্পর্শ করতে শিখেছি৷  ওয়েব ডেভেলপমেন্ট কমিউনিটিতে Next.js এর দ্রুত বৃদ্ধির সাথে, এখানে শেখা দক্ষতা অমূল্য।  এই ভিত্তির উপর প্রসারিত করুন, আরও বৈশিষ্ট্যগুলি অন্বেষণ করুন, এবং খুশি কোডিং করুন!  8. তথ্যসূত্র   অফিসিয়াল Next.js ডকুমেন্টেশন  নিবন্ধের ডেটার জন্য, আমি   ব্যবহার করেছি DummyJson  নিবন্ধ নির্মাণের জন্য, আমি   ব্যবহার করেছি StackEdit  আপনার সময় এবং শেখার জন্য উত্সর্গ জন্য আপনাকে ধন্যবাদ. আপনার প্রতিক্রিয়া অপরিমেয় মূল্যবান. আপনার যদি এই পোস্টে কোনো সংযোজন বা সংশোধন থাকে, অনুগ্রহ করে যোগাযোগ করুন।  আমার সাথে সংযোগ করুন:   community  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

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

AI এর শক্তি উন্মুক্ত করা। কাটিং-এজ টেকনিকের একটি পদ্ধতিগত পর্যালোচনা: বিমূর্ত ও ভূমিকা

আয় করতে ট্যাপ করুন: টেলিগ্রাম সোলানার আগে পরবর্তী 10 বিলিয়ন ক্রিপ্টো ব্যবহারকারীদের অনবোর্ড করতে পারে

অদেখা স্তরগুলি: কেন ব্যবহারকারীর সাক্ষাত্কারগুলি একটি অপরিবর্তনীয় সম্পদ

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

AI এর শক্তি উন্মুক্ত করা। কাটিং-এজ টেকনিকের একটি পদ্ধতিগত পর্যালোচনা: বিমূর্ত ও ভূমিকা

আয় করতে ট্যাপ করুন: টেলিগ্রাম সোলানার আগে পরবর্তী 10 বিলিয়ন ক্রিপ্টো ব্যবহারকারীদের অনবোর্ড করতে পারে

অদেখা স্তরগুলি: কেন ব্যবহারকারীর সাক্ষাত্কারগুলি একটি অপরিবর্তনীয় সম্পদ

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps