Next.js বেসিক: পেজ তৈরি করা এবং বেসিক Routing ব্যাখ্যা করা হয়েছে

ওয়েব অ্যাপ্লিকেশন বিকাশের প্রক্রিয়ায়, পৃষ্ঠাগুলি পরিচালনা করা এবং তাদের মধ্যে নেভিগেট করা একটি গুরুত্বপূর্ণ দিক। এই নিবন্ধ সিরিজে, আমরা পৃষ্ঠাগুলি তৈরি করার এবং নেভিগেশন বাস্তবায়নের মৌলিক বিষয়গুলি নিয়ে আলোচনা করব Next.js ৷ নমনীয় এবং পরিচালনাযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরির জন্য এই মৌলিক ধারণাগুলি অপরিহার্য।

প্রথম পৃষ্ঠা তৈরি এবং প্রদর্শন করা

প্রথমত, আসুন জেনে নেই কিভাবে একটি সাধারণ পৃষ্ঠা তৈরি এবং প্রদর্শন করা যায় Next.js । pages আপনি আপনার প্রকল্পের ডিরেক্টরির মধ্যে ফাইল তৈরি করে পৃষ্ঠাগুলি তৈরি করতে পারেন । উদাহরণস্বরূপ, একটি স্বাগত পৃষ্ঠা তৈরি করতে, আপনি ডিরেক্টরির welcome.js মধ্যে একটি ফাইল তৈরি করতে পারেন pages ।

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

উপরের কোড স্নিপেটে, আমরা একটি সাধারণ স্বাগত পৃষ্ঠা তৈরি করেছি। আপনি যখন /welcome আপনার ওয়েব ব্রাউজারে পাথ অ্যাক্সেস করবেন, তখন আপনি বার্তাটি দেখতে পাবেন "এতে স্বাগতম Next.js !" প্রদর্শিত

মৌলিক Routing

Next.js একটি শক্তিশালী এবং স্বজ্ঞাত routing সিস্টেম অফার করে যা পৃষ্ঠাগুলির মধ্যে নেভিগেট করা সহজ করে তোলে। Routing in ডিরেক্টরির Next.js উপর ভিত্তি করে pages, এই ডিরেক্টরির প্রতিটি ফাইল একটি নির্দিষ্ট পথের সাথে সম্পর্কিত। উদাহরণস্বরূপ, ডিরেক্টরির about.js মধ্যে নামের একটি ফাইল pages পাথে অ্যাক্সেসযোগ্য একটি পৃষ্ঠা তৈরি করবে /about ।

লিঙ্ক এবং নেভিগেশন তৈরি করা

পৃষ্ঠাগুলির মধ্যে লিঙ্ক তৈরি করতে এবং তাদের মধ্যে নেভিগেট করতে, আমরা লাইব্রেরি <Link> থেকে উপাদান ব্যবহার করতে পারি। next/link নীচে স্বাগতম পৃষ্ঠা থেকে আমাদের সম্পর্কে পৃষ্ঠায় একটি লিঙ্ক তৈরি করার একটি উদাহরণ রয়েছে৷

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

উপরের উদাহরণে, আপনি যখন "আমাদের সম্পর্কে আরও জানুন" লিঙ্কে ক্লিক করেন, আপনাকে পৃষ্ঠায় পুনঃনির্দেশিত করা হবে /about ৷

উপসংহার

এই বিভাগে, আমরা কীভাবে সাধারণ পৃষ্ঠাগুলি তৈরি এবং প্রদর্শন করতে হয় এবং ডিরেক্টরি এবং উপাদান Next.js ব্যবহার করে পৃষ্ঠাগুলির মধ্যে নেভিগেশন কীভাবে প্রয়োগ করতে হয় তা অনুসন্ধান করেছি। এগুলি একটি অ্যাপ্লিকেশন তৈরিতে গুরুত্বপূর্ণ প্রাথমিক পদক্ষেপ। আসন্ন নিবন্ধগুলিতে, আমরা গতিশীল এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরির অন্যান্য দিকগুলি অন্বেষণ করতে থাকব। pages <Link> Next.js Next.js