নেক্সট জেএস
নেক্সট জেএস হচ্ছে একটি প্রোডাকশন রেডী রিয়্যাক্ট ফ্রেমওয়ার্ক যেটা দিয়ে খুব সহজেই স্ট্যাটিক সাইট বা সার্ভার সাইড রেন্ডারড এপ্লিকেশন বানানো যায়
কন্ট্রিবিউটর
একটি ফ্রেশ নেক্সট জেএস প্রজেক্ট তৈরি করার জন্য (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
এই ফাংশন টি স্ট্যাটিক সাইট জেনারেশনের জন্য।এই ফাংশন 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