সুচিপত্র[লুকান][দেখান]
একটি সফ্টওয়্যার লাইব্রেরি বা কাঠামো বাছাই করার সময়, বিকাশকারীর অভিজ্ঞতা সাধারণত বিবেচনায় নেওয়া হয়।
যখন আমি "বিকাশকারীর অভিজ্ঞতা" উল্লেখ করি, তখন আমি উল্লেখ করছি কিভাবে ডেভেলপাররা আসলে কাজ করে। বিকাশকারীরা লাইব্রেরি বা ফ্রেমওয়ার্ক বেছে নেয় যা ব্যবহার করার জন্য উপভোগ্য।
আমাদের কাছে এখন সবচেয়ে জনপ্রিয় লাইব্রেরি এবং ফ্রেমওয়ার্ক থাকার জন্য এটি একটি প্রাথমিক কারণ। বিকাশকারী হিসাবে, আমাদের কাজগুলিতে সহায়তা করার জন্য বিদ্যমান সরঞ্জামগুলি তৈরি করা হলে আমাদের স্ক্র্যাচ থেকে শুরু করতে হবে না।
ফ্রেমওয়ার্ক হল সফ্টওয়্যারের টুকরো যা ডেভেলপাররা অ্যাপ্লিকেশন তৈরি করতে তৈরি এবং ব্যবহার করে এবং নেক্সটজেএস তাদের মধ্যে একটি।
এই পোস্টে, আমরা নেক্সটজেস, এর মূল বৈশিষ্ট্যগুলি এবং একটি অ্যাপ্লিকেশন তৈরি করতে কীভাবে এটি ব্যবহার করতে পারি তা নিয়ে আলোচনা করব। এর ডানে ঝাঁপ দেওয়া যাক.
Next.js কি?
পরবর্তী.js দ্রুত এবং সহজে স্ট্যাটিক ওয়েবপেজ এবং রিঅ্যাক্ট-ভিত্তিক অনলাইন অ্যাপ্লিকেশন তৈরি করার জন্য একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। এটি আপনাকে উইন্ডোজ, লিনাক্স এবং ম্যাক সহ বিভিন্ন প্ল্যাটফর্মের জন্য দুর্দান্ত ওয়েব অ্যাপ ডিজাইন করতে দেয়।
আপনার Next.js ফ্রেমওয়ার্কের সাথে পরিচিত হওয়া উচিত যদি আপনার প্রতিক্রিয়ার সাথে ন্যূনতম পরিচিতি থাকে এবং প্রতিক্রিয়া ইকোসিস্টেম সম্পর্কে আরও জানতে চান।
যদিও Next.js আপনার শুরু করার জন্য প্রয়োজনীয় সবকিছু নিয়ে আসে, আপনি NPM এবং Yarn, JavaScript এবং TypeScript, CSS এবং SCSS, স্ট্যাটিক এক্সপোর্ট এবং সার্ভারহীন স্থাপনার মধ্যে নির্বাচন করতে পারেন।
বৈশিষ্ট্য
- রাউটিং স্বয়ংক্রিয়ভাবে সম্পন্ন হয় - আপনাকে কিছু কনফিগার করতে হবে না কারণ কোনো URL ফাইল সিস্টেমে ম্যাপ করা হয়, পেজ ফোল্ডারের ফাইলগুলিতে (অবশ্যই আপনার কাস্টমাইজেশন বিকল্প রয়েছে)।
- একটি একক ফাইলের উপাদান - স্টাইলড-জেএসএক্স ব্যবহার করে কম্পোনেন্টে স্কোপ করা শৈলী যোগ করা সহজ, যা সম্পূর্ণরূপে সমন্বিত এবং একই দল দ্বারা উত্পাদিত।
- একটি হট কোড পুনরায় লোড করা - যখন Next.js ডিস্কে সংরক্ষিত একটি পরিবর্তন সনাক্ত করে, এটি পৃষ্ঠাটি পুনরায় লোড করে।
- গতিশীল উপাদান - আপনি গতিশীলভাবে জাভাস্ক্রিপ্ট মডিউল এবং প্রতিক্রিয়া উপাদান লোড করতে পারেন।
- স্ট্যাটিক এক্সপোর্ট - Next.js আপনাকে পরবর্তী এক্সপোর্ট কমান্ডের মাধ্যমে আপনার অ্যাপ থেকে একটি সম্পূর্ণ স্ট্যাটিক সাইট এক্সপোর্ট করতে দেয়।
- পরিবেশের সাথে সামঞ্জস্য - Next.js জাভাস্ক্রিপ্ট, নোড এবং প্রতিক্রিয়া ইকোসিস্টেমের সাথে নির্বিঘ্নে সংহত করে।
- বিভক্ত কোড স্বয়ংক্রিয়ভাবে - শুধুমাত্র লাইব্রেরি এবং জাভাস্ক্রিপ্ট যেগুলি পৃষ্ঠাগুলি রেন্ডার করতে ব্যবহার করা হয়। অ্যাপের সমস্ত কোড সমন্বিত একটি একক জাভাস্ক্রিপ্ট ফাইল তৈরি করার পরিবর্তে, Next.js বুদ্ধিমত্তার সাথে অ্যাপটিকে অনেক সম্পদে ভাগ করে।
কিভাবে একটি next.js অ্যাপ্লিকেশন তৈরি করবেন?
স্থাপন
আপনি একটি Next.js প্রজেক্ট ইন্সটল এবং তৈরি করতে node npx কমান্ড ব্যবহার করতে পারেন।
এটি একটি ফোল্ডার এবং একটি Next.js প্রকল্প চালানোর জন্য প্রয়োজনীয় সমস্ত ফাইল, কনফিগারেশন এবং অন্যান্য আইটেম তৈরি করবে।
অ্যাপটি তৈরি হয়ে গেলে আপনি এটি চালু করতে পারেন।
পৃষ্ঠা এবং রাউটিং
Next.js এর সাথে রুট পরিচালনা করার জন্য, আমাদের একটি রাউটিং ফ্রেমওয়ার্ক নিয়োগ করতে হবে না। Next.js এর সাথে রাউটিং সেট আপ করা একটি হাওয়া। আপনি যখন একটি নতুন Next.js অ্যাপ তৈরি করতে create-next-app কমান্ড ব্যবহার করেন, অ্যাপটি ডিফল্টরূপে 'পৃষ্ঠা' নামে একটি ফোল্ডার তৈরি করে।
এই 'পৃষ্ঠা' ফোল্ডারটি যেখানে আপনি আপনার রুট বজায় রাখেন। ফলস্বরূপ, সাবডিরেক্টরিতে প্রতিটি প্রতিক্রিয়া উপাদান ফাইল একটি পৃথক রুট হিসাবে পরিচালনা করা হবে।
উদাহরণস্বরূপ, যদি ফোল্ডারটিতে সেই ফাইলগুলি থাকে:
- index.js
- about.js
- aricles.js
এই ফাইলটি তিনটি উপায়ে স্বয়ংক্রিয়ভাবে রূপান্তরিত হবে:
- ইনডেক্স পেজ লোকালহোস্ট/ইনডেক্স
- পৃষ্ঠা স্থানীয় হোস্ট/সম্পর্কে
- ব্লগ পাতা স্থানীয় হোস্ট/নিবন্ধ
একটি about.js পৃষ্ঠার একটি উদাহরণ নীচে দেখানো হয়েছে৷ পৃষ্ঠা সম্পর্কে কিছুই দেওয়া হয় না, আপনি দেখতে পাচ্ছেন। এটি কেবল একটি আদর্শ প্রতিক্রিয়া কার্যকরী উপাদান।
রুট
নেস্টেড রুট তৈরি করতে, আপনাকে প্রথমে একটি সাবফোল্ডার স্থাপন করতে হবে। উদাহরণস্বরূপ: পৃষ্ঠা/নিবন্ধ। সেই ফোল্ডারের মধ্যে আপনার 'contact.js' প্রতিক্রিয়া উপাদান তৈরি করুন এবং এটি স্থানীয় হোস্ট/আর্টিকেল/যোগাযোগ পৃষ্ঠা তৈরি করবে।
আপনি যদি একটি ফাইল pages/articles.js এবং অন্যটি pages/articles/index.js এ রাখেন। উভয়ই একই পথ প্রতিফলিত করে স্থানীয় হোস্ট/ব্লগ। এই পরিস্থিতিতে, Next.js শুধু article.js ফাইলটি রেন্ডার করবে। গতিশীল রুট সম্পর্কে কি, যেখানে প্রতিটি ব্লগ পোস্টের নিজস্ব পথ রয়েছে:
- স্থানীয় হোস্ট/ব্লগ/প্রথম নিবন্ধ
- স্থানীয় হোস্ট/ব্লগ/-সেকেন্ড-আর্টিকেল
বন্ধনী স্বরলিপি ব্যবহার করে, আপনি Next.js এ একটি গতিশীল রুট সংজ্ঞায়িত করতে পারেন। যেমন: pages/article/[slug].js
লিঙ্ক রুট
আপনি এখন আপনার প্রথম রুট সম্পূর্ণ করেছেন। আমি অনুমান করছি আপনি জিজ্ঞাসা করছেন কিভাবে সেই রুটে পৃষ্ঠাগুলিকে সংযুক্ত করতে হয়। এটি করতে আপনার 'পরবর্তী/লিঙ্ক' প্রয়োজন হবে।
এখানে একটি হোম পৃষ্ঠার একটি উদাহরণ যা সম্পর্কে পৃষ্ঠার একটি লিঙ্ক রয়েছে:
আপনি যদি লিঙ্কটি স্টাইল করতে চান তবে নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করুন:
রুট রিডাইরেক্ট করুন
যদি আপনি একটি নির্দিষ্ট পৃষ্ঠায় একটি পুনঃনির্দেশ জোর করতে হবে? উদাহরণস্বরূপ, যখন একটি বোতাম চাপা হয়? আপনি 'router.push' ব্যবহার করে এটি সম্পন্ন করতে পারেন:
এসইও
ওয়েব অ্যাপ্লিকেশনের পৃষ্ঠাগুলিতে HTML বডির মধ্যে ডেটা ছাড়াও মেটা (হেড) উপাদান প্রয়োজন। এটি একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে রিঅ্যাক্ট হেলমেট নামে একটি অতিরিক্ত প্রয়োজনীয়তা ইনস্টল করার প্রয়োজন হবে।
আমরা আমাদের ওয়েবপেজে সহজে মেটাডেটা যোগ করতে নেক্সট থেকে নেক্সট/হেড থেকে হেড কম্পোনেন্ট ব্যবহার করতে পারি যা সার্চ ফলাফলে এবং এম্বেডে প্রদর্শিত হবে:
উপাদান
আপনাকে প্রায়শই উপাদান বা একটি লেআউট ফাইল বিকাশ করতে হবে। উদাহরণস্বরূপ, একটি উপাদান যা ন্যাভবার রেন্ডার করে। আমরা এখন পর্যন্ত পেজ ফোল্ডার ব্যবহার করেছি। যদি আপনার উপাদানটি একটি রুট পৃষ্ঠা না হয়?
আপনি চান না যে ব্যবহারকারী একটি পৃষ্ঠায় নেভিগেট করুক যেমন স্থানীয় হোস্ট/নেভিবার। আপনি যদি পৃষ্ঠা ফোল্ডারে Navbar.js কম্পোনেন্ট রাখেন, তাহলে সেটাই হবে। পরিস্থিতিতে আপনার কি করা উচিত?
শুধু একটি পৃথক ফোল্ডারে আপনার সমস্ত 'পৃষ্ঠা নয়' উপাদানগুলি সংরক্ষণ করুন৷ বেশিরভাগ Next.js প্রজেক্ট মনিকার 'কম্পোনেন্টস' ব্যবহার করে এবং এই ফোল্ডারটি আপনার প্রোজেক্টের রুট ফোল্ডারে তৈরি হয়।
প্রধান উপাদান
প্রাথমিক পৃষ্ঠা লোড সার্ভার-সাইডে Next.js দ্বারা রেন্ডার করা হয়। এটি আপনার পৃষ্ঠার HTML পরিবর্তন করে এটি করে। শিরোনাম অধ্যায় অন্তর্ভুক্ত করা হয়.
Next.js হেড কম্পোনেন্ট ব্যবহার করা হয় শিরোনাম এবং মেটা মত হেডার সেকশন ট্যাগ দিতে। একটি লেআউট উপাদানের এই উদাহরণে হেড কম্পোনেন্ট ব্যবহার করা হয়েছে।
404 পাতা তৈরি করুন পাওয়া যায়নি
আপনার নিজের 404 ত্রুটি পৃষ্ঠা তৈরি করা সম্ভব। আপনি বার্তাটি কাস্টমাইজ করতে বা আপনার নিজস্ব পৃষ্ঠা নকশা যোগ করতে চাইতে পারেন। পেজ ফোল্ডারে, 404.js ফাইল তৈরি করুন।
যখন একটি 404 ত্রুটি ঘটে, Next.js স্বয়ংক্রিয়ভাবে এই পৃষ্ঠায় পুনঃনির্দেশিত হবে। এখানে একটি ব্যক্তিগতকৃত 404 পৃষ্ঠার একটি উদাহরণ রয়েছে:
সার্ভার-সাইড থেকে ডেটা আনা হচ্ছে
ক্লায়েন্ট-সাইডে ডেটা ডাউনলোড করার পরিবর্তে, Next.js আপনাকে একটি প্রাথমিক ডেটা জনসংখ্যা পরিচালনা করতে দেয়, যার অর্থ সার্ভার থেকে ইতিমধ্যেই জনবহুল ডেটা সহ পৃষ্ঠাটি পাঠানো।
সার্ভার-সাইড ডেটা আনয়ন বাস্তবায়নের জন্য আপনার কাছে দুটি বিকল্প রয়েছে:
- প্রতিটি অনুরোধে ডেটা আনা উচিত।
- নির্মাণ প্রক্রিয়া জুড়ে শুধুমাত্র একবার ডেটা পান (স্ট্যাটিক সাইট)
প্রতিটি অনুরোধে ডেটা আনুন
প্রতিটি অনুরোধ সার্ভার-সাইড রেন্ডার করতে getServerSideProps পদ্ধতি ব্যবহার করা হয়। এই ফাংশনটি আপনার কম্পোনেন্ট ফাইলের শেষে অন্তর্ভুক্ত করা যেতে পারে। Next.js স্বয়ংক্রিয়ভাবে getServerSideProps অবজেক্টের সাথে আপনার কম্পোনেন্ট প্রপস তৈরি করবে যদি সেই ফাংশনটি আপনার কম্পোনেন্ট ফাইলে থাকে।
বিল্ড টাইমে ডেটা আনুন
getStaticProps পদ্ধতিটি বিল্ড টাইমে সার্ভার-সাইড রেন্ডার করতে ব্যবহৃত হয়। এই ফাংশনটি আপনার কম্পোনেন্ট ফাইলের শেষে অন্তর্ভুক্ত করা যেতে পারে। এই পদ্ধতিটি সার্ভার কোড চালায় এবং সার্ভারে একটি GET অনুরোধ পাঠায়, কিন্তু শুধুমাত্র একবার যখন আমাদের প্রকল্প শেষ হয়।
কেন আপনি Next.js শিখতে হবে?
এর একটি কারণ হল Next.js রিঅ্যাক্টের উপরে তৈরি করা হয়েছে, এর জন্য একটি ফ্রন্ট-এন্ড ডেভেলপমেন্ট টুলকিট ইউজার ইন্টারফেস তৈরি করা ওয়েব অ্যাপ ডিজাইন করার জন্য এটি আমার প্রিয় পছন্দ।
কিন্তু এটা পর্যাপ্ত হবে না যদি Next.js ভালো না হয় যা করেছে... তাই না?
তাই, এটা ঠিক কি করে?
এটি বোঝার জন্য আমাদের প্রথমে কয়েকটি ধারণাকে সংজ্ঞায়িত করতে হবে। Next.js জনপ্রিয়তা অর্জন করেছে কারণ এটি একটি সমস্যার সমাধান করেছে যা অনেক ওয়েব ডেভেলপারদের ক্লায়েন্ট-সাইড ওয়েব অ্যাপের (ব্রাউজারে) ছিল। এই একক-পৃষ্ঠা অ্যাপ্লিকেশনগুলির (এসপিএ) একটি ভাল অভিজ্ঞতা ছিল কারণ তাদের পৃষ্ঠাটি পুনরায় লোড করার জন্য ব্যবহারকারীর প্রয়োজন ছিল না এবং আরও ইন্টারঅ্যাক্টিভিটির জন্য অনুমতি দেওয়া হয়েছিল৷
যাইহোক, যেহেতু এই ধরনের অ্যাপের বেশিরভাগ উপাদান শুধুমাত্র ব্রাউজারে সঞ্চালিত হলেই দৃশ্যমান হয়, ওয়েব ক্রলারদের এই ধরনের অ্যাপের পাঠ্য বিষয়বস্তু বুঝতে অসুবিধা হয়।
ফলস্বরূপ, তাদের জনপ্রিয়তা থাকা সত্ত্বেও, অনেক SPA বড় সার্চ ইঞ্জিন যেমন Google এর কাছে বেনামী থেকে যায়। Next.js এখন প্রতিক্রিয়া উপাদানগুলির সার্ভার-সাইড রেন্ডারিং (SSR) এর জন্য আরও শক্তিশালী বিল্ট-ইন প্রক্রিয়া অন্তর্ভুক্ত করে।
Next.js বিকাশকারীদের বিল্ড প্রক্রিয়া চলাকালীন সার্ভারে জাভাস্ক্রিপ্ট কোড তৈরি করতে এবং ব্যবহারকারীকে মৌলিক, ইনডেক্সযোগ্য HTML প্রদান করতে দেয়।
ভালো দিক
- ব্যবহারকারী-অভিজ্ঞতার জন্য দুর্দান্ত
- এসইও জন্য মহান
- একটি সুপার-ফাস্ট স্ট্যাটিক ওয়েবসাইট তৈরি করুন যা একটি গতিশীলের মতো আচরণ করে
- UI এবং UX তৈরিতে নমনীয়তা।
- অনেক উন্নয়ন সুবিধা
- মহান সম্প্রদায় সমর্থন
মন্দ দিক
- ওয়েবসাইট বা অ্যাপ্লিকেশনগুলির নির্মাণ বা বিকাশের জন্য একটি নির্দিষ্ট পরিমাণ সময় থাকে।
- নির্দিষ্ট কিছু কাজের জন্য, Next.js অপর্যাপ্ত। বিকাশকারীদের Node.js টুল ব্যবহার করে গতিশীল রুট তৈরি করতে সক্ষম হওয়া উচিত।
উপসংহার
আপনি দেখতে পাচ্ছেন, Next.js রিঅ্যাক্ট অ্যাপ ডেভেলপমেন্টকে সহজ করে এবং আপনাকে সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলিতে ফোকাস করার অনুমতি দেয় - আপনার অ্যাপের যুক্তি এবং UI। এটি সমসাময়িক, ফ্রন্টএন্ড-সমৃদ্ধ এবং API-চালিত অ্যাপ তৈরি করার জন্য প্রয়োজনীয় সবকিছু অন্তর্ভুক্ত করে।
স্ট্যাটিক এইচটিএমএল পৃষ্ঠাগুলি তৈরি করার ক্ষমতার কারণে এটি ব্লগ এবং ব্যবসায়িক ওয়েবসাইটগুলির মতো শুধুমাত্র বিষয়বস্তু প্রকল্পগুলির জন্যও উপযুক্ত৷
বর্তমান সংস্করণগুলির সাথে, Next.js শুধুমাত্র একটি উচ্চ স্তরের বিকাশকারীর অভিজ্ঞতা বজায় রাখে না বরং এই কাঠামোর জন্য একটি উজ্জ্বল ভবিষ্যত নিশ্চিত করে, ভিজ্যুয়াল কর্মক্ষমতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য সরঞ্জামও দেয়৷
নির্দেশিকা সমন্ধে মতামত দিন