Sizning front-endingiz hali ham jQuery, eski sinf komponentlari yoki eskirgan Next.js sozlamalarida ishlaydi va har bir o'zgarish kutilganidan ko'proq vaqt oladi. Men uni mahsulot ishlashda davom etayotgan bir paytda, bir sahifadan keyin bir sahifa qilib, zamonaviy React yoki Next.js ga TypeScriptda ko'chiraman.
Men sizning jQuery yoki eski React front-endingizni zamonaviy React yoki Next.js ga, sahifa bo'yicha ko'chiraman
Sizning front-endingiz uchun migratsiya rejasi va namuna sifatida ko'chirilgan bitta kichik sahifa.
- Reja va bitta namuna sahifa
- Yozma migratsiya rejasi
- Manba kodi
Eski kod bilan birga ishlaydigan 3 tagacha sahifa React yoki Next.js ga ko'chirilgan.
- 3 tagacha sahifa ko'chirildi
- Yozma migratsiya rejasi
- Manba kodi
8 tagacha sahifa, umumiy komponentlar, TypeScript turlari va testlar.
- 8 tagacha sahifa, komponentlar, testlar
- Yozma migratsiya rejasi
- Manba kodi
Maxsus taklif so'rash
Maxsus taklif so'rash uchun tizimga kiring
Ushbu Zinnerdan shaxsiylashtirilgan taklif so'rash uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishSotishdan oldingi savol bering
Savol berish uchun tizimga kiring
Platforma spamini kamaytirish uchun sotishdan oldingi xabarlar faqat tizimga kirgan foydalanuvchilar tomonidan yuborilishi mumkin.
Ushbu Zinnerga to'g'ridan-to'g'ri xabar yuborish uchun bepul hisob yarating yoki tizimga kiring.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Ushbu Zinnerga xabar yuborish uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishTizimga kirish talab qilinadi
Shaxsiylashtirilgan taklifni so'rash uchun bepul hisob yaratish yoki tizimga kirish.
Kirish / Ro'yxatdan o'tishBir qarashda
Qaror qabul qilishingizga yordam beradigan ushbu xizmat haqida asosiy ma'lumotlar. Zinn Hub tomonidan yaratilgan, sotuvchi tomonidan emas.
Qiymat pozitsiyasi
Migratsiya yondashuvi
Texnologiya toʻplami
Nima o'zgarishsiz qoladi
Yetkazib berishdan keyingi qo'llab-quvvatlash
Siz nima olasiz
To'liq tavsif
Ba'zi mahsulotlar ishlaydi va pul topadi, ammo ularning front-endi o'zgartirish qiyin bo'lib qolgan: shablonlar bo'ylab tarqalgan jQuery, bir necha yil oldingi React klass komponentlari yoki hali ham Pages Router da ishlaydigan Next.js ilovasi. To'liq qayta yozish mahsulotni bir necha oyga muzlatib qo'yadi. Men boshqa ishni qilaman: eski va yangi kod yonma-yon ishlaydi va sahifalar birma-bir ko'chiriladi, shuning uchun foydalanuvchilaringiz uchun hech qachon katta o'tish kuni bo'lmaydi.
Men aynan shuni NDA ostidagi avvalgi loyihada qildim: mahsulot jonli efirda qolgan holda jQuery front-endi sahifa bo'yicha React ga ko'chirildi.
Boshlang'ich reja sizga rejani beradi: men eski front-endni o'qiyman, uning sahifalarini va umumiy qismlarini xaritalayman, xavflarni sanab o'taman va yondashuvning ishchi namunasi sifatida bitta kichik sahifani ko'chiraman. Standart uchta sahifa yoki ekranni ko'chiradi. Kengaytirilgan sakkiztagacha sahifani ko'chiradi, ular uchun kerakli umumiy komponentlarni yaratadi va ularni ma'lumotlari uchun TypeScript turlari va asosiy oqimlar uchun testlar bilan qoplaydi.
Nima o'zgarishsiz qoladi: sizning backend, sizning URL'laringiz va foydalanuvchilar biladigan xulq-atvor. Nima o'zgaradi: kod qanday tashkil etilganligi, shuning uchun keyingi funksiya bir marta, bir joyda yoziladi. Yetkazib berilgandan keyin 14 kun davomida men kelishilganidek ishlamaydigan har qanday narsani bepul tuzataman.
Sahifalar tartibi va reja buyurtma chatida, qo'ng'iroqlarsiz kelishiladi. Har bir ko'chirilgan sahifa o'z-o'zidan jo'natiladi va siz har ish kuni yozma holat eslatmasini olasiz.
Loyihangizni yakunlash bosqichlari
1. Eski front-endni xaritalash - Men shablonlar, skriptlar va komponentlarni ko'rib chiqaman va sahifalarni, umumiy qismlarni va har qanday xavfli narsalarni, masalan, global holat yoki inline skriptlarni sanab o'taman.
2. Tartibni kelishish - Siz yozma reja olasiz: qaysi sahifa birinchi bo'ladi, u bilan nima ko'chiriladi va eski va yangi kod ikkalasi ham mavjud bo'lganda mahsulotni qanday baham ko'radi.
3. Ko'prik - Yangi React yoki Next.js kodi eski kod bilan birga o'rnatiladi, har bir sahifani o'ziga tegishli tomonga yuboradigan marshrutlash bilan.
4. Sahifalarni birma-bir ko'chirish - Har bir sahifa qayta quriladi, eski versiyasi bilan solishtiriladi va o'z-o'zidan o'tkaziladi, shuning uchun muammo mahsulotga emas, balki bitta sahifaga ta'sir qiladi.
5. Topshirish - Ko'chirilgan sahifalar, qolgan narsalar uchun yangilangan reja va keyingi sahifalar uchun amal qilish kerak bo'lgan naqshlar haqida qisqa eslatma.
Zinner Sifat Kafolati
Har bir Zinner platformaga qo'shilishdan oldin ko'rib chiqiladi va tasdiqlanadi.
Barcha xizmatlar sifatni ta'minlash bo'yicha majburiyatimiz bilan qo'llab-quvvatlanadi.
Siz yetkazib berilgan ishni tasdiqlamaguningizcha toʻlovingiz himoyalangan.
Paketlarni solishtirish
| Funksiya | Boshlang'ich | Standart | Kengaytirilgan |
|---|---|---|---|
| Yetkazib berish muddati | 4 kun | 10 kun | 21 kun |
| Tuzatishlar | 1 | 2 | 3 |
| Doira | Reja va bitta namuna sahifa | 3 tagacha sahifa ko'chirildi | 8 tagacha sahifa, komponentlar, testlar |
| Yozma migratsiya rejasi | ✓ | ✓ | ✓ |
| Manba kodi | ✓ | ✓ | ✓ |
Portfolio
Sotuvchining ushbu Zinn bilan bog'liq ishlariga misollar.
Formline: Stripe bilan Next.js do'koni
Siz bosib o'tishingiz mumkin bo'lgan do'kon: 16 plakatlar 4 to'plamda, URLda qoladigan filtrlar va qidiruv, savat, yorug' va qorong'u mavzular va demo buyurtma yoki test rejimida haqiqiy Stripe Checkout sessiyasi bilan yakunlanadigan to'lov. Men uni TypeScriptda Tailwind CSS bilan Next.js statik eksporti sifatida qurdum. Karta to'lovlari Cloudflare Worker orqali o'tadi, u serverda savat narxini qayta hisoblaydi va Stripe veb-hook imzosini tekshiradi.
Next.jsda ikki tilli shaxsiy sayt
Ingliz va rus tillarida bir sahifali shaxsiy sayt, xizmatlar bo'limi va mening demo loyihalarimga havolalar bilan. Men uni Next.js, React va TypeScript bilan statik eksport sifatida loyihalashtirdim va qurdum, oddiy CSS modullari bilan va UI freymvorkisiz uslubladim. U yorug' va qorong'u mavzularga ega va har bir til uchun ijtimoiy oldindan ko'rish tasviri qurish vaqtida yaratiladi. GitHub Actions uni Bunny CDNga quradi va joylashtiradi, bu esa xavfsizlik sarlavhalarini qo'shadi va www va oddiy HTTPni asosiy HTTPS manziliga yo'naltiradi.
Xizmat tafsilotlari
Tez-tez so'raladigan savollar
Chunki mahsulot bir necha oy davomida to'xtab qoladi va barcha xavf bitta chiqarilish kuniga tushadi. Sahifa bo'yicha, har bir qadam kichik, sinovdan o'tkaziladigan va orqaga qaytarish oson.
Sahifalar o'z manzillarini saqlab qoladi. Next.js bilan yangi sahifalar brauzerga tayyor HTML sifatida, serverda yoki qurish vaqtida renderlangan holda yetib boradi, shuning uchun qidiruv tizimlari kontentni avvalgidek ko'radi. Vite bilan React brauzerda renderlanadi, shuning uchun qidiruv trafigini keltiradigan sahifalar uchun men Next.js ni tavsiya qilaman.
Ha. Ko'chirilgan sahifalar TypeScript da yozilgan va eski kod o'z navbati kelguncha JavaScript da ishlashda davom etadi.
Yo'q. Migratsiya faqat front-endga tegishli. Sizning backendda sahifaga kerak bo'lgan ma'lumotlar uchun allaqachon endpointlar mavjud bo'lsa, yangi sahifa ulardan foydalanadi. Agar bu ma'lumotlar bugungi kunda faqat PHP tomonidan renderlangan HTML sifatida mavjud bo'lsa, reja sahifaga kerak bo'lgan kichik JSON endpointlarini sanab o'tadi va biz bu sahifa ko'chirilishidan oldin ularni kim qo'shishini kelishamiz.
Mijozlar sharhlari
Mijozlarimiz ushbu Zinn haqida nima deganini ko'ring
Kategoriyalar
Zinner Siyosatlari
Tegishli Zinns
Figma-dan React Web ilovasini ishlab chiqish - Next.js, Node.js, Firebase va Supabase
