Next.js দিয়ে কিভাবে ওয়েবসাইট তৈরি করবেন তার বিস্তারিত নির্দেশিকা

একটি পণ্য উন্নয়ন সংস্থা হিসাবে বিভিন্ন প্রযুক্তি পরিচালনা করে, NeoITO এটি প্রকাশের সাথে সাথে Next.js অন্বেষণ শুরু করে।

নেক্সট.জেএস এবং রিঅ্যাক্ট হল স্ট্যাটিক ওয়েবসাইট তৈরির জন্য ব্যবহৃত জনপ্রিয় ফ্রেমওয়ার্ক, এবং এটি সার্ভার-সাইড রেন্ডারিং, স্বয়ংক্রিয় কোড স্প্লিটিং এবং আরও অনেকগুলি বৈশিষ্ট্য সহ আসে।

এই ব্লগে, আমরা দেখাব কিভাবে NeoITO এর সম্ভাবনাগুলি ব্যবহার করে Next.js এর সাথে একটি ওয়েবসাইট তৈরি করেছে৷ আপনি আপনার নিজস্ব ওয়েবসাইট তৈরি করতে এই টেমপ্লেট ব্যবহার করতে পারেন.

চল শুরু করি!

সুচিপত্র

      • Next.js কি?
      • শুরু করার আগে নিশ্চিত করুন – সরঞ্জাম এবং বোঝা
      • Next.js ব্যবহার করে কিভাবে ওয়েবসাইট তৈরি করবেন?
      • Next.js ব্যবহার করার সুবিধা
      • উপসংহার

Next.js কি?

Next.js হল ন্যূনতম কনফিগারেশন সহ একটি প্রতিক্রিয়া ফ্রেমওয়ার্ক।

সাধারণত, Next.js হাইব্রিড সার্ভার-সাইড রেন্ডারিং সহ একক-পৃষ্ঠার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।

Next.js vercel দ্বারা প্রবর্তিত হয় এবং এটি node.js এবং Babel-এর উপর ভিত্তি করে ওপেন সোর্স।

Next.js ওয়েবসাইটগুলি আরও বেশি এসইও বন্ধুত্বপূর্ণ এবং দ্রুত লোড করার গতি রয়েছে৷ এটি প্রতিক্রিয়ার উপরে কাজ করে এবং স্ট্যাটিক এবং ডাইনামিক উভয় ওয়েবসাইটের বিকাশকে সহজ করে তোলে।

আপনি next.js ব্যবহার করে আপনার ওয়েবসাইট তৈরি করা শুরু করার আগে। দ্রুত বিকাশের জন্য আপনাকে নীচে দেওয়া সরঞ্জামগুলির সাথে পরিচিত হতে হবে।

  1. npm/সুতা (আমি সুতা ব্যবহার করছি)
  2. প্রতিক্রিয়ার প্রাথমিক ধারণা
  3. vscode- সম্পাদক
  4. টার্মিনেটর- টার্মিনাল এমুলেটর

কিভাবে Next.js দিয়ে একটি ওয়েবসাইট তৈরি করবেন

আমরা নির্মাণ করতে Next.js ফ্রেমওয়ার্ক ব্যবহার করেছি সম্পত্তি ঠিক আছে ওয়েবসাইট

এটি আমাদের 97 এর একটি দুর্দান্ত পারফরম্যান্স স্কোর অর্জন করতে সহায়তা করেছে।

আজ আমরা নেক্সটজেস দিয়ে কীভাবে একটি ওয়েবসাইট তৈরি করতে পারি এবং এর বিভিন্ন বৈশিষ্ট্য কী তাও বুঝতে পারি।

এটা, এর নির্মাণ শুরু করা যাক.

আপনাকে শুরু করতে, আমরা একটি পরবর্তী-অ্যাপ স্ক্রিপ্ট তৈরি করতে ব্যবহার করতে যাচ্ছি এবং আরও ভাল বিকাশের অভিজ্ঞতার জন্য টাইপস্ক্রিপ্ট অন্তর্ভুক্ত করব। এছাড়াও, আমরা আপনাকে দেখাব কিভাবে আমরা বেস অ্যাপ্লিকেশন তৈরি করতে টেমপ্লেট ব্যবহার করতে পারি।

