একটি সাধারণ Next.js 13 ব্লগ তৈরি করার জন্য একটি ধাপে ধাপে নির্দেশিকা

সুচিপত্র

1. ভূমিকা
2. প্রজেক্ট সেট আপ করা হচ্ছে
3. ফোল্ডারের কাঠামো বোঝা
4. সমস্ত ব্লগ পোস্ট তালিকা
5. একটি একক ব্লগ পোস্ট প্রদর্শন
6. Next.js-এ লোডিং UI এবং স্ট্রিমিং ব্যবহার করা
7. উপসংহার
8. তথ্যসূত্র

1। পরিচিতি

হ্যালো সেখানে!

আজকের টিউটোরিয়ালে, আমরা 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। API রুট

/app/api/posts/route.js এর ভিতরে, আমরা ব্লগ পোস্টের জন্য একটি ডামি API সেট আপ করব। এখানে, 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। একটি একক পোস্টের জন্য 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 ব্যবহার করেছি

আপনার সময় এবং শেখার জন্য উত্সর্গ জন্য আপনাকে ধন্যবাদ. আপনার প্রতিক্রিয়া অপরিমেয় মূল্যবান. আপনার যদি এই পোস্টে কোনো সংযোজন বা সংশোধন থাকে, অনুগ্রহ করে যোগাযোগ করুন।

আমার সাথে সংযোগ করুন: dev.to community @leandro_nnz

hackernoon.com সম্প্রদায় @leandronnz

টুইটার @digpollution

চিয়ার্স!