Next.js প্রাথমিক গাইড: আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করার সেরা পছন্দ

ভূমিকা

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

Next.js কি?

Next.js হল একটি React ফ্রেমওয়ার্ক, যা ডেভেলপারদের দ্রুত উৎপাদন-প্রস্তুত অ্যাপ্লিকেশন তৈরি করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে। এটি অনেক শক্তিশালী বৈশিষ্ট্য প্রদান করে, যেমন:

সার্ভার-সাইড রেন্ডারিং (SSR) এবং স্ট্যাটিক জেনারেশন (SSG): সার্ভারে পৃষ্ঠাগুলি পূর্ব-রেন্ডার করার সমর্থন, লোডিং গতি এবং SEO কর্মক্ষমতা উন্নত করে।
রাউটিং: বিল্ট-ইন ফাইল সিস্টেম রাউটিং, পৃষ্ঠা এবং API রাউটিং পরিচালনাকে সহজ করে।
API রাউটিং: একই প্রকল্পে সহজেই API তৈরি করা যায়, অতিরিক্ত সার্ভারের প্রয়োজন নেই।
কর্মক্ষমতা অপ্টিমাইজেশন: স্বয়ংক্রিয় কোড বিভাজন, প্রাথমিক লোডিং সময় কমায়।

Next.js ইনস্টল করা

Next.js ইনস্টল করা খুব সহজ, শুধু নিশ্চিত করুন যে আপনার ডেভেলপমেন্ট পরিবেশে Node.js ইনস্টল করা আছে। আপনি নিম্নলিখিত কমান্ডের মাধ্যমে দ্রুত একটি নতুন প্রকল্প তৈরি করতে পারেন:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

উপরের কমান্ডটি চালানোর পরে, আপনি দেখতে পাবেন যে http://localhost:3000 এ একটি নতুন Next.js অ্যাপ্লিকেশন চালু হয়েছে।

প্রকল্পের গঠন

Next.js অ্যাপ্লিকেশন তৈরি করার পরে, আপনি একটি ডিফল্ট ডিরেক্টরি গঠন দেখতে পাবেন:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

pages/: পৃষ্ঠাগুলির জন্য ডিরেক্টরি, প্রতিটি .js ফাইল স্বয়ংক্রিয়ভাবে একটি রাউটের সাথে সম্পর্কিত হবে।
public/: স্ট্যাটিক ফাইলের ডিরেক্টরি, এই ডিরেক্টরিতে রাখা যেকোনো ফাইল সরাসরি অ্যাক্সেস করা যায়।
styles/: CSS ফাইলের জন্য ডিরেক্টরি, এটি গ্লোবাল বা নির্দিষ্ট উপাদানের শৈলীর জন্য ব্যবহার করা যেতে পারে।

পৃষ্ঠা এবং রাউট তৈরি করা

Next.js এর পৃষ্ঠা ফাইল সিস্টেমের উপর ভিত্তি করে রাউট পরিচালনা করে। pages/ ডিরেক্টরিতে একটি ফাইল তৈরি করুন, যেমন about.js, বিষয়বস্তু নিম্নরূপ:

export default function About() {
  return 

# আমাদের সম্পর্কে

;
}

এটি স্বয়ংক্রিয়ভাবে একটি /about রাউট তৈরি করবে এই পৃষ্ঠাটি অ্যাক্সেস করার জন্য।

স্ট্যাটিক জেনারেশন এবং সার্ভার-সাইড রেন্ডারিং

Next.js ডেটা প্রাপ্তির কৌশলের উপর ভিত্তি করে স্ট্যাটিক জেনারেশন (Static Generation) এবং সার্ভার-সাইড রেন্ডারিং (Server-side Rendering) সমর্থন করে। আসুন দেখি কিভাবে এটি বাস্তবায়িত হয়:

স্ট্যাটিক জেনারেশন (Static Generation)

প্রকল্প তৈরি করার সময়, যদি আপনি পূর্ব-জেনারেটেড বিষয়বস্তু চান, তবে getStaticProps ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

সার্ভার-সাইড রেন্ডারিং (Server-side Rendering)

যদি আপনি চান যে প্রতিটি অনুরোধের সময় ডেটা পাওয়া যাক, তবে getServerSideProps ব্যবহার করতে পারেন:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS এবং শৈলী যোগ করা

Next.js CSS শৈলী যোগ করার জন্য বিভিন্ন উপায় প্রদান করে, সবচেয়ে সহজ উপায় হল styles/ ডিরেক্টরিতে CSS ফাইল তৈরি করা এবং প্রয়োজনীয় পৃষ্ঠায় এটি অন্তর্ভুক্ত করা:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js এ স্বাগতম!

;
}

অন্যদিকে, আপনি CSS-in-JS লাইব্রেরি যেমন styled-components বা Emotion ব্যবহার করে শৈলী পরিচালনা করতে পারেন।

API রাউট

আপনি pages/api/ ডিরেক্টরিতে API রাউট তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি hello.js ফাইল তৈরি করুন:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API রাউট অনুরোধ এবং প্রতিক্রিয়া পরিচালনা করতে পারে, ফ্রন্ট-এন্ডকে গতিশীল ডেটা প্রক্রিয়াকরণের ক্ষমতা প্রদান করে।

Next.js অ্যাপ্লিকেশন স্থাপন

সবচেয়ে সহজ স্থাপনের উপায় হল Vercel ব্যবহার করা, যা Next.js এর ডেভেলপমেন্ট টিম দ্বারা তৈরি একটি বিনামূল্যের হোস্টিং প্ল্যাটফর্ম। শুধু কোডটি GitHub এ পুশ করুন, তারপর Vercel এর সাথে GitHub অ্যাকাউন্ট সংযুক্ত করুন, স্বয়ংক্রিয়ভাবে তৈরি এবং স্থাপন করতে।

সারসংক্ষেপ

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

যদি আপনার কোন প্রশ্ন থাকে বা আরও শেখার জন্য সম্পদ প্রয়োজন হয়, দয়া করে Next.js এর অফিশিয়াল ডকুমেন্টেশন দেখুন।