ඔබගේ front end තවමත් jQuery, පැරණි class components හෝ යල් පැන ගිය Next.js සැකසුමක් මත ක්‍රියාත්මක වන අතර, සෑම වෙනසක්ම අවශ්‍ය ප්‍රමාණයට වඩා වැඩි කාලයක් ගතවේ. මම එය නවීන React හෝ Next.js වෙත TypeScript හි එක් පිටුවක් බැගින් ගෙන යන්නෙමි, නිෂ්පාදනය දිගටම ක්‍රියාත්මක වන අතරතුර.
මම ඔබගේ jQuery හෝ පැරණි React front end එක නවීන React හෝ Next.js වෙත පිටුවෙන් පිටුවට ගෙන යන්නෙමි.
ඔබගේ front end සඳහා සංක්‍රමණ සැලැස්මක් සහ නියැදියක් ලෙස ගෙන ගිය එක් කුඩා පිටුවක්.
- සැලැස්ම සහ එක් නියැදි පිටුවක්
- ලිඛිත සංක්‍රමණ සැලැස්ම
- මූලාශ්‍ර කේතය
පැරණි කේතය සමඟින් ක්‍රියාත්මක වන, React හෝ Next.js වෙත ගෙන ගිය පිටු 3 දක්වා.
- පිටු 3 දක්වා ගෙන ගොස් ඇත
- ලිඛිත සංක්‍රමණ සැලැස්ම
- මූලාශ්‍ර කේතය
පිටු 8 දක්වා, බෙදාගත් සංරචක, TypeScript වර්ග සහ පරීක්ෂණ.
- පිටු 8 දක්වා, සංරචක, පරීක්ෂණ
- ලිඛිත සංක්‍රමණ සැලැස්ම
- මූලාශ්‍ර කේතය
අභිරුචි දීමනාවක් ඉල්ලන්න
අභිරුචි දීමනාවක් ඉල්ලීමට පිවිසෙන්න
මෙම Zinner වෙතින් පුද්ගලීකරණය කළ දීමනාවක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපෙර-විකුණුම් ප්‍රශ්නයක් අසන්න
ප්‍රශ්නයක් ඇසීමට පිවිසෙන්න
වේදිකා ස්පෑම් අඩු කිරීම සඳහා, පෙර-විකුණුම් පණිවිඩ යැවිය හැක්කේ පිවිසී සිටින පරිශීලකයින්ට පමණි.
මෙම Zinner වෙත සෘජුවම පණිවිඩ යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ පිවිසෙන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
මෙම Zinner වෙත පණිවිඩයක් යැවීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නපිවිසීම අවශ්යයි
පුද්ගලීකරණය කළ පිරිනැමීමක් ඉල්ලීමට නොමිලේ ගිණුමක් සාදන්න හෝ ලොග් වන්න.
පිවිසෙන්න / ලියාපදිංචි වන්නඑක් බැල්මකින්
ඔබට තීරණය කිරීමට උපකාර වන මෙම සේවාව පිළිබඳ ප්‍රධාන විස්තර. Zinn Hub විසින් ජනනය කරන ලදී, විකුණුම්කරු විසින් නොවේ.
අගය පිහිටීම
සංක්‍රමණ ප්‍රවේශය
තාක්ෂණික තොගය
නොනැසී පවතින්නේ කුමක්ද
බෙදාහැරීමෙන් පසු සහාය
ඔබට ලැබෙන දේ
සම්පූර්ණ විස්තරය
සමහර නිෂ්පාදන ක්‍රියාත්මක වන අතර මුදල් උපයයි, නමුත් ඒවායේ front end වෙනස් කිරීමට අපහසු වී ඇත: jQuery සැකිලි හරහා පැතිරී ඇත, වසර ගණනාවකට පෙර සිට React class components, හෝ Pages Router මත තවමත් පවතින Next.js යෙදුමක්. සම්පූර්ණ නැවත ලිවීමක් මාස ගණනාවක් නිෂ්පාදනය කැටි කරයි. මම අනෙක් දේ කරමි: පැරණි සහ නව කේතය එකට ක්‍රියාත්මක වේ, සහ පිටු එකින් එක ගෙන යයි, එබැවින් ඔබේ පරිශීලකයින් සඳහා කිසි විටෙකත් විශාල මාරු කිරීමේ දිනයක් නොමැත.
NDA යටතේ අතීත ව්‍යාපෘතියකදී මම මෙයම කළෙමි: නිෂ්පාදනය සජීවීව පවතින අතරතුර jQuery front end එක පිටුවෙන් පිටුවට React වෙත ගෙන ගියේය.
ආරම්භකයා ඔබට සැලැස්ම ලබා දෙයි: මම පැරණි front end එක කියවමි, එහි පිටු සහ බෙදාගත් කොටස් සිතියම්ගත කරමි, අවදානම් ලැයිස්තුගත කරමි, සහ ප්‍රවේශයේ ක්‍රියාකාරී නියැදියක් ලෙස එක් කුඩා පිටුවක් සංක්‍රමණය කරමි. සම්මතය පිටු හෝ තිර තුනක් දක්වා ගෙන යයි. උසස් අටක් දක්වා ගෙන යයි, ඒවාට අවශ්‍ය බෙදාගත් සංරචක ගොඩනඟයි, සහ ඒවායේ දත්ත සඳහා TypeScript වර්ග සහ ප්‍රධාන ප්‍රවාහ සඳහා පරීක්ෂණ වලින් ඒවා ආවරණය කරයි.
නොනැසී පවතින්නේ කුමක්ද: ඔබේ backend, ඔබේ URLs සහ පරිශීලකයින් දන්නා හැසිරීම. වෙනස් වන්නේ කුමක්ද: කේතය සංවිධානය කර ඇති ආකාරය, එවිට ඊළඟ විශේෂාංගය එක් වරක්, එක් ස්ථානයක ලියා ඇත. බෙදා හැරීමෙන් දින 14ක් සඳහා, අප එකඟ වූ පරිදි ක්‍රියා නොකරන ඕනෑම දෙයක් මම නොමිලේ නිවැරදි කරමි.
පිටු අනුපිළිවෙල සහ සැලැස්ම ඇමතුම් නොමැතිව ඇණවුම් කතාබස් තුළ එකඟ වේ. එක් එක් සංක්‍රමණය කරන ලද පිටුව තනිවම නැව්ගත කරනු ලැබේ, සහ ඔබට සෑම වැඩ කරන දිනකම ලිඛිත තත්ව සටහනක් ලැබේ.
ඔබේ ව්‍යාපෘතිය සම්පූර්ණ කිරීම සඳහා පියවර
1. පැරණි ඉදිරිපස අන්තය සිතියම්ගත කරන්න - මම අච්චු, ස්ක්‍රිප්ට් සහ සංරචක හරහා ගොස් පිටු, බෙදාගත් කොටස් සහ ගෝලීය තත්ත්වය හෝ ඉන්ලයින් ස්ක්‍රිප්ට් වැනි අවදානම් සහිත ඕනෑම දෙයක් ලැයිස්තුගත කරමි.
2. අනුපිළිවෙල එකඟ වන්න - ඔබට ලිඛිත සැලැස්මක් ලැබේ: කුමන පිටුව මුලින්ම යන්නේද, එය සමඟ කුමක් ගමන් කරන්නේද, සහ පැරණි සහ නව කේත දෙකම පවතින අතරතුර නිෂ්පාදනය බෙදා ගන්නේ කෙසේද.
3. පාලම - නව React හෝ Next.js කේතය පැරණි කේතය අසල සකසා ඇත, එක් එක් පිටුව එයට හිමි පැත්තට යවන මාර්ගගත කිරීමක් සමඟ.
4. පිටු එකින් එක ගෙන යන්න - සෑම පිටුවක්ම නැවත ගොඩනඟා, පැරණි අනුවාදය සමඟ සසඳා තනිවම මාරු කරනු ලැබේ, එවිට ගැටලුවක් නිෂ්පාදනයට නොව එක් පිටුවකට බලපායි.
5. භාරදීම - සංක්‍රමණය වූ පිටු, ඉතිරිව ඇති දේ සඳහා යාවත්කාලීන කළ සැලැස්ම, සහ ඊළඟ පිටු සඳහා අනුගමනය කළ යුතු රටා පිළිබඳ කෙටි සටහනක්.
Zinner තත්ත්ව සහතිකය
සෑම Zinner කෙනෙකුම වේදිකාවට සම්බන්ධ වීමට පෙර සමාලෝචනය කර අනුමත කරනු ලැබේ.
සියලුම සේවාවන් අපගේ තත්ත්ව සහතික කිරීමේ කැපවීම මගින් සහාය වේ.
ඔබ භාර දුන් කාර්යය අනුමත කරන තෙක් ඔබේ ගෙවීම ආරක්ෂා කර ඇත.
පැකේජ සසඳන්න
| කාර්යය | ආරම්භක | සම්මත | උසස් |
|---|---|---|---|
| භාරදීමේ වේලාව | 4 දින | 10 දින | 21 දින |
| සංශෝධන | 1 | 2 | 3 |
| විෂය පථය | සැලැස්ම සහ එක් නියැදි පිටුවක් | 3 පිටු දක්වා ගෙන යන ලදී | 8 පිටු, සංරචක, පරීක්ෂණ දක්වා |
| ලිඛිත සංක්‍රමණ සැලැස්ම | ✓ | ✓ | ✓ |
| මූලාශ්‍ර කේතය | ✓ | ✓ | ✓ |
පෝට්ෆෝලියෝ
මෙම Zinn ට අදාළ විකුණුම්කරුගේ වැඩ පිළිබඳ උදාහරණ.
ෆෝම්ලයින්: Stripe සමඟ Next.js වෙළඳසැල
ඔබට ක්ලික් කළ හැකි වෙළඳසැලක්: 16 එකතු කිරීම් වල 4 පෝස්ටර්, URL එකේ රැඳී සිටින පෙරහන් සහ සෙවීම්, කරත්තයක්, සැහැල්ලු සහ අඳුරු තේමා, සහ demo ඇණවුමකින් හෝ පරීක්ෂණ මාදිලියේ සැබෑ Stripe Checkout සැසියකින් අවසන් වන පිටවීමක්. මම එය Next.js ස්ථිතික අපනයනයක් ලෙස TypeScript සමඟ Tailwind CSS භාවිතයෙන් ගොඩනඟා ඇත. කාඩ්පත් ගෙවීම් Cloudflare Worker හරහා සිදු වන අතර එය සේවාදායකයේ කරත්තය නැවත මිල කර Stripe හි webhook අත්සන තහවුරු කරයි.
Next.js හි ද්විභාෂා පුද්ගලික වෙබ් අඩවිය
ඉංග්‍රීසි සහ රුසියානු භාෂාවලින් එක් පිටුවක පුද්ගලික වෙබ් අඩවියක්, සේවා අංශයක් සහ මගේ demo ව්‍යාපෘති වෙත සබැඳි සමඟින්. මම එය 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
