আপনার ফ্রন্ট এন্ড এখনও jQuery, পুরনো ক্লাস কম্পোনেন্ট বা একটি পুরনো Next.js সেটআপে চলে, এবং প্রতিটি পরিবর্তন করতে যতটা সময় লাগা উচিত তার চেয়ে বেশি সময় লাগে। আমি এটিকে আধুনিক রিঅ্যাক্ট বা Next.js-এ TypeScript-এ একবারে একটি পৃষ্ঠা করে স্থানান্তরিত করি, যখন পণ্যটি কাজ করতে থাকে।
আমি আপনার jQuery বা লিগ্যাসি রিঅ্যাক্ট ফ্রন্ট এন্ডকে আধুনিক রিঅ্যাক্ট বা Next.js-এ, পৃষ্ঠা অনুসারে স্থানান্তরিত করব।
আপনার ফ্রন্ট এন্ডের জন্য একটি মাইগ্রেশন প্ল্যান এবং একটি ছোট পৃষ্ঠা নমুনা হিসাবে স্থানান্তরিত করা হয়েছে।
- প্ল্যান এবং একটি নমুনা পৃষ্ঠা
- লিখিত মাইগ্রেশন প্ল্যান
- সোর্স কোড
3টি পৃষ্ঠা পর্যন্ত রিঅ্যাক্ট বা নেক্সট.জেএস-এ স্থানান্তরিত করা হয়েছে, যা পুরনো কোডের পাশে চলছে।
- পর্যন্ত 3 পৃষ্ঠা সরানো হয়েছে
- লিখিত মাইগ্রেশন প্ল্যান
- সোর্স কোড
8টি পৃষ্ঠা পর্যন্ত, শেয়ার করা উপাদান, টাইপস্ক্রিপ্ট টাইপ এবং পরীক্ষা।
- 8 পৃষ্ঠা, উপাদান, পরীক্ষা পর্যন্ত
- লিখিত মাইগ্রেশন প্ল্যান
- সোর্স কোড
একটি কাস্টম অফার অনুরোধ করুন
একটি কাস্টম অফারের জন্য লগ ইন করুন
এই Zinner থেকে একটি ব্যক্তিগতকৃত অফার অনুরোধ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা লগ ইন করুন৷
লগ ইন / রেজিস্টার করুনবিক্রয়-পূর্ব প্রশ্ন জিজ্ঞাসা করুন
প্রশ্ন জিজ্ঞাসা করতে লগ ইন করুন
প্ল্যাটফর্ম স্প্যাম কমাতে, প্রাক-বিক্রয় বার্তা শুধুমাত্র লগইন করা ব্যবহারকারীরা পাঠাতে পারবেন।
একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা এই Zinner-কে সরাসরি মেসেজ করতে লগ ইন করুন।
লগ ইন / রেজিস্টার করুনলগ ইন করা প্রয়োজন
এই Zinner-কে মেসেজ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা লগ ইন করুন।
লগ ইন / রেজিস্টার করুনলগ ইন করা প্রয়োজন
একটি ব্যক্তিগতকৃত অফার অনুরোধ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন বা লগ ইন করুন।
লগ ইন / রেজিস্টার করুনএক নজরে
এই পরিষেবা সম্পর্কে মূল বিবরণ যা আপনাকে সিদ্ধান্ত নিতে সাহায্য করবে। Zinn Hub দ্বারা তৈরি, বিক্রেতা দ্বারা নয়।
মূল্য অবস্থান
মাইগ্রেশন পদ্ধতি
প্রযুক্তি স্ট্যাক
যা অক্ষত থাকে
ডেলিভারি পরবর্তী সহায়তা
আপনি কি পাবেন
সম্পূর্ণ বিবরণ
কিছু পণ্য কাজ করে এবং অর্থ উপার্জন করে, কিন্তু তাদের ফ্রন্ট এন্ড পরিবর্তন করা কঠিন হয়ে পড়েছে: টেমপ্লেট জুড়ে ছড়িয়ে থাকা jQuery, কয়েক বছর আগের রিঅ্যাক্ট ক্লাস কম্পোনেন্ট, অথবা একটি নেক্সট.জেএস অ্যাপ এখনও পেজেস রাউটারে চলছে। একটি সম্পূর্ণ রিরাইট পণ্যটিকে কয়েক মাস ধরে স্থবির করে দেয়। আমি অন্য কাজটি করি: পুরনো এবং নতুন কোড পাশাপাশি চলে, এবং পৃষ্ঠাগুলি একে একে স্থানান্তরিত হয়, তাই আপনার ব্যবহারকারীদের জন্য কখনও কোনো বড় পরিবর্তন দিবস থাকে না।
আমি এনডিএ-এর অধীনে একটি পূর্ববর্তী প্রকল্পে ঠিক এটিই করেছি: একটি jQuery ফ্রন্ট এন্ড রিঅ্যাক্টে পৃষ্ঠা অনুসারে স্থানান্তরিত হয়েছিল যখন পণ্যটি লাইভ ছিল।
স্টার্টার আপনাকে প্ল্যান দেয়: আমি পুরনো ফ্রন্ট এন্ড পড়ি, এর পৃষ্ঠাগুলি এবং শেয়ার করা অংশগুলি ম্যাপ করি, ঝুঁকিগুলি তালিকাভুক্ত করি এবং পদ্ধতির একটি কার্যকরী নমুনা হিসাবে একটি ছোট পৃষ্ঠা স্থানান্তরিত করি। স্ট্যান্ডার্ড তিনটি পৃষ্ঠা বা স্ক্রিন পর্যন্ত স্থানান্তরিত করে। অ্যাডভান্সড আটটি পর্যন্ত স্থানান্তরিত করে, তাদের প্রয়োজনীয় শেয়ার করা উপাদানগুলি তৈরি করে এবং তাদের ডেটার জন্য টাইপস্ক্রিপ্ট টাইপ এবং প্রধান ফ্লোগুলির জন্য পরীক্ষা দিয়ে কভার করে।
যা থাকে: আপনার ব্যাকএন্ড, আপনার ইউআরএল এবং ব্যবহারকারীরা যে আচরণ জানেন। যা পরিবর্তন হয়: কোড কীভাবে সংগঠিত হয়, যাতে পরবর্তী বৈশিষ্ট্যটি একবার, এক জায়গায় লেখা হয়। বিতরণের 14 দিন পর, আমরা যা সম্মত হয়েছিলাম তা কাজ না করলে আমি বিনামূল্যে ঠিক করে দিই।
পৃষ্ঠার ক্রম এবং পরিকল্পনা কল ছাড়াই অর্ডার চ্যাটে সম্মত হয়। প্রতিটি স্থানান্তরিত পৃষ্ঠা তার নিজস্বভাবে পাঠানো হয়, এবং আপনি প্রতি কর্মদিবসে একটি লিখিত স্ট্যাটাস নোট পান।
আপনার প্রজেক্ট সম্পূর্ণ করার ধাপ
1. পুরনো ফ্রন্ট এন্ড ম্যাপ করুন - আমি টেমপ্লেট, স্ক্রিপ্ট এবং কম্পোনেন্টগুলি দেখি এবং পেজ, শেয়ার করা অংশ এবং গ্লোবাল স্টেট বা ইনলাইন স্ক্রিপ্টের মতো ঝুঁকিপূর্ণ কিছু তালিকাভুক্ত করি।
2. ক্রম সম্মত হন - আপনি একটি লিখিত পরিকল্পনা পান: কোন পেজ প্রথমে যাবে, এর সাথে কী যাবে এবং পুরনো ও নতুন কোড উভয়ই বিদ্যমান থাকাকালীন কীভাবে পণ্যটি শেয়ার করবে।
3. ব্রিজ - নতুন React বা Next.js কোড পুরনো কোডের পাশে সেট আপ করা হয়, যেখানে রাউটিং প্রতিটি পেজকে তার মালিকানাধীন দিকে পাঠায়।
4. পেজগুলি একে একে সরান - প্রতিটি পেজ পুনর্নির্মাণ করা হয়, পুরনো সংস্করণের সাথে তুলনা করা হয় এবং নিজস্বভাবে পরিবর্তন করা হয়, যাতে একটি সমস্যা একটি পেজকে প্রভাবিত করে, পুরো পণ্যকে নয়।
5. হস্তান্তর - স্থানান্তরিত পেজ, যা বাকি আছে তার জন্য আপডেট করা পরিকল্পনা এবং পরবর্তী পেজগুলির জন্য অনুসরণ করার প্যাটার্নগুলির উপর একটি সংক্ষিপ্ত নোট।
Zinner গুণমান গ্যারান্টি
প্রতিটি Zinner প্ল্যাটফর্মে যোগদানের আগে পর্যালোচনা এবং অনুমোদিত হয়।
সমস্ত পরিষেবা আমাদের গুণমান নিশ্চিতকরণ প্রতিশ্রুতির দ্বারা সমর্থিত।
আপনার পেমেন্ট সুরক্ষিত থাকে যতক্ষণ না আপনি বিতরণ করা কাজটি অনুমোদন করেন।
প্যাকেজ তুলনা করুন
| ফাংশন | স্টার্টার | স্ট্যান্ডার্ড | উন্নত |
|---|---|---|---|
| ডেলিভারি সময় | 4 দিন | 10 দিন | 21 দিন |
| পুনর্বিবেচনা | 1 | 2 | 3 |
| ব্যাপ্তি | পরিকল্পনা এবং একটি নমুনা পৃষ্ঠা | 3 পৃষ্ঠা পর্যন্ত স্থানান্তরিত হয়েছে | 8 পৃষ্ঠা, উপাদান, পরীক্ষা |
| লিখিত মাইগ্রেশন পরিকল্পনা | ✓ | ✓ | ✓ |
| সোর্স কোড | ✓ | ✓ | ✓ |
পোর্টফোলিও
এই Zinn সম্পর্কিত বিক্রেতার কাজের উদাহরণ।
ফর্মলাইন: স্ট্রাইপ সহ Next.js স্টোর
একটি স্টোরফ্রন্ট যেখানে আপনি ক্লিক করতে পারবেন: 16 পোস্টার 4 সংগ্রহে, ফিল্টার এবং অনুসন্ধান যা URL-এ থাকে, একটি কার্ট, হালকা এবং গাঢ় থিম, এবং একটি চেকআউট যা একটি ডেমো অর্ডার বা টেস্ট মোডে একটি বাস্তব স্ট্রাইপ চেকআউট সেশনে শেষ হয়। আমি এটি Next.js স্ট্যাটিক এক্সপোর্ট হিসাবে টাইপস্ক্রিপ্ট সহ Tailwind CSS ব্যবহার করে তৈরি করেছি। কার্ড পেমেন্টগুলি একটি Cloudflare Worker-এর মাধ্যমে যায় যা সার্ভারে কার্টের মূল্য পুনরায় নির্ধারণ করে এবং স্ট্রাইপের ওয়েবহুক স্বাক্ষর যাচাই করে।
Next.js-এ দ্বিভাষিক ব্যক্তিগত সাইট
ইংরেজি এবং রাশিয়ান ভাষায় একটি এক-পৃষ্ঠার ব্যক্তিগত সাইট, যেখানে একটি পরিষেবা বিভাগ এবং আমার ডেমো প্রকল্পগুলির লিঙ্ক রয়েছে। আমি এটি Next.js, React এবং TypeScript ব্যবহার করে একটি স্ট্যাটিক এক্সপোর্ট হিসাবে ডিজাইন এবং তৈরি করেছি, সাধারণ CSS মডিউল এবং কোনো UI ফ্রেমওয়ার্ক ছাড়াই স্টাইল করা হয়েছে। এতে হালকা এবং গাঢ় থিম রয়েছে এবং প্রতিটি ভাষার জন্য একটি সামাজিক পূর্বরূপ চিত্র বিল্ড টাইমে তৈরি করা হয়। GitHub Actions এটি তৈরি করে এবং Bunny CDN-এ স্থাপন করে, যা নিরাপত্তা হেডার যোগ করে এবং www এবং প্লেইন HTTP কে প্রধান HTTPS ঠিকানায় রিডাইরেক্ট করে।
পরিষেবার বিবরণ
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
কারণ পণ্যটি কয়েক মাস ধরে স্থির থাকবে এবং সমস্ত ঝুঁকি একটি রিলিজের দিনে পড়বে। পৃষ্ঠা অনুসারে, প্রতিটি ধাপ ছোট, পরীক্ষাযোগ্য এবং রোল ব্যাক করা সহজ।
পৃষ্ঠাগুলি তাদের ঠিকানা বজায় রাখে। Next.js-এর সাথে, নতুন পৃষ্ঠাগুলি প্রস্তুত HTML হিসাবে ব্রাউজারে পৌঁছায়, সার্ভারে বা বিল্ড টাইমে রেন্ডার করা হয়, তাই সার্চ ইঞ্জিনগুলি আগের মতোই বিষয়বস্তু দেখে। Vite সহ React ব্রাউজারে রেন্ডার করে, তাই যে পৃষ্ঠাগুলি সার্চ ট্র্যাফিক নিয়ে আসে সেগুলির জন্য আমি Next.js সুপারিশ করি।
হ্যাঁ। স্থানান্তরিত পৃষ্ঠাগুলি TypeScript-এ লেখা হয় এবং পুরনো কোড JavaScript হিসাবে চলতে থাকে যতক্ষণ না তার পালা আসে।
না। মাইগ্রেশন শুধুমাত্র ফ্রন্ট এন্ডকে স্পর্শ করে। যেখানে আপনার ব্যাকএন্ডে একটি পৃষ্ঠার প্রয়োজনীয় ডেটার জন্য ইতিমধ্যেই এন্ডপয়েন্ট রয়েছে, নতুন পৃষ্ঠা সেগুলি ব্যবহার করে। যদি সেই ডেটা আজ শুধুমাত্র PHP দ্বারা রেন্ডার করা HTML হিসাবে বিদ্যমান থাকে, তাহলে পরিকল্পনায় পৃষ্ঠার প্রয়োজনীয় ছোট JSON এন্ডপয়েন্টগুলি তালিকাভুক্ত করা হয় এবং আমরা সম্মত হই যে সেই পৃষ্ঠাটি স্থানান্তরিত হওয়ার আগে কে সেগুলি যোগ করবে।
গ্রাহক পর্যালোচনা
আমাদের গ্রাহকরা এই Zinn সম্পর্কে কী বলেন তা দেখুন
বিভাগসমূহ
Zinner নীতিসমূহ
সম্পর্কিত Zinns
React JS, Node JS এবং Google Firebase ব্যবহার করে কাস্টম ওয়েব অ্যাপ্লিকেশন তৈরি করুন
Next.js, React, Firebase এবং Node.js ব্যবহার করে পেশাদার ওয়েব অ্যাপ্লিকেশন তৈরি করুন
