तपाईंको फ्रन्ट एन्ड अझै jQuery, पुराना क्लास कम्पोनेन्टहरू वा पुरानो Next.js सेटअपमा चल्छ, र प्रत्येक परिवर्तनले सामान्यभन्दा बढी समय लिन्छ। म यसलाई आधुनिक रियाक्ट वा Next.js मा टाइपस्क्रिप्टमा एक पटकमा एक पृष्ठ सार्नेछु, जबकि उत्पादनले काम गरिरहन्छ।
म तपाईंको jQuery वा लिगेसी रियाक्ट फ्रन्ट एन्डलाई आधुनिक रियाक्ट वा Next.js मा, पृष्ठ-पृष्ठ सार्नेछु।
तपाईंको फ्रन्ट एन्डको लागि माइग्रेसन योजना र नमूनाको रूपमा सारिएको एउटा सानो पृष्ठ।
- योजना र एउटा नमूना पृष्ठ
- लिखित माइग्रेसन योजना
- स्रोत कोड
3 पृष्ठहरू सम्म React वा Next.js मा सारियो, पुरानो कोडको छेउमा चलिरहेको।
- सम्म 3 पृष्ठहरू सारियो
- लिखित माइग्रेसन योजना
- स्रोत कोड
8 पृष्ठहरू सम्म, साझा कम्पोनेन्टहरू, TypeScript प्रकारहरू र परीक्षणहरू।
- सम्म 8 पृष्ठहरू, कम्पोनेन्टहरू, परीक्षणहरू
- लिखित माइग्रेसन योजना
- स्रोत कोड
अनुकूलित प्रस्ताव अनुरोध गर्नुहोस्
अनुकूलित प्रस्ताव अनुरोध गर्न लग इन गर्नुहोस्
यो Zinner बाट व्यक्तिगत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्पूर्व-बिक्री प्रश्न सोध्नुहोस्
प्रश्न सोध्न लग इन गर्नुहोस्
प्लेटफर्म स्प्याम कम गर्न, पूर्व-बिक्री सन्देशहरू लग इन गरिएका प्रयोगकर्ताहरूले मात्र पठाउन सक्छन्।
यो Zinner लाई सिधै सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
यो Zinner लाई सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
निजीकृत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्एक नजरमा
तपाईंलाई निर्णय गर्न मद्दत गर्न यस सेवाको बारेमा मुख्य विवरणहरू। Zinn Hub द्वारा उत्पन्न, विक्रेता द्वारा होइन।
मूल्य स्थिति
माइग्रेसन दृष्टिकोण
टेक स्ट्याक
के अक्षुण्ण रहन्छ
वितरण पछिको समर्थन
तपाईंले के प्राप्त गर्नुहुनेछ
पूर्ण विवरण
केही उत्पादनहरूले काम गर्छन् र पैसा कमाउँछन्, तर तिनीहरूको फ्रन्ट एन्ड परिवर्तन गर्न गाह्रो भएको छ: टेम्प्लेटहरूमा फैलिएको jQuery, वर्षौं अघिका React क्लास कम्पोनेन्टहरू, वा Pages Router मा अझै पनि Next.js एप। पूर्ण पुनर्लेखनले उत्पादनलाई महिनौंसम्म स्थिर बनाउँछ। म अर्को काम गर्छु: पुरानो र नयाँ कोड सँगसँगै चल्छन्, र पृष्ठहरू एक-एक गरेर सर्छन्, त्यसैले तपाईंको प्रयोगकर्ताहरूको लागि कहिल्यै ठूलो स्विच-ओभर दिन हुँदैन।
मैले NDA अन्तर्गतको विगतको परियोजनामा यही काम गरें: उत्पादन लाइभ रहँदा jQuery फ्रन्ट एन्ड React पृष्ठ-पृष्ठमा सारियो।
स्टार्टरले तपाईंलाई योजना दिन्छ: म पुरानो फ्रन्ट एन्ड पढ्छु, यसका पृष्ठहरू र साझा टुक्राहरू नक्सा गर्छु, जोखिमहरू सूचीबद्ध गर्छु, र दृष्टिकोणको कार्य नमूनाको रूपमा एउटा सानो पृष्ठ माइग्रेट गर्छु। मानकले तीन पृष्ठ वा स्क्रिनहरू सम्म सार्छ। उन्नतले आठ सम्म सार्छ, तिनीहरूलाई आवश्यक साझा कम्पोनेन्टहरू बनाउँछ, र तिनीहरूलाई तिनीहरूको डेटाको लागि TypeScript प्रकारहरू र मुख्य प्रवाहहरूको लागि परीक्षणहरूले कभर गर्छ।
के रहन्छ: तपाईंको ब्याकएन्ड, तपाईंको URL हरू र प्रयोगकर्ताहरूले थाहा पाएको व्यवहार। के परिवर्तन हुन्छ: कोड कसरी व्यवस्थित गरिएको छ, ताकि अर्को सुविधा एक पटक, एकै ठाउँमा लेखिन्छ। डेलिभरीको 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 सँग बनाएको छु। कार्ड भुक्तानीहरू क्लाउडफ्लेयर वर्कर मार्फत जान्छन् जसले सर्भरमा कार्टको मूल्य पुन: निर्धारण गर्छ र स्ट्राइपको वेबहुक हस्ताक्षर प्रमाणित गर्छ।
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, Next.js, Firebase र AI एकीकरणको साथ पूर्ण स्ट्याक वेब अनुप्रयोगहरू विकास गर्नुहोस्
वेब एप्समा Firebase Supabase Node.js Auth र डाटाबेस एकीकृत गर्नुहोस्
