Next.js আপনার প্রতিক্রিয়া অ্যাপে অনেকগুলি অপ্টিমাইজেশনের যত্ন নেয় যাতে আপনাকে এটি করতে না হয়
Next.js হল একটি মতামতযুক্ত প্রতিক্রিয়া ফ্রেমওয়ার্ক যার মধ্যে অনেকগুলি পারফরম্যান্স অপ্টিমাইজেশান বেক করা হয়েছে৷ ফ্রেমওয়ার্কের পিছনে মূল ধারণাটি হল ডিফল্টরূপে এই ক্ষমতাগুলি অন্তর্ভুক্ত করে অ্যাপ্লিকেশনগুলি শুরু হওয়া এবং যথাসম্ভব কার্যকরী থাকা নিশ্চিত করা৷
এই ভূমিকাটি একটি উচ্চ স্তরে ফ্রেমওয়ার্ক দ্বারা প্রদত্ত অনেক বৈশিষ্ট্যকে সংক্ষেপে কভার করবে। এই সংগ্রহের অন্যান্য গাইডগুলি আরও বিস্তারিতভাবে বৈশিষ্ট্যগুলি অন্বেষণ করবে৷
আপনি কি শিখবেন?
যদিও Next.js ডিফল্টরূপে বেশ কিছু কর্মক্ষমতা অপ্টিমাইজেশান প্রদান করে, এই নির্দেশিকাগুলির লক্ষ্য হল সেগুলিকে আরও বিস্তারিতভাবে ব্যাখ্যা করা এবং আপনাকে দেখায় যে আপনি কীভাবে একটি দ্রুত এবং পারফরম্যান্স অভিজ্ঞতা তৈরি করতে তাদের ব্যবহার করতে পারেন৷
অনেকগুলি অপ্টিমাইজেশান রয়েছে যা সাধারণভাবে প্রতিক্রিয়া সাইটগুলিতে যুক্ত করা যেতে পারে যা Next.js এর সাথে নির্মিত অ্যাপ্লিকেশনগুলির জন্যও কাজ করবে। এগুলি আচ্ছাদিত করা হবে না যেহেতু ফোকাস Next.js বিশেষভাবে যা প্রদান করে তার উপর। সাধারণ প্রতিক্রিয়া অপ্টিমাইজেশন সম্পর্কে আরও জানতে, আমাদের প্রতিক্রিয়া সংগ্রহ দেখুন।
কিভাবে Next.js প্রতিক্রিয়া থেকে আলাদা?
প্রতিক্রিয়া একটি লাইব্রেরি যা একটি উপাদান-ভিত্তিক পদ্ধতি ব্যবহার করে ব্যবহারকারী ইন্টারফেস তৈরি করা সহজ করে তোলে। যদিও শক্তিশালী, প্রতিক্রিয়া বিশেষভাবে একটি UI লাইব্রেরি। অনেক ডেভেলপার অতিরিক্ত টুলিং অন্তর্ভুক্ত করে যেমন একটি মডিউল বান্ডলার (উদাহরণস্বরূপ ওয়েবপ্যাক ) এবং একটি ট্রান্সপিলার (উদাহরণস্বরূপ ব্যাবেল ) একটি সম্পূর্ণ বিল্ড টুলচেন থাকতে।
রিঅ্যাক্ট সংগ্রহে , আমরা রিঅ্যাক্ট অ্যাপগুলিকে দ্রুত স্পিন করতে ক্রিয়েট রিঅ্যাক্ট অ্যাপ (CRA) ব্যবহার করার পদ্ধতি নিয়েছি। সিআরএ একটি একক কমান্ড সহ একটি সম্পূর্ণ বিল্ড টুলচেন প্রদান করে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন সেট আপ করার ঝামেলা দূর করে।
যদিও কয়েকটি ডিফল্ট অপ্টিমাইজেশান সিআরএ-তে বেক করা আছে, টুলটির লক্ষ্য একটি সহজ এবং সরল সেটআপ প্রদান করা। কনফিগারেশনগুলি নিজেরাই বের করে এবং পরিবর্তন করতে হবে কিনা তা সিদ্ধান্ত নেওয়ার জন্য বিকাশকারীদের পছন্দটি দেওয়া হয়।
Next.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 )।
উপাদানগুলিও অন্য যেকোন প্রতিক্রিয়া অ্যাপ্লিকেশনের মতো তৈরি এবং ব্যবহার করা যেতে পারে। একটি components/ ডিরেক্টরি ইতিমধ্যেই একটি একক উপাদান দিয়ে তৈরি করা হয়েছে, nav.js , যা ইতিমধ্যেই index.js এ আমদানি করা হয়েছে। ডিফল্টরূপে, Next.js-এ ব্যবহৃত প্রতিটি আমদানি শুধুমাত্র তখনই আনা হয় যখন সেই পৃষ্ঠাটি লোড করা হয়, স্বয়ংক্রিয় কোড-বিভাজনের সুবিধা প্রদান করে।
তাছাড়া, Next.js-এ প্রতিটি প্রাথমিক পৃষ্ঠা লোড সার্ভার-সাইড রেন্ডার করা হয়। আপনি যদি DevTools-এ নেটওয়ার্ক প্যানেল খোলেন, আপনি দেখতে পাবেন ডকুমেন্টের জন্য প্রাথমিক অনুরোধ সম্পূর্ণ সার্ভার-রেন্ডার করা পৃষ্ঠা ফেরত দেয়।
এগুলি Next.js স্বয়ংক্রিয়ভাবে প্রদান করা অনেক বৈশিষ্ট্যের মধ্যে মাত্র কয়েকটি। অনেকগুলি কাস্টমাইজযোগ্য এবং বিভিন্ন ব্যবহারের ক্ষেত্রে পরিবর্তন করা যেতে পারে।
এরপর কি?
শ্লেষ উদ্দেশ্য 😛
এই সংগ্রহের প্রতিটি অন্যান্য গাইড বিস্তারিতভাবে একটি নির্দিষ্ট Next.js বৈশিষ্ট্য অন্বেষণ করবে:
- পৃষ্ঠা নেভিগেশন গতি বাড়াতে রুট প্রিফেচিং
- সার্চ ইঞ্জিন থেকে দ্রুত লোড করার জন্য হাইব্রিড এবং AMP-শুধু পৃষ্ঠাগুলি পরিবেশন করা হচ্ছে
- জাভাস্ক্রিপ্ট পদচিহ্ন কমাতে গতিশীল আমদানি সহ কোড-বিভাজন উপাদান