npx create-next-app@latest --ts

বা

yarn create next-app --typescript

এই কমান্ডটি ডিফল্ট ভাষা হিসাবে টাইপস্ক্রিপ্ট সহ আমাদের পরবর্তী জেএস প্রকল্পের জন্য একটি টেমপ্লেট তৈরি করবে। ছোট সদস্য/স্কোপ প্রকল্পের জন্য টাইপস্ক্রিপ্ট ব্যবহার করা আবশ্যক নয়।

তবে এটি ব্যবহার করার সুবিধা রয়েছে যেমন টাইপ রেফারেন্স এবং কঙ্কাল ডকুমেন্টেশন।

এছাড়াও, আপনাকে অ্যাপটির নাম লিখতে হবে।

next.js দিয়ে একটি ওয়েবসাইট তৈরি করা

সবকিছু ঠিক থাকলে আপনি এটি দেখতে পাবেন।

Next.js দিয়ে তৈরি

আমাদের অ্যাপটি চালানোর জন্য আমাদের ডিরেক্টরিতে যেতে হবে এবং এই কমান্ডটি চালাতে হবে।

Next.js পারফরম্যান্স

এটি কীভাবে কাজ করে এবং নেক্সটজেএস-এর মূল বিষয়গুলি বোঝার জন্য ডিরেক্টরিটি অন্বেষণ করি

next.js বোঝার জন্য ডিরেক্টরিগুলি অন্বেষণ করুন

আপনি যদি একজন প্রতিক্রিয়া বিকাশকারী হন তবে আপনি কিছু পরিচিত ডিরেক্টরি যেমন node_modules, পাবলিক এবং শৈলী দেখতে পারেন।

আপনি যদি এটিতে নতুন হন তবে আমাকে এটি দিয়ে শুরু করতে দিন।

      • নোড মডিউল – এটি সেই ডিরেক্টরি যা আমাদের প্রকল্পগুলিতে ইনস্টল করা সমস্ত বাহ্যিক প্যাকেজ ধারণ করে।
      • শৈলী – এখানে আমরা সমস্ত স্টাইল যেমন css, scss এবং স্টাইল সম্পর্কিত সমস্ত ফাইল সংরক্ষণ করি।
      • পাবলিক – এতে লগ, সাইটম্যাপ ইত্যাদির মতো প্রোডাকশনে সর্বজনীন হতে হবে এমন সমস্ত ফাইল রয়েছে। NextJS-এ আমরা সরাসরি পাবলিক ডিরেক্টরি থেকে ফাইল আমদানি করতে পারি। এখন পরবর্তী নির্দিষ্ট ডিরেক্টরি তাকান.
      • .পরবর্তী – এই ডিরেক্টরিটি পরবর্তীতে তাদের সমস্ত ফ্রেমওয়ার্ক বিল্ড এবং অ্যাপ চালানোর জন্য প্রয়োজনীয় ফাইল ধারণ করে এটি পরবর্তী ফ্রেমওয়ার্ক দ্বারা পরিচালিত হয়।
      • পৃষ্ঠাগুলি – এই ডিরেক্টরিটি আপনার অ্যাপ্লিকেশনের সমস্ত পৃষ্ঠাগুলিকে অন্তর্ভুক্ত করে এবং এপিআইগুলিও অন্তর্ভুক্ত করে৷ হু আমি উল্লেখ করেছি যে আমরা আমাদের NextJS 🤯 এর ভিতরে API লিখতে পারি। হ্যাঁ আমরা পারি. এছাড়াও, আমরা ডায়নামিক রাউটিং দিয়ে পেজ তৈরি করতে পারি।

এখন আমরা ভাল এসইও সহ একটি সাধারণ ওয়েবসাইট তৈরিতে ফোকাস করব।

টিউটোরিয়ালে ফিরে আসা যাক। আমরা কাস্টমাইজ করা শুরু করার আগে, আমরা স্কোরটি দেখব।

Next.js পারফরম্যান্স

এটি নেক্সটজেএস বেস কোড স্কোর।

একটি আকর্ষণীয় Next.js ওয়েবসাইট তৈরি করতে আমরা tailwind-CSS অন্তর্ভুক্ত করতে যাচ্ছি এবং দেখুন এটি কতটা সহজ।

