Next.Js 13 সমান্তরাল রুট: একটি ব্যাপক নির্দেশিকা

1। পরিচিতি

হ্যালো সেখানে!

Next.js-এ সমান্তরাল রুটের এই ব্যাপক নির্দেশিকাতে স্বাগতম।

ডিজিটাল ল্যান্ডস্কেপ যেমন বিকশিত হয়, তেমনই ওয়েব ডেভেলপমেন্টের জটিলতাও তৈরি হয়। আধুনিক ওয়েব অ্যাপ্লিকেশানগুলিতে ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য এবং জটিল ডিজাইনের কাঠামোকে মিটমাট করার জন্য কেবল শক্তিশালী নয়, বহুমুখী রাউটিং প্রক্রিয়ারও প্রয়োজন।

Next.js 13.3 - সমান্তরাল রুটে প্রবর্তিত শক্তিশালী বৈশিষ্ট্য বোঝার জন্য এই নিবন্ধটি সতর্কতার সাথে তৈরি করা হয়েছে।

উদ্দেশ্যটি দ্বিগুণ: প্রথমত, সমান্তরাল রুটগুলির তাৎপর্য এবং তাদের ব্যবহারিক প্রয়োগ সম্পর্কে একটি পরিষ্কার বোঝা প্রদান করা এবং দ্বিতীয়ত, আপনার Next.js প্রকল্পগুলিতে দক্ষতার সাথে তাদের বাস্তবায়নের জন্য হাতে-কলমে অন্তর্দৃষ্টি প্রদান করা।

সমান্তরাল রুটের রূপান্তরমূলক সম্ভাবনা এবং কীভাবে তারা ওয়েব অ্যাপ্লিকেশন ডিজাইনের সীমানা পুনর্নির্ধারণ করছে তা অন্বেষণ করতে এই যাত্রা শুরু করা যাক।

2. সমান্তরাল রুট আগে বিশ্ব

সমান্তরাল রুটের সূচনা হওয়ার আগে, ওয়েব ডেভেলপাররা কীভাবে একটি একক দৃশ্যে গতিশীলভাবে বিষয়বস্তু গঠন এবং প্রদর্শন করতে পারে তাতে সীমাবদ্ধ ছিল। ঐতিহ্যগত রাউটিং প্রক্রিয়া মোটামুটি রৈখিক ছিল: একটি URL, একটি দৃশ্য।

উদাহরণস্বরূপ, একটি সাধারণ ড্যাশবোর্ড ডিজাইন বিবেচনা করুন:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

/dashboard/user এ নেভিগেট করলে ইউজার ড্যাশবোর্ড রেন্ডার হবে, যখন /dashboard/team টিম ড্যাশবোর্ড দেখাবে। দু'জন ছিল পারস্পরিক একচেটিয়া। একটি ভিন্ন সেগমেন্ট দেখতে, একজন ব্যবহারকারীকে সাধারণত তাদের বর্তমান দৃশ্য থেকে সম্পূর্ণভাবে দূরে নেভিগেট করতে হবে।

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

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

3. সমান্তরাল রুট বোঝা

সমান্তরাল রুটগুলি হল নেক্সট.js 13.3-এ প্রবর্তিত যুগান্তকারী বৈশিষ্ট্য, যা উল্লেখযোগ্যভাবে পরিবর্তন করে যে কীভাবে বিকাশকারীরা রাউটিং এবং ওয়েবে বিষয়বস্তুর উপস্থাপনা করে।

3.1 সমান্তরাল রুটের ভূমিকা:

Next.js 13.3 একটি নতুন গতিশীল কনভেনশন নিয়ে আসে, যা আরও উন্নত রাউটিং কেস বাস্তবায়ন করতে সক্ষম করে। ডকুমেন্টেশনে বলা হয়েছে,

