ডেভসংকেত

নেক্সট জেএস

নেক্সট জেএস হচ্ছে একটি প্রোডাকশন রেডী রিয়্যাক্ট ফ্রেমওয়ার্ক যেটা দিয়ে খুব সহজেই স্ট্যাটিক সাইট বা সার্ভার সাইড রেন্ডারড এপ্লিকেশন বানানো যায়

কন্ট্রিবিউটর

    শেয়ার করুন

    প্রিন্ট করুন

    প্রাথমিক কমান্ড সমূহ

    • একটি ফ্রেশ নেক্সট জেএস প্রজেক্ট তৈরি করার জন্য (npm)

      npx create-next-app project-name

    • একটি ফ্রেশ নেক্সট জেএস প্রজেক্ট তৈরি করার জন্য (yarn)

      yarn create next-app project-name

    • নেক্সট জেএস লোকাল ডেভেলপমেন্ট সার্ভার রান করার জন্য

      npm run dev

    • নেক্সট জেএস প্রোডাকশন সাইট বিল্ড করার জন্য

      npm run build

    • নেক্সট জেএস প্রোডাকশন সার্ভার রান করার জন্য

      npm run start

    • নেক্সট জেএস স্ট্যাটিক সাইটের আউটপুট তৈরি করা জন্য

      npm run export

    • নেক্সট জেএস CLI কামান্ড সূমহ দেখার জন্য

      npx next -h

    • নেক্সট জেএস ডেভেলপমেন্ট সার্ভার স্পেসিফিক পোর্টে রান করার জন্য

      npm run dev -- -p 8000

    নেক্সট জেএস Data Fetching ফাংশন getStaticProps(SSG) এর প্যারামিটার context অবজেক্ট এর বিষয়ে আরো তথ্য

    • এই প্রপার্টি মূলত dynamic রাউটের জন্য রাউট প্যারামিটার ধারন করে

      params

    • প্রিভিউ প্রপার্ট পেজটি প্রিভিউ মুডে আছে কিনা সেটা নির্দেশ করে। এটির ভ্যালু বুলিয়ান

      preview

    নেক্সট জেএস Data Fetching ফাংশন getStaticProps(SSG) থেকে একটি অবজেক্ট রিটার্ন করতে হবে। অবজেক্টে যা যা থাকতে হবে

    • এটি অবজেক্টের আবশ্যক প্রপার্টি। এর প্রপার্টির মধ্যে পেজের জন্য প্রয়োজনীয় ডাটা আপনার ইচ্ছা মত ডাটা স্ট্রাকচারে রিটার্ন করতে পারবেন

      props

    • এটি অবজেক্টের ঐচ্ছিক প্রপার্টি। এর প্রপার্টির মধ্যে আপনি সময় বলে দিতে পারেন সেকেন্ডে নেক্সট সেই সময় পর পর পেজ আবার তৈরি করবে

      revalidate

    নেক্সট জেএস Data Fetching ফাংশন getServerSideProps(SSR) থেকে একটি অবজেক্ট রিটার্ন করতে হবে। অবজেক্টে যা যা থাকতে হবে

    • এটি অবজেক্টের আবশ্যক প্রপার্টি। এর প্রপার্টির মধ্যে পেজের জন্য প্রয়োজনীয় ডাটা আপনার ইচ্ছা মত ডাটা স্ট্রাকচারে রিটার্ন করতে পারবেন

      props

    প্রয়োজনীয় লিঙ্ক সমূহ

    • নেক্সট জেএস রাউটার

      https://nextjs.org/docs/api-reference/next/router

    • নেক্সট জেএস লিংক

      https://nextjs.org/docs/api-reference/next/link

    • নেক্সট জেএস ইমেজ

      https://nextjs.org/docs/api-reference/next/image

    • নেক্সট জেএস ইমেজ অপ্টিমাইজ

      https://nextjs.org/docs/basic-features/image-optimization

    • নেক্সট জেএস হেড

      https://nextjs.org/docs/api-reference/next/head

    • নেক্সট জেএস ডায়নামিক রুট

      https://nextjs.org/docs/routing/dynamic-routes

    • নেক্সট জেএস কাস্টম সার্ভার

      https://nextjs.org/docs/advanced-features/custom-server

    • নেক্সট জেএস কর্মক্ষমতা পরিমাপ

      https://nextjs.org/docs/advanced-features/measuring-performance

    • নেক্সট জেএস কনফিগ

      https://nextjs.org/docs/api-reference/next.config.js/introduction

    নেক্সট জেএস Data Fetching ফাংশন (প্রয়োজনীয় ফাংশন page থেকে async ফাংশন হিসাবে export করতে হবে)

    • এই ফাংশন টি স্ট্যাটিক সাইট জেনারেশনের জন্য।এই ফাংশন build time এ ডাটা fetch করবে এবং প্যারামিটার হিসাবে context গ্রহন করবে

      getStaticProps

    • এই ফাংশন টি স্ট্যাটিক সাইট জেনারেশনের জন্য।এই ফাংশন build time এ dynamic route এর জন্য ডাটা fetch করে স্ট্যাটিক HTML পেজ রেন্ডার করবে। এই ফাংশনের কোন প্যারামিটার নেই

      getStaticPaths

    • এই ফাংশন টি সার্ভার সাইড রেন্ডারিং এর জন্য।এই ফাংশন টি প্রতিটি request এ ডাটা fetch করে পেজ রেন্ডার করবে।এই ফাংশন প্যারামিটার হিসাবে context গ্রহন করবে

      getServerSideProps

    নেক্সট জেএস Data Fetching ফাংশন getServerSideProps(SSR) এর প্যারামিটার context অবজেক্ট এর বিষয়ে আরো তথ্য

    • এই প্রপার্টি মূলত dynamic রাউটের জন্য রাউট প্যারামিটার ধারন করে

      params

    • এটি এইচটিটিপি ইনকামিং রিকুয়েস্ট অবজেক্ট। নোড জেএস req অবজেক্টএর মতই সমস্ত রিকুয়েস্ট সম্পর্কিত তথ্য এই অবজেক্ট এ থাকে

      req

    • এটি এইচটিটিপি রেসপন্স অবজেক্ট। নোড জেএস res অবজেক্টএর মতই প্রোপার এইচটিটিপি resonse তৈরি করার জন্য ব্যাবহার হয়

      res

    • এটি কুয়েরি স্ট্রিং। এট কুয়েরি স্ট্রিং পার্স করার জন্য ব্যাবহার করা হয়

      query

    নেক্সট জেএস Data Fetching ফাংশন getStaticProps(SSG) থেকে একটি অবজেক্ট রিটার্ন করতে হবে। অবজেক্টে যা যা থাকতে হবে

    • এটি অবজেক্টের আবশ্যক প্রপার্টি। এর প্রপার্টি থেকে আপনাকে এক টী আবজেক্টের অ্যারে রিটার্ন করতে হবে। প্রতিটি অবজেক্টে অবশ্যই এক টি প্রপার্টি থাকতে হবে params যেটি সাধারনত আপনার রিসোর্সের আইডেন্টিফাইয়ার হিসেবে কাজ করে। উদাহারনঃ {paths: [{ params: { id:1 } }] }

      paths

    • এটি অবজেক্টের ঐচ্ছিক প্রপার্টি। এটি বুলিয়ান ভ্যালু হতে হবে যদি false রিটার্ন করা হয় তাহলে রিসোর্সের জন্য পেজ না থাকলে 404 পেজ রিটার্ন করবে, আর true রিটার্ন করলে রিসোর্স ফেচ করে পেজ রেন্ডার করে রিটার্ন করবে

      fallback

    নেক্সট জেএস এর ডিফল্ট কিছু ট্যাগ

    • পেজের হেড ডাইনামিকভাবে কন্ট্রোল করার জন্য

      <Head></Head>

    • পেজের লিংক ডাইনামিকভাবে কন্ট্রোল করার জন্য

      <Link></Link>

    • ইমেজ ইফিশিয়েন্টভাবে ইম্পোর্ট করে ইউজ করার জন্য

      <Image />

    • পেজে স্ক্রিপ্ট ইম্পোর্ট করে ইউজ করার জন্য

      <Script />

    ডেভসংকেত সম্পর্কে

    ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

    স্পন্সর