Tailwind অফিসিয়াল ডক নেক্সটজে একটি পৃথক বিভাগ রয়েছে যা আপনি পরীক্ষা করতে পারেন Next.js দিয়ে Tailwind CSS ইনস্টল করুন

tailwind css যোগ করতে নিম্নলিখিত চালান।

yarn add-D tailwindcss postcss autoprefixer

বা

npm install -D tailwindcss postcss autoprefixer

উপরের কমান্ডটি প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করবে।

তারপর এটি চালান

npx tailwindcss init -p

এটি tailwind css শুরু করবে এবং রুট ডিরেক্টরিতে একটি tailwind.config.js ফাইল তৈরি করবে।

এখন আমাদের কনফিগার ফাইলে আমাদের উপাদান এবং পৃষ্ঠা যোগ করতে হবে।

content: [
   "./pages/**/*.{js,ts,jsx,tsx}",
   "./components/**/*.{js,ts,jsx,tsx}"
 ],

এটির সাথে বিষয়বস্তু বিভাগটি প্রতিস্থাপন করুন এবং আপনি পৃষ্ঠা এবং উপাদানগুলিতে টেলওয়াইন্ড উপাদান যুক্ত করতে পারেন।

আমাদের অগ্রগতি দেখতে ডেভেলপমেন্ট সার্ভার চালানো যাক।

yarn dev

প্রথমে, কম্পোনেন্ট ডিরেক্টরির ভিতরে একটি হোম কম্পোনেন্ট তৈরি করুন।

ডিরেক্টরিতে হোম উপাদান

উপরের স্ক্রিনশটে আপনি আমাদের ফোল্ডারের গঠন দেখতে পারেন। আপনি দেখতে পারেন হিসাবে আছে .scss ফাইল হোম কম্পোনেন্ট ফোল্ডারের ভিতরে যা নেক্সটজে-এর বৈশিষ্ট্য যা কম্পোনেন্টের জন্য স্টাইল লেখার অনুমতি দেয় যা স্থানীয় স্টাইল হবে উদাহরণস্বরূপ যদি আমরা একটি ক্লাস যোগ করি .module.scss/css ফাইল এই যে উপাদান অনন্য হবে.

এখানে আমি একটি তৈরি করেছি ‘বাড়ি‘ উপাদান এবং টপবার

404 ত্রুটিতে হোম উপাদান

সমস্ত শৈলী টেইলউইন্ড থেকে আসছে কিন্তু যদি আমাদের একটি শৈলী নির্দিষ্ট উপাদান যোগ করার প্রয়োজন হয় আমরা মডিউল স্টাইল শীট ব্যবহার করব।

শৈলী নির্দিষ্ট উপাদান সংজ্ঞায়িত

প্রথমে আমরা উপাদানে শৈলী আমদানি করি

শৈলী নির্দিষ্ট উপাদান আমদানি

তারপরে আমরা এটি কোডে যোগ করার চেষ্টা করি।

কোড যোগ করা হচ্ছেnext.js ফলাফল

আপনি দেখতে পাচ্ছেন যে এটি বিভাগে যোগ করা হয়েছে।

কিন্তু যখন আমরা সংকলিত কোড দেখি তখন আমরা দেখতে পাই যে ক্লাসের নামটি অনন্য এবং অন্য ক্লাসে হস্তক্ষেপ করে না; এটি আমাদের ওভাররাইটিং জটিলতা মোকাবেলা না করে একই শ্রেণীর নাম তৈরি করার অনুমতি দেবে।

next.js ক্লাসের নাম

এখন আমরা দেখতে যাচ্ছি কিভাবে আমরা এক্সটার্নাল এপিস থেকে ডেটা আনতে পারি এবং আমাদের ওয়েব অ্যাপে দেখাতে পারি।

এটি করার বিভিন্ন উপায় রয়েছে, প্রতিটির নিজস্ব সুবিধা রয়েছে।

ক্লায়েন্ট সাইড ডেটা আনা

এটি ব্যবহার করে ডেটা আনার স্বাভাবিক উপায় আনা আমরা এখানে আলোচনা করতে যাচ্ছি না। কিন্তু আমরা একটি রিঅ্যাক্ট হুক লাইব্রেরি ব্যবহার করতে যাচ্ছি SWR.