"সমান্তরাল রুটগুলি আপনাকে একই ভিউতে একাধিক পৃষ্ঠা দেখাতে দেয়, যেমন জটিল ড্যাশবোর্ড বা মডেলগুলির সাথে। সমান্তরাল রুটগুলির সাথে, আপনি একই দৃশ্যে এক বা একাধিক পৃষ্ঠা রেন্ডার করতে পারেন যা স্বাধীনভাবে নেভিগেট করা যায়।"

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

3.2 ব্যবহারের ক্ষেত্রে: ড্যাশবোর্ড, মডেল এবং আরও অনেক কিছু:

আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির কাঠামো প্রায়শই উন্নত লেআউটের দাবি করে যা বিভিন্ন দর্শনকে একত্রিত করে বা অন্তর্নিহিত বিষয়বস্তু না হারিয়ে প্রাসঙ্গিক পপ-আপের প্রয়োজন হয়।

ডকুমেন্টেশন থেকে উদাহরণ নিন:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

এই লেআউটটি দেখায় কিভাবে সমান্তরাল রুটগুলি একই সাথে ব্যবহারকারী এবং দলের ড্যাশবোর্ডগুলিকে "স্লট" ব্যবহার করে একই দৃশ্যে প্রদর্শন করতে নিযুক্ত করা যেতে পারে, এই নতুন রাউটিং পদ্ধতির একটি বৈশিষ্ট্য।

3.3 সুবিধা: একাধিক পৃষ্ঠা দেখুন, শর্তসাপেক্ষ রেন্ডারিং, স্বাধীন নেভিগেশন:

সমান্তরাল রুটের সুবিধা বহুগুণ। হাইলাইট হিসাবে, তারা অনুমতি দেয়:

"একই ভিউতে এক বা একাধিক পৃষ্ঠার একযোগে রেন্ডারিং যা স্বাধীনভাবে নেভিগেট করা যায়"।

অতিরিক্তভাবে, পৃষ্ঠাগুলির শর্তসাপেক্ষ রেন্ডারিংয়ের জন্য তাদের ব্যবহার করা যেতে পারে, যার ফলে ওয়েব অ্যাপ্লিকেশনগুলিতে নমনীয়তা এবং গতিশীলতার একটি অভূতপূর্ব স্তরের প্রস্তাব দেওয়া হয়।

সংক্ষেপে, সমান্তরাল রুটের আবির্ভাবের সাথে, ওয়েব বিকাশকারীরা এখন জটিল, গতিশীল এবং ব্যবহারকারী-বান্ধব ওয়েব ইন্টারফেস তৈরি করতে আরও ভালভাবে সজ্জিত, আধুনিক ওয়েবের ক্রমবর্ধমান চাহিদার জন্য তৈরি।

4. সমান্তরাল রুট কিভাবে কাজ করে

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

4.1 "স্লট" এবং @ফোল্ডার কনভেনশন উপস্থাপন করা হচ্ছে:

"স্লট" ধারণাটি সমান্তরাল রুটের কেন্দ্রস্থলে রয়েছে। স্লটগুলিকে মনোনীত এলাকা হিসাবে ভাবুন যা আপনার ওয়েবসাইটের বিভিন্ন পৃষ্ঠা বা অংশগুলি প্রদর্শন করতে পারে।

@folder কনভেনশন হল এই স্লটগুলি সেট আপ করার জন্য ব্যবহৃত পদ্ধতি, যেমন ডকুমেন্টেশনের নোট দ্বারা প্রমাণিত:

"সমান্তরাল রুটগুলি এই নামযুক্ত 'স্লট' ব্যবহার করে, @ ফোল্ডার পদ্ধতি ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।"

