Next.js আপনার React অ্যাপে অনেক অপ্টিমাইজেশনের যত্ন নেয় যাতে আপনাকে তা করতে না হয়
Next.js হল একটি মতামতযুক্ত React ফ্রেমওয়ার্ক যাতে বেশ কয়েকটি পারফর্ম্যান্স অপ্টিমাইজেশন বেক করা থাকে। ফ্রেমওয়ার্কের মূল উদ্দেশ্য হল, ডিফল্ট হিসেবে এইসব ক্ষমতা অন্তর্ভুক্ত করে অ্যাপ্লিকেশন যাতে শুরু হয় এবং যতটা সম্ভব পারফর্ম্যান্স বজায় রাখে তা নিশ্চিত করা।
এই ভূমিকায় ফ্রেমওয়ার্কের মাধ্যমে প্রদান করা অনেক ফিচার সম্পর্কে সংক্ষেপে উচ্চ স্তরে আলোচনা করা হবে। এই কালেকশনের অন্যান্য গাইডগুলি আরও বিস্তারিতভাবে ফিচারগুলি এক্সপ্লোর করবে।
আপনি কী শিখবেন?
যদিও Next.js ডিফল্ট হিসেবে বেশ কিছু পারফর্ম্যান্স অপ্টিমাইজেশন প্রদান করে, এই নির্দেশিকাগুলির উদ্দেশ্য হল সেগুলি আরও বিস্তারিতভাবে ব্যাখ্যা করা এবং আপনি কীভাবে সেগুলি ব্যবহার করে দ্রুত এবং পারফর্ম্যান্স অভিজ্ঞতা তৈরি করতে পারেন তা দেখানো।
React সাইটে অনেক অপ্টিমাইজেশন যোগ করা যেতে পারে যা Next.js-এর মাধ্যমে তৈরি অ্যাপ্লিকেশনের ক্ষেত্রেও কাজ করবে। এগুলি কভার করা হবে না কারণ Next.js নির্দিষ্টভাবে কী প্রদান করে তার উপর ফোকাস করা হয়। সাধারণ React অপ্টিমাইজেশন সম্পর্কে আরও জানতে, আমাদের React কালেকশন চেক করুন।
Next.js কীভাবে React থেকে আলাদা?
React হল একটি লাইব্রেরি যা কম্পোনেন্ট-ভিত্তিক পদ্ধতি ব্যবহার করে ইউজার ইন্টারফেস তৈরি করা সহজ করে তোলে। শক্তিশালী হলেও, React হল বিশেষভাবে একটি UI লাইব্রেরি। অনেক ডেভেলপার সম্পূর্ণ বিল্ড টুলচেন পেতে মডিউল বান্ডলার (যেমন, webpack) এবং ট্রান্সপিলারের (যেমন, Babel) মতো অতিরিক্ত টুলিং অন্তর্ভুক্ত করেন।
React কালেকশনে, আমরা Create React App (CRA) ব্যবহার করে React অ্যাপ দ্রুত চালু করার পদ্ধতি ব্যবহার করেছি। CRA একটি মাত্র কমান্ডের মাধ্যমে সম্পূর্ণ বিল্ড টুলচেন প্রদান করে React অ্যাপ্লিকেশন সেট-আপ করার ঝামেলা দূর করে।
CRA-তে কিছু ডিফল্ট অপ্টিমাইজেশন থাকলেও, টুলটির লক্ষ্য হল একটি সহজ এবং সরল সেটআপ প্রদান করা। ডেভেলপারদের এই বিকল্প দেওয়া হয় যাতে তারা সিদ্ধান্ত নিতে পারেন যে ইজেক্ট করবেন এবং কনফিগারেশন নিজেই পরিবর্তন করবেন কিনা।
Next.js, যা নতুন React অ্যাপ্লিকেশন তৈরি করতেও ব্যবহার করা যেতে পারে, একটি ভিন্ন পদ্ধতি গ্রহণ করে। এটি অবিলম্বে বেশ কয়েকটি সাধারণ অপ্টিমাইজেশন প্রদান করে যা অনেক ডেভেলপার পেতে চান কিন্তু সেট-আপ করা কঠিন বলে মনে করেন, যেমন:
- সার্ভার-সাইড রেন্ডারিং
- অটোমেটিক কোড-স্প্লিটিং
- রুট প্রিফেচিং
- ফাইল-সিস্টেম রাউটিং
- CSS-ইন-JS স্টাইলিং (
styled-jsx)
সেট আপ করা হচ্ছে
নতুন Next.js অ্যাপ্লিকেশন তৈরি করতে, এই কমান্ড রান করুন:
npx create-next-app new-app
তারপর ডিরেক্টরিতে নেভিগেট করে ডেভেলপমেন্ট সার্ভার চালু করুন:
cd new-app
npm run dev
নিম্নলিখিত এম্বেড করা কোডে নতুন Next.js অ্যাপের ডিরেক্টরি স্ট্রাকচার দেখানো হয়েছে।
- প্রোজেক্ট এডিট করার জন্য এডিট করতে রিমিক্স করুন বিকল্পে ক্লিক করুন।
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন।
লক্ষ্য করুন যে একটি ফাইল সহ pages/ ডিরেক্টরি তৈরি করা হয়েছে: index.jsx। Next.js ফাইল-সিস্টেম
রাউটিং পদ্ধতি অনুসরণ করে, যেখানে এই ডিরেক্টরির মধ্যে প্রতিটি পৃষ্ঠা একটি পৃথক রুট হিসেবে
পরিবেশন করা হয়। এই ডিরেক্টরিতে নতুন ফাইল তৈরি করলে, যেমন about.js, অটোমেটিক নতুন রুট (/about) তৈরি হবে।
অন্য যেকোনও React অ্যাপ্লিকেশনের মতো কম্পোনেন্টও তৈরি ও ব্যবহার করা যেতে পারে। components/
ডিরেক্টরি আগে থেকেই একটি কম্পোনেন্ট, nav.js দিয়ে তৈরি করা হয়েছে, যা আগে থেকেই
index.js-এ ইমপোর্ট করা হয়েছে। সাধারণত, Next.js-এ ব্যবহৃত প্রতিটি ইমপোর্ট শুধুমাত্র তখনই ফেচ করা হয় যখন সেই
পৃষ্ঠাটি লোড হয়, যা অটোমেটিক কোড-স্প্লিটিং-এর সুবিধা প্রদান করে।
এছাড়াও, Next.js-এ প্রতিটি প্রাথমিক পৃষ্ঠা লোড হল সার্ভার-সাইড রেন্ডার করা। আপনি DevTools-এ নেটওয়ার্ক প্যানেল খুললে, ডকুমেন্টের জন্য প্রাথমিক অনুরোধে সম্পূর্ণ সার্ভার-রেন্ডার করা পৃষ্ঠা ফেরত আসে।
Next.js-এর মাধ্যমে অটোমেটিক প্রদান করা অনেক ফিচারের মধ্যে এগুলি হল মাত্র কয়েকটি। অনেক কাস্টমাইজ করা যায় এবং বিভিন্ন ব্যবহারের ক্ষেত্রে তা পরিবর্তন করা যেতে পারে।
এরপরে কী?
শ্লেষাত্মক 😛
এই কালেকশনের অন্যান্য প্রতিটি গাইড একটি নির্দিষ্ট Next.js ফিচার বিস্তারিতভাবে এক্সপ্লোর করবে:
- পেজ নেভিগেশন দ্রুত করতে রুট প্রিফেচিং
- সার্চ ইঞ্জিন থেকে আরও দ্রুত লোড করার জন্য হাইব্রিড এবং শুধু-AMP পৃষ্ঠা দেখানো
- জাভাস্ক্রিপ্ট ফুটপ্রিন্ট কমাতে ডায়নামিক ইমপোর্ট সহ কোড-স্প্লিটিং কম্পোনেন্ট