এতে ক্যাশিং, রিভালিডেশন ইত্যাদির মতো আরও বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে।

শুরু করার আগে আমাদের এটির জন্য SWR ইনস্টল করতে হবে

yarn add swr

বা

npm install swr

তারপর কোডে লাইব্রেরি আমদানি করুন

next.js আমদানি লাইব্রেরি

তারপর একটি যোগ করুন ফেচার ফাংশন এটি ফেচ এপিআই এর একটি মোড়ক মাত্র।

next.js ফেচার ফাংশন

এখন আমরা আমাদের প্রকল্পে SWR ব্যবহার করতে পারি। এখানে আমরা আন্তর্জাতিক মহাকাশ স্টেশনের রিয়েল টাইম অবস্থান নিয়ে এসেছি।

next.js SWR

এটি এখানে দেখান কিন্তু এটি স্থির।

next.js লাইভ টাইম অবস্থান

এখন আমরা রিয়েলটাইম মান আপডেট করার জন্য রিভালিডেট কার্যকারিতা ব্যবহার করি।

next.js কার্যকারিতা পুনর্বিবেচনা করে

এটি প্রতি 1000 মিলিসেকেন্ডে আমাদের অনুরোধকে পুনরায় যাচাই করবে।

স্ট্যাটিক সাইট জেনারেশন

এখন আমরা একটি নতুন পদ্ধতি দেখতে যাচ্ছি যা Nextjs ফ্রেমওয়ার্ক দ্বারা সরবরাহ করা হয়।

এইভাবে আমরা স্ট্যাটিক ওয়েব পেজ তৈরি করতে পারি যা একটি বাহ্যিক এপিআই থেকে ডেটা নিয়ে আসে।

প্রদর্শনের জন্য আমরা এই মুহূর্তে মহাকাশে যারা মহাকাশচারী আছেন তাদের তালিকা আনতে যাচ্ছি।

প্রথমে পেজ/ফোল্ডারে নামের একটি ফাইল তৈরি করুন peoples.tsx এটি একটি পৃষ্ঠা তৈরি করবে /মানুষ রুট

ফোল্ডার অবস্থান

এখন আমরা সাধারণ পৃষ্ঠাটিকে একটি স্ট্যাটিকালি রেন্ডার করা পৃষ্ঠায় রূপান্তর করতে যাচ্ছি।

এটা করতে আমরা যোগ করতে হবে getStaticProps আমাদের পৃষ্ঠায় এই ফাংশনটি ডেটা আনবে এবং কম্পোনেন্টে পাঠাবে।

getStaticProps

এটি উপাদানগুলিতে প্রপগুলি ফিরিয়ে দেবে এবং আমরা এটিকে সাধারণ প্রপস হিসাবে ব্যবহার করতে পারি।

next.js কম্পোনেন্টে প্রপস ফেরত দিচ্ছেnext.js স্বাভাবিক প্রপস

আমরা প্রোডাকশন সেকশনে স্ট্যাটিক সাইট জেনারেশনের কোড দেখতে পাব।

বাহ্যিক এপিআই থেকে ডেটা আনার জন্য বেশ কয়েকটি বিকল্প রয়েছে।

প্রোডাকশনের কাছে 🚀

প্রোডাকশনে যাওয়ার সময় বেশ কিছু বিষয় বিবেচনা করতে হবে, বিশেষ করে অপ্টিমাইজেশান এবং পারফরম্যান্সের উন্নতিতে। তবে এটি একটি খুব দীর্ঘ ব্লগ হবে যদি আমি এই একক ব্লগে অন্তর্ভুক্ত করি তাহলে আপনি নেক্সটজেএস দ্বারা প্রদত্ত সমস্ত বৈশিষ্ট্য দেখতে পাবেন এখানে.

এখন আমরা শুধুমাত্র আমাদের অ্যাপের প্রোডাকশন বিল্ডের দিকে নজর দিতে যাচ্ছি।

যা করার জন্য শুধু চালান।

yarn build

বা

npm run build

npm রান বিল্ড বা সুতা বিল্ড

সম্পন্ন 💫 🤩