• কোড ব্যাখ্যা:

  
  

  • সমান্তরাল রুটের জন্য ফোল্ডার কাঠামো: এই উদাহরণটি বিবেচনা করুন:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    এখানে, '@user' এবং '@team' বিভিন্ন বিষয়বস্তুর জন্য কন্টেইনার হিসেবে কাজ করে, যা আমাদের ওয়েবসাইটকে আরও নমনীয়ভাবে ডিজাইন করতে দেয়।

    
    

  • লেআউটগুলি কীভাবে প্রপস হিসাবে স্লটগুলি ব্যবহার করে: ডকুমেন্টেশনের উপর ভিত্তি করে, একই রুট সেগমেন্টের লেআউট এই স্লটগুলিকে প্রপ হিসাবে ব্যবহার করতে পারে। এখানে একটি স্পষ্ট উদাহরণ:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • দ্রষ্টব্য: উপরের কোডে, getCurrentUserType() ফাংশনটি ব্যবহারকারীর ধরন নির্ধারণ করতে ব্যবহৃত হয়, যা ঘুরে, user বা team স্লট প্রদর্শিত হবে কিনা তা নির্দেশ করে।

    
    

• অন্তর্নিহিত বনাম স্পষ্ট রুট স্লট: Next.js রাউটিং এর একটি শক্তিশালী পয়েন্ট হল এর নমনীয়তা। যদিও আমাদের উদাহরণে '@user' এবং '@team' হল সুস্পষ্ট স্লট যা আমরা সংজ্ঞায়িত করি (সরাসরি একটি @folder সাথে লিঙ্ক করা), সেখানে একটি অন্তর্নিহিত বা স্বয়ংক্রিয় স্লটও রয়েছে৷

  
  

• ডকুমেন্টেশন ব্যাখ্যা করে যে

  " children এই ধরনের স্বয়ংক্রিয় স্লট, এবং আমাদের এটিকে @folder সাথে যুক্ত করার দরকার নেই। তাই, dashboard/page.js ফাংশন dashboard/@children/page.js এর মতোই।"

সমান্তরাল রুটগুলি কীভাবে কাজ করে তা পুঙ্খানুপুঙ্খভাবে উপলব্ধি করার মাধ্যমে, বিকাশকারীরা Next.js 13 এর ক্ষমতাগুলিকে অপ্টিমাইজ করতে পারে, আরও স্বজ্ঞাত এবং অভিযোজিত ওয়েবসাইটগুলি তৈরি করে৷

5. সমান্তরাল রুটগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে একটি ধাপে ধাপে নির্দেশিকা৷

5.1 একটি নতুন Next.js অ্যাপ সেট আপ করা

একটি নতুন Next.js অ্যাপ্লিকেশন তৈরি করে শুরু করুন:

 npx create-next-app@latest parallel-routes

নতুন তৈরি অ্যাপের ডিরেক্টরিতে নেভিগেট করুন:

 cd parallel-routes

বিকাশ সার্ভার শুরু করুন:

 yarn dev

5.2 অ্যাপের গঠন

প্রকল্প ডিরেক্টরিতে, নিম্নলিখিত ফোল্ডার এবং ফাইলগুলি তৈরি করুন:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Comps তৈরি করা এবং ডেটা লোডিং অনুকরণ করা

app/@folder1/page.js এ, আমরা একটি লোডিং টাইম দেখানোর জন্য উপাদান তৈরি করব এবং ভিজ্যুয়াল সিকোয়েন্সে কোন উপাদানগুলি লোড হয় তা বোঝার জন্য অনুকরণ করব:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

একইভাবে, app/@folder2/page.js এ:

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

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

5.4 লেআউট কোড আপডেট করুন

app/layout.js এ, দুটি ফোল্ডার মিটমাট করতে লেআউট কোড সামঞ্জস্য করুন:

আগে:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

পরে:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

ভাল পঠনযোগ্যতার জন্য লেআউটটিকে সর্বোত্তম স্টাইল করতে নির্দ্বিধায়

5.5 লোডিং স্টেট যোগ করুন

Next.Js ডকুমেন্টেশন বলে যে:

বিশেষ ফাইল loading.js আপনাকে রিঅ্যাক্ট সাসপেন্স সহ অর্থপূর্ণ লোডিং UI তৈরি করতে সহায়তা করে। এই কনভেনশনের সাহায্যে, রুট সেগমেন্টের বিষয়বস্তু লোড হওয়ার সময় আপনি সার্ভার থেকে তাৎক্ষণিক লোডিং অবস্থা দেখাতে পারেন। রেন্ডারিং সম্পূর্ণ হলে নতুন বিষয়বস্তু স্বয়ংক্রিয়ভাবে অদলবদল হয়ে যায়।

