သင်၏ front end သည် jQuery၊ အဟောင်း class components များ သို့မဟုတ် ခေတ်မမီတော့သော Next.js setup တွင် လည်ပတ်နေဆဲဖြစ်ပြီး ပြောင်းလဲမှုတိုင်းသည် အချိန်ကြာမြင့်နေပါသည်။ ထုတ်ကုန် ဆက်လက်အလုပ်လုပ်နေချိန်တွင် ကျွန်ုပ်သည် ၎င်းကို ခေတ်မီ React သို့မဟုတ် Next.js သို့ TypeScript ဖြင့် တစ်မျက်နှာချင်းစီ ရွှေ့ပြောင်းပေးပါမည်။
ကျွန်ုပ်သည် သင်၏ jQuery သို့မဟုတ် အမွေအနှစ် React front end ကို ခေတ်မီ React သို့မဟုတ် Next.js သို့ တစ်မျက်နှာချင်းစီ ရွှေ့ပြောင်းပေးပါမည်။
သင်၏ front end အတွက် ရွှေ့ပြောင်းခြင်းအစီအစဉ်နှင့် နမူနာအဖြစ် ရွှေ့ပြောင်းထားသော စာမျက်နှာငယ်တစ်ခု။
- အစီအစဉ်နှင့် နမူနာစာမျက်နှာတစ်ခု
- ရေးသားထားသော ရွှေ့ပြောင်းခြင်းအစီအစဉ်
- ရင်းမြစ်ကုဒ်
3 စာမျက်နှာများအထိ React သို့မဟုတ် Next.js သို့ ရွှေ့ပြောင်းပြီး ကုဒ်အဟောင်းဘေးတွင် လုပ်ဆောင်နေပါသည်။
- စာမျက်နှာ 3 ခုအထိ ရွှေ့ပြောင်းပြီး
- ရေးသားထားသော ရွှေ့ပြောင်းခြင်းအစီအစဉ်
- ရင်းမြစ်ကုဒ်
8 စာမျက်နှာများအထိ၊ မျှဝေထားသော အစိတ်အပိုင်းများ၊ TypeScript အမျိုးအစားများနှင့် စမ်းသပ်မှုများ။
- စာမျက်နှာ 8 ခုအထိ၊ အစိတ်အပိုင်းများ၊ စမ်းသပ်မှုများ
- ရေးသားထားသော ရွှေ့ပြောင်းခြင်းအစီအစဉ်
- ရင်းမြစ်ကုဒ်
စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုပါ
စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုရန် ဝင်ရောက်ပါ
ဤ Zinner ထံမှ စိတ်ကြိုက်ကမ်းလှမ်းချက် တောင်းဆိုရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ရောင်းချမှုမတိုင်မီ မေးခွန်းမေးပါ
မေးခွန်းမေးရန် ဝင်ရောက်ပါ
ပလက်ဖောင်းပေါ်ရှိ spam များကို လျှော့ချရန်အတွက် ရောင်းချမှုမတိုင်မီ မက်ဆေ့ချ်များကို ဝင်ရောက်ထားသော အသုံးပြုသူများသာ ပေးပို့နိုင်ပါသည်။
ဤ Zinner ကို တိုက်ရိုက်မက်ဆေ့ချ်ပို့ရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ဝင်ရောက်ရန် လိုအပ်သည်
Zinner ကို မက်ဆေ့ချ်ပို့ရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်ဝင်ရောက်ရန် လိုအပ်သည်
ကိုယ်ပိုင်ကမ်းလှမ်းချက်တစ်ခု တောင်းဆိုရန် အခမဲ့အကောင့်တစ်ခု ဖန်တီးပါ သို့မဟုတ် ဝင်ရောက်ပါ။
ဝင်ရောက်ရန် / မှတ်ပုံတင်ရန်အကျဉ်းချုပ်
သင့်ဆုံးဖြတ်ချက်ချရာတွင် အထောက်အကူဖြစ်စေရန် ဤဝန်ဆောင်မှုနှင့်ပတ်သက်သော အဓိကအချက်အလက်များ။ Zinn Hub မှ ထုတ်ပေးသည်၊ ရောင်းသူမှ မဟုတ်ပါ။
တန်ဖိုးနေရာ
ပြောင်းရွှေ့ခြင်းနည်းလမ်း
နည်းပညာ Stack
ဘာတွေ မပျက်စီးဘဲ ရှိနေမလဲ
ပို့ဆောင်ပြီးနောက် ပံ့ပိုးမှု
သင်ရရှိမည့်အရာ
အပြည့်အစုံဖော်ပြချက်
အချို့သော ထုတ်ကုန်များသည် အလုပ်လုပ်ပြီး ငွေရှာနိုင်သော်လည်း ၎င်းတို့၏ front end သည် ပြောင်းလဲရန် ခက်ခဲလာသည်- jQuery သည် template များတစ်လျှောက် ပျံ့နှံ့နေခြင်း၊ လွန်ခဲ့သောနှစ်များက React class components များ၊ သို့မဟုတ် Pages Router တွင် ရှိနေသေးသော Next.js app တစ်ခု။ ပြန်လည်ရေးသားခြင်း အပြည့်အစုံသည် ထုတ်ကုန်ကို လပေါင်းများစွာ ရပ်တန့်စေသည်။ ကျွန်ုပ်သည် အခြားအရာကို လုပ်ဆောင်သည်- ကုဒ်အဟောင်းနှင့် အသစ်သည် ဘေးချင်းကပ်လျက် လုပ်ဆောင်ပြီး စာမျက်နှာများသည် တစ်ကြိမ်လျှင် တစ်ခုချင်းစီ ရွှေ့ပြောင်းသွားသည်၊ ထို့ကြောင့် သင့်အသုံးပြုသူများအတွက် ကြီးမားသော ပြောင်းလဲမှုနေ့ မရှိပါ။
ကျွန်ုပ်သည် NDA အောက်ရှိ ယခင်ပရောဂျက်တစ်ခုတွင် ဤအရာကို အတိအကျ လုပ်ဆောင်ခဲ့သည်- ထုတ်ကုန် တိုက်ရိုက်ထုတ်လွှင့်နေစဉ် jQuery front end ကို React စာမျက်နှာတစ်ခုချင်းစီသို့ ရွှေ့ပြောင်းခဲ့သည်။
Starter သည် သင့်အား အစီအစဉ်ကို ပေးသည်- ကျွန်ုပ်သည် front end အဟောင်းကို ဖတ်သည်၊ ၎င်း၏စာမျက်နှာများနှင့် မျှဝေထားသော အစိတ်အပိုင်းများကို မြေပုံဆွဲသည်၊ အန္တရာယ်များကို စာရင်းပြုစုသည်၊ နှင့် ချဉ်းကပ်မှု၏ လုပ်ဆောင်နိုင်သော နမူနာအဖြစ် စာမျက်နှာငယ်တစ်ခုကို ရွှေ့ပြောင်းသည်။ Standard သည် စာမျက်နှာ သို့မဟုတ် မျက်နှာပြင် သုံးခုအထိ ရွှေ့ပြောင်းသည်။ Advanced သည် ရှစ်ခုအထိ ရွှေ့ပြောင်းသည်၊ ၎င်းတို့လိုအပ်သော မျှဝေထားသော အစိတ်အပိုင်းများကို တည်ဆောက်သည်၊ နှင့် ၎င်းတို့၏ဒေတာအတွက် TypeScript အမျိုးအစားများနှင့် အဓိကစီးဆင်းမှုများအတွက် စမ်းသပ်မှုများဖြင့် ၎င်းတို့ကို ဖုံးအုပ်ထားသည်။
ဘာတွေ ကျန်ရှိနေမလဲ- သင်၏ backend၊ သင်၏ URL များနှင့် အသုံးပြုသူများ သိရှိသော အပြုအမူ။ ဘာတွေ ပြောင်းလဲမလဲ- ကုဒ်ကို မည်သို့ စီစဉ်ထားသည်၊ ထို့ကြောင့် နောက်ထပ် feature ကို တစ်ကြိမ်၊ တစ်နေရာတည်းတွင် ရေးသားသည်။ ပေးပို့ပြီး 14 ရက်အကြာတွင် ကျွန်ုပ်တို့ သဘောတူထားသည့်အတိုင်း အလုပ်မလုပ်သော မည်သည့်အရာကိုမဆို အခမဲ့ ပြင်ဆင်ပေးပါသည်။
စာမျက်နှာအစီအစဉ်နှင့် အစီအစဉ်ကို ခေါ်ဆိုမှုများမရှိဘဲ အစီအစဉ် chat တွင် သဘောတူညီသည်။ ရွှေ့ပြောင်းထားသော စာမျက်နှာတစ်ခုစီသည် ၎င်း၏ကိုယ်ပိုင်ပေါ်တွင် ပို့ဆောင်ပြီး သင်သည် အလုပ်လုပ်ရက်တိုင်း ရေးသားထားသော အခြေအနေမှတ်စုကို ရရှိသည်။
သင်၏ပရောဂျက်ကို အပြီးသတ်ရန် အဆင့်များ
1. ရှေးဟောင်း front end ကို မြေပုံဆွဲပါ - ကျွန်ုပ်သည် ပုံစံများ၊ script များနှင့် အစိတ်အပိုင်းများကို ဖြတ်၍ စာမျက်နှာများ၊ မျှဝေထားသော အစိတ်အပိုင်းများနှင့် ကမ္ဘာလုံးဆိုင်ရာ အခြေအနေ သို့မဟုတ် inline script များကဲ့သို့ အန္တရာယ်ရှိသော မည်သည့်အရာကိုမဆို စာရင်းပြုစုပါသည်။
2. အစီအစဉ်ကို သဘောတူပါ - သင်သည် စာဖြင့်ရေးသားထားသော အစီအစဉ်ကို ရရှိပါမည်- မည်သည့်စာမျက်နှာက ပထမဆုံးသွားမည်၊ မည်သည့်အရာက ၎င်းနှင့်အတူ ရွေ့လျားမည်၊ နှင့် ရှေးဟောင်းနှင့် အသစ်သော ကုဒ်နှစ်ခုလုံး တည်ရှိနေချိန်တွင် ထုတ်ကုန်ကို မည်သို့မျှဝေမည်နည်း။
3. တံတား - အသစ်သော React သို့မဟုတ် Next.js ကုဒ်ကို ရှေးဟောင်းကုဒ်ဘေးတွင် ထည့်သွင်းထားပြီး၊ စာမျက်နှာတစ်ခုစီကို မည်သည့်ဘက်က ပိုင်ဆိုင်သည်ဖြစ်စေ ထိုဘက်သို့ ပို့ဆောင်ပေးသည့် routing ဖြင့်ဖြစ်သည်။
4. စာမျက်နှာများကို တစ်ခုချင်းစီ ရွှေ့ပါ - စာမျက်နှာတစ်ခုစီကို ပြန်လည်တည်ဆောက်ပြီး၊ ရှေးဟောင်းဗားရှင်းနှင့် နှိုင်းယှဉ်ကာ ၎င်း၏ကိုယ်ပိုင်ပေါ်တွင် ပြောင်းလဲလိုက်သည်၊ ထို့ကြောင့် ပြဿနာတစ်ခုသည် ထုတ်ကုန်တစ်ခုလုံးကို မထိခိုက်စေဘဲ စာမျက်နှာတစ်ခုကိုသာ ထိခိုက်စေပါသည်။
5. လွှဲပြောင်းပေးခြင်း - ပြောင်းရွှေ့ထားသော စာမျက်နှာများ၊ ကျန်ရှိနေသေးသောအရာများအတွက် အပ်ဒိတ်လုပ်ထားသော အစီအစဉ်နှင့် နောက်စာမျက်နှာများအတွက် လိုက်နာရမည့် ပုံစံများအကြောင်း အတိုချုပ်မှတ်စုတစ်ခု။
Zinner အရည်အသွေး အာမခံချက်
တစ်ခုချင်းစီ Zinner သည် ပလက်ဖောင်းသို့ ပေါင်းစည်းမီ သုံးသပ်ခြင်းနှင့် အတည်ပြုခြင်းခံရသည်။
အားလုံးသော ဝန်ဆောင်မှုများသည် ကျွန်ုပ်တို့၏ အရည်အသွေး အာမခံ ကတိဖြင့် ကျောင်းဆောင်ထားသည်။
သင်၏ ငွေပေးချေမှုသည် သင် ပို့ဆောင်ထားသော အလုပ်ကို အတည်ပြုသည်အထိ ကာကွယ်ထားသည်။
ပက်ကေ့ချ်များ နှိုင်းယှဉ်ကြည့်ပါ
| လုပ်ဆောင်ချက် | စတင်သူ | စံ | အဆင့်မြင့် |
|---|---|---|---|
| ပေးပို့ချိန် | 4 ရက် | 10 ရက် | 21 ရက် |
| ပြန်လည်ပြင်ဆင်မှုများ | 1 | 2 | 3 |
| အတိုင်းအတာ | အစီအစဉ်နှင့် နမူနာစာမျက်နှာတစ်ခု | 3 စာမျက်နှာများအထိ ရွှေ့ပြီးပါပြီ။ | 8 စာမျက်နှာများ၊ အစိတ်အပိုင်းများ၊ စမ်းသပ်မှုများအထိ |
| ရေးသားထားသော ပြောင်းရွှေ့ခြင်းအစီအစဉ် | ✓ | ✓ | ✓ |
| ရင်းမြစ်ကုဒ် | ✓ | ✓ | ✓ |
အစုစု
ဤ Zinn နှင့် သက်ဆိုင်သည့် ရောင်းချသူ၏ လုပ်ငန်းဆောင်ရွက်မှု ဥပမာများ
Formline: Stripe ပါသော Next.js စတိုး
သင်နှိပ်နိုင်သော စတိုးဆိုင်တစ်ခု- 4 စုဆောင်းမှုများတွင် 16 ပိုစတာများ၊ URL တွင်ရှိနေသော စစ်ထုတ်မှုများနှင့် ရှာဖွေမှုများ၊ တွန်းလှည်းတစ်ခု၊ အလင်းနှင့် အမှောင် အပြင်အဆင်များ၊ နှင့် သရုပ်ပြမှာယူမှု သို့မဟုတ် စမ်းသပ်မုဒ်တွင် အမှန်တကယ် Stripe Checkout session ဖြင့် အဆုံးသတ်သည့် ငွေရှင်းခြင်း။ ကျွန်ုပ်သည် ၎င်းကို Next.js static export အဖြစ် TypeScript ဖြင့် Tailwind CSS ဖြင့် တည်ဆောက်ခဲ့သည်။ ကတ်ငွေပေးချေမှုများသည် ဆာဗာပေါ်ရှိ တွန်းလှည်းကို ပြန်လည်စျေးနှုန်းသတ်မှတ်ပြီး Stripe ၏ webhook လက်မှတ်ကို အတည်ပြုသည့် Cloudflare Worker မှတစ်ဆင့် သွားပါသည်။
Next.js တွင် နှစ်ဘာသာ ကိုယ်ပိုင်ဆိုက်
အင်္ဂလိပ်နှင့် ရုရှားဘာသာဖြင့် တစ်မျက်နှာတည်းရှိသော ကိုယ်ပိုင်ဆိုက်၊ ဝန်ဆောင်မှုကဏ္ဍနှင့် ကျွန်ုပ်၏ သရုပ်ပြပရောဂျက်များသို့ လင့်ခ်များပါရှိသည်။ ကျွန်ုပ်သည် ၎င်းကို Next.js၊ React နှင့် TypeScript ဖြင့် static export အဖြစ် ဒီဇိုင်းဆွဲပြီး တည်ဆောက်ခဲ့ပြီး၊ သာမန် CSS Modules ဖြင့် ပုံစံထုတ်ထားပြီး UI framework မပါဝင်ပါ။ ၎င်းတွင် အလင်းနှင့် အမှောင် အပြင်အဆင်များပါရှိပြီး ဘာသာစကားတစ်ခုစီအတွက် လူမှုရေးဆိုင်ရာ ကြိုတင်ကြည့်ရှုမှုပုံကို build time တွင် ထုတ်ပေးပါသည်။ GitHub Actions သည် ၎င်းကို Bunny CDN သို့ တည်ဆောက်ပြီး ဖြန့်ကျက်ပြီး၊ ၎င်းသည် လုံခြုံရေးခေါင်းစီးများကို ထည့်သွင်းကာ www နှင့် သာမန် HTTP ကို အဓိက HTTPS လိပ်စာသို့ ပြန်ညွှန်းပေးပါသည်။
ဝန်ဆောင်မှု အသေးစိတ်
မကြေးမုံရဲ့ မေးခွန်းများ
ဘာကြောင့်လဲဆိုတော့ ထုတ်ကုန်က လပေါင်းများစွာ ရပ်တန့်နေမှာဖြစ်ပြီး အန္တရာယ်အားလုံးက ထုတ်ပြန်မယ့်နေ့တစ်ရက်တည်းမှာ ကျရောက်လာမှာဖြစ်လို့ပါ။ စာမျက်နှာတစ်ခုချင်းစီ၊ အဆင့်တိုင်းက သေးငယ်တယ်၊ စမ်းသပ်လို့ရတယ်၊ ပြန်လှည့်ဖို့ လွယ်ကူတယ်။
စာမျက်နှာများသည် ၎င်းတို့၏လိပ်စာများကို ထိန်းသိမ်းထားသည်။ Next.js ဖြင့်၊ စာမျက်နှာအသစ်များသည် browser သို့ အဆင်သင့် HTML အဖြစ် ရောက်ရှိလာပြီး server တွင် သို့မဟုတ် build time တွင် render လုပ်ထားသောကြောင့် search engine များသည် အကြောင်းအရာကို ယခင်ကအတိုင်း မြင်တွေ့ရသည်။ Vite ပါသော React သည် browser တွင် render လုပ်သောကြောင့် search traffic ကို ဆောင်ယူသော စာမျက်နှာများအတွက် Next.js ကို အကြံပြုပါသည်။
ဟုတ်ကဲ့။ ပြောင်းရွှေ့ထားသော စာမျက်နှာများကို TypeScript ဖြင့် ရေးသားထားပြီး၊ ၎င်း၏အလှည့်မရောက်မချင်း ရှေးဟောင်းကုဒ်သည် JavaScript အဖြစ် ဆက်လက်လည်ပတ်နေပါသည်။
မဟုတ်ပါ။ ပြောင်းရွှေ့ခြင်းသည် front end ကိုသာ ထိခိုက်စေပါသည်။ သင်၏ backend တွင် စာမျက်နှာတစ်ခုလိုအပ်သော ဒေတာအတွက် endpoints များရှိပြီးသားဖြစ်ပါက၊ စာမျက်နှာအသစ်သည် ၎င်းတို့ကို အသုံးပြုပါသည်။ ထိုဒေတာသည် ယနေ့ PHP မှ render လုပ်ထားသော HTML အဖြစ်သာ တည်ရှိနေပါက၊ အစီအစဉ်တွင် စာမျက်နှာလိုအပ်သော သေးငယ်သော JSON endpoints များကို စာရင်းပြုစုထားပြီး၊ ထိုစာမျက်နှာမရွှေ့မီ မည်သူက ၎င်းတို့ကို ထည့်သွင်းမည်ကို ကျွန်ုပ်တို့ သဘောတူပါသည်။
ဖောက်သည်များ၏ သုံးသပ်ချက်များ
ကျွန်ုပ်တို့၏ ဖောက်သည်များက Zinn အကြောင်း ဘာတွေ ပြောတွေ့ကြည့်ပါ
အမျိုးအစားများ
Zinner မူဝါဒများ
ဆက်စပ်သော Zinns
Bubble သို့မဟုတ် WeWeb တွင် သင်၏ ADHD ထုတ်လုပ်မှု MVP ကို ကျွန်ုပ်တည်ဆောက်ပေးပါမည်။
React, Next.js, Firebase & AI ပေါင်းစပ်မှုတို့ဖြင့် full stack ဝဘ်အက်ပလီကေးရှင်းများကို တီထွင်ပါ