আমরা প্রথম জেএস লোড এবং পৃষ্ঠার আকারের মতো উত্পাদন পৃষ্ঠাগুলি সম্পর্কে তথ্য পেতে পারি।

আমরা যে আকর্ষণীয় পৃষ্ঠাটি দেখতে যাচ্ছি তা হল /জনগণ

next.js/peoples

এখানে আমরা দেখতে পাচ্ছি যে ডাটা এইচটিএমএল-এ হার্ড কোড করা হয়েছে js দিয়ে সরবরাহ করার পরিবর্তে এটি সাইটের কর্মক্ষমতা উন্নত করবে।

Next.js ব্যবহার করার সুবিধা।

প্রবণতা প্রযুক্তি ব্যবহার করে Next.js ওয়েবসাইট তৈরিতে অনেক সুবিধা রয়েছে। এটি বিভিন্ন দিক থেকে ওয়েবসাইটগুলিকে কীভাবে সহায়তা করে তা দেখুন।

      • Next.js ব্যবহার করে তৈরি করা ওয়েবসাইটটির ব্যবহারকারীর অভিজ্ঞতা খুবই মসৃণ।
      • উন্নত তথ্য নিরাপত্তা.
      • সহজ এবং দ্রুত বিকাশের জন্য Next.js-এ অনেকগুলি রেডি-টু-ব্যবহারের উপাদান রয়েছে।
      • Next.js ওয়েবসাইটগুলি দ্রুত লোড হয়।
      • অন্যান্য ফ্রন্টএন্ড প্রযুক্তির তুলনায় এসইও বন্ধুত্বপূর্ণ যা উচ্চতর রূপান্তর হারের দিকে পরিচালিত করে
      • যেহেতু next.js-এ বিল্ট-ইন CSS সমর্থন রয়েছে, আপনি সহজেই জাভাস্ক্রিপ্ট থেকে CSS ফাইলগুলি অ্যাক্সেস করতে পারেন।
      • স্বয়ংক্রিয় চিত্র অপ্টিমাইজেশন সমর্থন করে।
      • দ্রুত রিফ্রেশ এবং লাইভ এডিটিং অভিজ্ঞতা প্রদান করে।
      • এটি বিকাশকারীদেরকে বিদ্যমান পৃষ্ঠাগুলিকে পটভূমিতে পুনরায় রেন্ডার করে আপডেট করতে সক্ষম করে৷
      • SSG এবং SSR উভয়ের জন্য হাইব্রিড।
      • Next.js স্বয়ংক্রিয় জটিলতা এবং বান্ডলিং সমর্থন করে, যা শূন্য কনফিগারেশনের দিকে নিয়ে যায়।
      • প্রবল সম্প্রদায় সমর্থন.

উপসংহার

আমরা আশা করি এই ব্লগ আপনাকে next.js দিয়ে আপনার ওয়েবসাইট তৈরি করতে সাহায্য করবে।

আরও ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য Next.js ব্যবহার করে অনেক ওয়েবসাইট রয়েছে। একবার আপনি Next.js এর সাথে শুরু করলে আপনি নিজেই এটি পছন্দ করবেন।

আপনি next.js ব্যবহার করলে ওয়েবসাইটের কর্মক্ষমতা বৃদ্ধি পাবে। আপনার যদি Next.js ব্যবহার করার বিষয়ে কোনো সন্দেহ থাকে, তাহলে আপনি Next.js ব্যবহার করে আপনার ওয়েবসাইট তৈরি করতে ডেভেলপমেন্ট কোম্পানির সাথে যোগাযোগ করতে পারেন। আপনি অনেক প্রোডাক্ট ডেভেলপমেন্ট কোম্পানিতে Next.js-এ দক্ষতা সম্পন্ন লোকদের খুঁজে পেতে পারেন।

Next.js ব্যবহার করে আপনার আশ্চর্যজনক ওয়েবসাইট তৈরি করুন। খুশি কোডিং.

Next.js ব্যবহার করে একটি উচ্চ-পারফরম্যান্স ওয়েবসাইট তৈরি করতে চান এবং আপনার ব্যবসায়িক গেমকে সমতল করতে চান? এখন আমাদের বিশেষজ্ঞদের সাথে কথা বলুন।

বই ক বিনামূল্যে পরামর্শ

Leave a Reply

Your email address will not be published.