প্রতিটি উপাদানের জন্য (folder1 এবং ফোল্ডার2), আমরা একটি লোডিং অবস্থা তৈরি করব। আপনার ফোল্ডার গঠন এই মত হওয়া উচিত:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6। পৃষ্ঠাটি পরিবর্তন করুন

app/page.js এর বিষয়বস্তু সামঞ্জস্য করুন।

এই পরিবর্তনটি নিশ্চিত করে যে মূল পৃষ্ঠাটি কিছুই দেখায় না, সমান্তরাল রুটগুলিকে উজ্জ্বল করতে দেয়:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

দাবিত্যাগ

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

উপসংহার

Next.js 13.3-এ প্রবর্তিত সমান্তরাল রুটগুলি ওয়েব ডেভেলপমেন্টের ক্ষেত্রে একটি উল্লেখযোগ্য অগ্রগতি চিহ্নিত করেছে।

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

সমান্তরাল রুটের সাথে, Next.js গতিশীল ওয়েব ডিজাইনের জন্য একটি উদ্ভাবনী পদ্ধতির অফার করে, যা একক দৃশ্যে একাধিক পৃষ্ঠার একযোগে রেন্ডার করার অনুমতি দেয়।

এই শক্তিশালী বৈশিষ্ট্যটি শুধুমাত্র বর্ধিত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে না বরং সমসাময়িক ওয়েব অ্যাপ্লিকেশন ডিজাইনের সীমানা ঠেলে জটিল লেআউট এবং শর্তসাপেক্ষ রেন্ডারিংয়ের সুবিধাও দেয়।

উপরে প্রদত্ত বিশদ নির্দেশিকা অনুসরণ করে, বিকাশকারীরা "স্লট" এবং '@ফোল্ডার' কনভেনশনের মতো মূল ধারণাগুলি বোঝা থেকে শুরু করে Next.js ফ্রেমওয়ার্ক ব্যবহার করে ব্যবহারিক বাস্তবায়ন পর্যন্ত সমান্তরাল রুটের কাজের গভীরে যেতে পারে।

যদিও কিছু বাধা থাকতে পারে, যেমন উল্লেখ করা গরম রিলোডিং সমস্যা, সমান্তরাল রুট দ্বারা ওয়েব অ্যাপ্লিকেশনগুলিতে যোগ করা নমনীয়তা এবং গতিশীলতা শেখার বক্ররেখাকে মূল্যবান করে তোলে।

যেহেতু ডিজিটাল ল্যান্ডস্কেপ ক্রমাগত বিকশিত হচ্ছে, এই ধরনের সরঞ্জাম এবং বৈশিষ্ট্যগুলি নিঃসন্দেহে ওয়েব ডেভেলপমেন্টের ভবিষ্যত গঠনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করবে।

আবার, আপনার ধৈর্য এবং উত্সর্গের জন্য আপনাকে ধন্যবাদ.

প্রতিক্রিয়া বা প্রশ্ন পেয়েছেন? শেয়ার করতে নির্দ্বিধায়. প্রতিটি ভয়েস মান যোগ করে।

আমার সাথে সংযোগ করুন:

dev.to সম্প্রদায় @leandro_nnz hackernoon.com সম্প্রদায় @leandronnz hashnode.com leandronnz twitter.com @digpollution

পরের সময় পর্যন্ত, খুশি কোডিং!

তথ্যসূত্র

আপনি এখানে এই রেপোতে সম্পূর্ণ কোড খুঁজে পেতে পারেন।

অফিসিয়াল Next.js ডকুমেন্টেশন এখানে ।

এই নিবন্ধটি নির্মাণের জন্য, আমি StackEdit ব্যবহার করেছি।

আনস্প্ল্যাশে মার্কাস স্পিসকের ছবি