Ձեր ֆրոնտենդը դեռ աշխատում է jQuery-ի, հին դասի բաղադրիչների կամ հնացած Next.js կարգավորումների վրա, և յուրաքանչյուր փոփոխություն ավելի երկար է տևում, քան պետք է։ Ես այն տեղափոխում եմ ժամանակակից React կամ Next.js TypeScript-ով՝ մեկ էջը մեկ անգամ, մինչդեռ արտադրանքը շարունակում է աշխատել։
Ես կտեղափոխեմ ձեր jQuery կամ հին React ֆրոնտենդը ժամանակակից React կամ Next.js՝ էջ առ էջ։
Ձեր ֆրոնտենդի միգրացիայի պլանը և մեկ փոքր էջ՝ որպես օրինակ։
- Պլան և մեկ օրինակ էջ
- Գրավոր միգրացիոն պլան
- Աղբյուրի կոդ
Մինչև 3 էջ տեղափոխված React կամ Next.js՝ աշխատելով հին կոդի կողքին։
- Մինչև 3 էջ տեղափոխված
- Գրավոր միգրացիոն պլան
- Աղբյուրի կոդ
Մինչև 8 էջ, ընդհանուր բաղադրիչներ, TypeScript տիպեր և թեստեր։
- Մինչև 8 էջ, բաղադրիչներ, թեստեր
- Գրավոր միգրացիոն պլան
- Աղբյուրի կոդ
Հարցնել անհատական առաջարկ
Մուտք գործեք՝ անհատական առաջարկ հարցնելու համար
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ այս Zinner-ից անհատական առաջարկ հարցնելու համար։
Մուտք / ԳրանցումՀարց տալ մինչև վաճառքը
Մուտք գործեք՝ հարց տալու համար
Հարթակի սպամը նվազեցնելու համար մինչև վաճառքի հաղորդագրությունները կարող են ուղարկվել միայն մուտք գործած օգտատերերի կողմից։
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ անմիջապես այս Zinner-ին հաղորդագրություն ուղարկելու համար։
Մուտք / ԳրանցումՊահանջվում է մուտք
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ այս Zinner-ին հաղորդագրություն ուղարկելու համար։
Մուտք / ԳրանցումՊահանջվում է մուտք
Ստեղծեք անվճար հաշիվ կամ մուտք գործեք՝ անհատականացված առաջարկ խնդրելու համար։
Մուտք / ԳրանցումՄի հայացքից
Այս ծառայության հիմնական մանրամասները, որոնք կօգնեն ձեզ որոշում կայացնել: Ստեղծվել է Zinn Hub-ի կողմից, ոչ թե վաճառողի:
Արժեքային դիրք
Միգրացիայի մոտեցում
Տեխնոլոգիական փաթեթ
Ինչն է մնում անփոփոխ
Առաքումից հետո աջակցություն
Ինչ կստանաք
Ամբողջական նկարագրություն
Որոշ ապրանքներ աշխատում և գումար են վաստակում, բայց դրանց ֆրոնտենդը դժվար է դարձել փոփոխել. jQuery-ն տարածված է շաբլոններում, React դասի բաղադրիչները տարիներ առաջվա են, կամ Next.js հավելվածը դեռ Pages Router-ի վրա է։ Ամբողջական վերագրումը ամիսներով սառեցնում է արտադրանքը։ Ես անում եմ մյուս բանը. հին և նոր կոդը աշխատում են կողք կողքի, և էջերը մեկ առ մեկ տեղափոխվում են, այնպես որ ձեր օգտատերերի համար երբեք մեծ անցումային օր չի լինում։
Ես հենց սա արեցի նախկին NDA նախագծի վրա. jQuery ֆրոնտենդը տեղափոխվեց React էջ առ էջ, մինչդեռ արտադրանքը մնաց գործող։
Starter-ը ձեզ տալիս է պլանը. ես կարդում եմ հին ֆրոնտենդը, քարտեզագրում եմ դրա էջերը և ընդհանուր մասերը, թվարկում եմ ռիսկերը և միգրացիա եմ անում մեկ փոքր էջ՝ որպես մոտեցման աշխատանքային օրինակ։ Standard-ը տեղափոխում է մինչև երեք էջ կամ էկրան։ Advanced-ը տեղափոխում է մինչև ութը, կառուցում է դրանց անհրաժեշտ ընդհանուր բաղադրիչները և ծածկում դրանք TypeScript տիպերով իրենց տվյալների համար և թեստերով հիմնական հոսքերի համար։
Ինչն է մնում. ձեր բեքենդը, ձեր URL-ները և օգտատերերի իմացած վարքագիծը։ Ինչն է փոխվում. ինչպես է կազմակերպված կոդը, որպեսզի հաջորդ ֆունկցիան գրվի մեկ անգամ, մեկ տեղում։ Առաքումից հետո 14 օրվա ընթացքում ես անվճար շտկում եմ այն ամենը, ինչը չի աշխատում, ինչպես մենք համաձայնեցրել ենք։
Էջերի հերթականությունը և պլանը համաձայնեցվում են պատվերի չաթում՝ առանց զանգերի։ Յուրաքանչյուր միգրացված էջ առաքվում է առանձին, և դուք ստանում եք գրավոր կարգավիճակի նշում ամեն աշխատանքային օր։
Ձեր նախագիծն ավարտելու քայլերը
1. Քարտեզագրել հին ֆրոնտենդը. Ես անցնում եմ շաբլոնների, սկրիպտների և բաղադրիչների միջով և թվարկում եմ էջերը, ընդհանուր մասերը և ցանկացած ռիսկային բան, ինչպիսիք են գլոբալ վիճակը կամ ներկառուցված սկրիպտները։
2. Համաձայնեցնել հերթականությունը. Դուք ստանում եք գրավոր պլան՝ որ էջը գնում է առաջինը, ինչ է տեղափոխվում դրա հետ, և ինչպես են հին և նոր կոդերը կիսում արտադրանքը, մինչդեռ երկուսն էլ գոյություն ունեն։
3. Կամուրջ. Նոր React կամ Next.js կոդը տեղադրվում է հին կոդի կողքին՝ երթուղիով, որն յուրաքանչյուր էջ ուղարկում է այն կողմին, որին այն պատկանում է։
4. Տեղափոխել էջերը մեկ առ մեկ. Յուրաքանչյուր էջ վերակառուցվում է, համեմատվում է հին տարբերակի հետ և անցում է կատարվում առանձին, այնպես որ խնդիրը ազդում է մեկ էջի վրա, ոչ թե արտադրանքի։
5. Հանձնում. Միգրացված էջերը, մնացածի համար թարմացված պլանը և կարճ նշում հաջորդ էջերի համար հետևելու օրինաչափությունների վերաբերյալ։
Zinner Որակի Երաշխիք
Յուրաքանչյուր Zinner վերանայվում և հաստատվում է հարթակին միանալուց առաջ:
Բոլոր ծառայություններն ապահովված են մեր որակի ապահովման պարտավորությամբ:
Ձեր վճարումը պաշտպանված է մինչև առաքված աշխատանքը հաստատելը:
Համեմատել փաթեթները
| Ֆունկցիա | Սկսնակ | Ստանդարտ | Ընդլայնված |
|---|---|---|---|
| Առաքման ժամանակը | 4 օր | 10 օր | 21 օր |
| Վերանայումներ | 1 | 2 | 3 |
| Շրջանակ | Պլան և մեկ օրինակ էջ | Մինչև 3 էջ տեղափոխված | Մինչև 8 էջ, բաղադրիչներ, թեստեր |
| Գրավոր միգրացիոն պլան | ✓ | ✓ | ✓ |
| Աղբյուրի կոդը | ✓ | ✓ | ✓ |
Պորտֆոլիո
Վաճառողի աշխատանքի օրինակներ՝ կապված այս Zinn-ի հետ։
Formline: Next.js խանութ Stripe-ով
Խանութ, որի միջով կարող եք սեղմել. 16 պաստառներ 4 հավաքածուներում, զտիչներ և որոնում, որոնք մնում են URL-ում, զամբյուղ, բաց և մուգ թեմաներ, և վճարում, որն ավարտվում է դեմո պատվերով կամ իրական Stripe Checkout նիստով թեստային ռեժիմում։ Ես այն կառուցել եմ որպես Next.js ստատիկ արտահանում TypeScript-ում Tailwind CSS-ով։ Քարտային վճարումները անցնում են Cloudflare Worker-ի միջոցով, որը վերագնահատում է զամբյուղը սերվերում և ստուգում է Stripe-ի վեբհուկի ստորագրությունը։
Երկլեզու անձնական կայք Next.js-ում
Մեկ էջանոց անձնական կայք անգլերեն և ռուսերեն լեզուներով, ծառայությունների բաժնով և հղումներով դեպի իմ դեմո նախագծերը։ Ես այն նախագծել և կառուցել եմ Next.js-ով, React-ով և TypeScript-ով որպես ստատիկ արտահանում, ձևավորված պարզ CSS Modules-ով և առանց UI շրջանակի։ Այն ունի բաց և մուգ թեմաներ, և յուրաքանչյուր լեզվի համար սոցիալական նախադիտման պատկերը ստեղծվում է կառուցման ժամանակ։ GitHub Actions-ը կառուցում և տեղակայում է այն Bunny CDN-ում, որն ավելացնում է անվտանգության վերնագրեր և վերահղում է www-ն և պարզ HTTP-ն դեպի հիմնական HTTPS հասցեն։
Ծառայության մանրամասներ
Հաճախ տրվող հարցեր
Որովհետև արտադրանքը ամիսներով կկանգներ, և ամբողջ ռիսկը կընկներ մեկ թողարկման օրվա վրա։ Էջ առ էջ, յուրաքանչյուր քայլ փոքր է, փորձարկելի և հեշտ է հետ շրջել։
Էջերը պահպանում են իրենց հասցեները։ Next.js-ի դեպքում նոր էջերը հասնում են բրաուզերին որպես պատրաստի HTML՝ մատուցված սերվերի կողմից կամ կառուցման ժամանակ, այնպես որ որոնման համակարգերը տեսնում են բովանդակությունը, ինչպես նախկինում։ React-ը Vite-ի հետ մատուցվում է բրաուզերում, ուստի որոնման տրաֆիկ բերող էջերի համար ես խորհուրդ եմ տալիս Next.js։
Այո։ Միգրացված էջերը գրված են TypeScript-ով, իսկ հին կոդը շարունակում է աշխատել որպես JavaScript, մինչև իր հերթը գա։
Ոչ։ Միգրացիան վերաբերում է միայն ֆրոնտենդին։ Այնտեղ, որտեղ ձեր բեքենդն արդեն ունի վերջնակետեր էջի անհրաժեշտ տվյալների համար, նոր էջը դրանք օգտագործում է։ Եթե այդ տվյալները այսօր գոյություն ունեն միայն PHP-ի կողմից մատուցված HTML-ի տեսքով, ապա պլանը թվարկում է այն փոքր JSON վերջնակետերը, որոնք անհրաժեշտ են էջին, և մենք համաձայնեցնում ենք, թե ով է դրանք ավելացնում մինչև այդ էջի տեղափոխումը։
Հաճախորդների ակնարկներ
Տեսեք, թե ինչ են ասում մեր հաճախորդները այս Zinn-ի մասին
Կատեգորիաներ
Zinner Քաղաքականություն
Առնչվող Zinns
Մշակել պրոֆեսիոնալ վեբ հավելվածներ՝ օգտագործելով Next.js, React, Firebase և Node.js
Ստեղծեք անհատական վեբ հավելվածներ՝ օգտագործելով React JS, Node JS և Google Firebase
