Next.js 15 के साथ बहुभाषी कैलकुलेटर प्लेटफॉर्म का निर्माण

नमस्ते, सहकर्मी डेवलपर्स! 👋

यदि आपने कभी एक वेबसाइट बनाने की कोशिश की है जिसे दुनिया भर के उपयोगकर्ताओं के लिए काम करना है, तो आप जानते हैं कि यह कितना चुनौतीपूर्ण हो सकता है। मैंने हाल ही में Free Calculators बनाने की यात्रा शुरू की - एक ऐसा प्लेटफॉर्म जो 12 अलग-अलग भाषाओं में उपयोगकर्ताओं की सेवा करता है, और मैं आपको बताता हूं, यह एक सच्चा रोमांच था!

इस पोस्ट में, मैं इस बहुभाषी कैलकुलेटर प्लेटफॉर्म के निर्माण के पीछे की वास्तविक कहानी साझा करना चाहता हूं। न केवल "यह है जो हमने किया" संस्करण, बल्कि "यह है जो वास्तव में हुआ, क्या गलत हुआ, और हमने क्या सीखा" संस्करण। क्योंकि ईमानदारी से, एक वैश्विक दर्शकों के लिए निर्माण करना पार्क में टहलना नहीं है।

हमने यह क्यों बनाया (और यह क्यों मायने रखता है)

इसकी कल्पना करें: आप एक कैलकुलेटर ऐप बना रहे हैं। काफी सीधा, है ना? लेकिन फिर आपको एहसास होता है कि जापान में कोई इसे जापानी में चाह सकता है, ब्राजील में कोई पुर्तगाली पसंद कर सकता है, और आपके जर्मन उपयोगकर्ता निश्चित रूप से अपने नंबरों को जर्मन तरीके से फॉर्मेट करना चाहते हैं (1,234.56 के बजाय 1.234,56)। अचानक, आपका सरल कैलकुलेटर एक जटिल अंतर्राष्ट्रीय परियोजना बन जाता है।

यही वास्तव में हमारे साथ हुआ। हमने एक बुनियादी कैलकुलेटर के साथ शुरुआत की और अंत में एक ऐसा प्लेटफॉर्म बनाया जो विभिन्न संस्कृतियों, भाषाओं और संख्या प्रारूपों के उपयोगकर्ताओं की सेवा करता है। और जानते हैं क्या? यह मेरे द्वारा काम किए गए सबसे फायदेमंद प्रोजेक्ट्स में से एक बन गया।

टेक स्टैक निर्णय: हमने ये उपकरण क्यों चुने

Next.js 15 क्यों?

ईमानदारी से कहूं तो, जब Next.js 15 पहली बार आया, तो हम थोड़े झिझक रहे थे। आखिरकार, "अगर यह टूटा नहीं है, तो इसे ठीक मत करो," है ना? लेकिन जब हमने नया App Router और React 19 एकीकरण देखा, तो हमने छलांग लगाने का फैसला किया। यह एक बुद्धिमान विकल्प साबित हुआ।

// यह है कि हमने अपना रूटिंग कैसे सेट किया
export const routing = defineRouting({
  locales: [
    'en',
    'zh',
    'ja',
    'ko',
    'fr',
    'de',
    'es',
    'pt',
    'ru',
    'ar',
    'hi',
    'it',
  ],
  defaultLocale: 'en',
  localePrefix: 'as-needed', // इस सेटिंग ने हमें बहुत सारे सिरदर्द से बचाया
  localeDetection: true,
});

React 19: अपग्रेड करने लायक?

छोटा जवाब: बिल्कुल! लंबा जवाब: हमें कुछ संगतता समस्याओं का सामना करना पड़ा, लेकिन नई सुविधाओं के प्रदर्शन सुधार महत्वपूर्ण हैं। विशेष रूप से Suspense और समवर्ती सुविधाओं में सुधार ने हमारे उपयोगकर्ता अनुभव को बहुत बेहतर बनाया।

TypeScript: हमारा मुक्तिदाता

मैं TypeScript के बिना 12 भाषाओं के अनुवाद फ़ाइलों का प्रबंधन नहीं कर सकता। प्रकार सुरक्षा ने हमें रिफैक्टरिंग करते समय आत्मविश्वास दिया, विशेष रूप से जटिल नेस्टेड अनुवाद ऑब्जेक्ट्स से निपटते समय।

// यह है कि हम अपने अनुवाद प्रकारों को कैसे परिभाषित करते हैं
interface TranslationKeys {
  nav: {
    siteName: string;
    home: string;
    calculators: string;
  };
  common: {
    calculate: string;
    clear: string;
    result: string;
  };
}

अंतर्राष्ट्रीयकरण कार्यान्वयन: वास्तविक चुनौतियां और समाधान

चुनौती 1: भाषा पहचान की जटिलता

आप सोच सकते हैं, "भाषा पहचान? आसान!" लेकिन यह नहीं है। उपयोगकर्ता विभिन्न डिवाइसों से एक्सेस कर सकते हैं, VPN का उपयोग कर सकते हैं, या विशिष्ट भाषा प्राथमिकताएं रख सकते हैं। हमने अपने भाषा पहचान तर्क को परिपूर्ण बनाने में बहुत समय बिताया।

// हमारी मिडलवेयर कॉन्फ़िगरेशन
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';

export default createMiddleware(routing);

export const config = {
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
};

चुनौती 2: अनुवाद फ़ाइल प्रबंधन

12 भाषाओं के अनुवाद फ़ाइलों का प्रबंधन करना 12 अलग-अलग प्रोजेक्ट्स का प्रबंधन करने जैसा है। हमने अपनी मदद के लिए कुछ स्वचालन स्क्रिप्ट्स विकसित किए:

// हमारी अनुवाद प्रबंधन स्क्रिप्ट
const addMissingTranslations = async () => {
  const baseTranslations = await loadTranslations('en');
  const allLocales = await getAllLocales();

  for (const locale of allLocales) {
    const existingTranslations = await loadTranslations(locale);
    const missingKeys = findMissingKeys(baseTranslations, existingTranslations);

    if (missingKeys.length > 0) {
      console.log(`Missing keys in ${locale}:`, missingKeys);
      await addMissingKeys(locale, missingKeys);
    }
  }
};

चुनौती 3: संख्या स्वरूपण का जाल

यह सबसे दिलचस्प चुनौतियों में से एक था। क्या आप जानते हैं कि विभिन्न देशों में विभिन्न संख्या प्रारूप हैं? जर्मनी दशमलव विभाजक के रूप में अल्पविराम का उपयोग करता है, अमेरिका अवधि का उपयोग करता है। मुद्रा गणना से निपटते समय हमें कई समस्याओं का सामना करना पड़ा जब तक हमने उचित स्थानीयकृत स्वरूपण लागू नहीं किया।

SEO अनुकूलन: खोज इंजनों को हमसे प्यार करवाना

स्थिर साइट जनरेशन की शक्ति

हमने स्थिर साइट जनरेशन (SSG) का उपयोग करने का फैसला किया, जो हमारे द्वारा लिया गया सबसे अच्छा निर्णय हो सकता है। न केवल पृष्ठ बिजली की तरह तेज़ हैं, बल्कि SEO परिणाम भी उत्कृष्ट हैं।

// प्रत्येक भाषा के लिए स्थिर पृष्ठ उत्पन्न करना
export const dynamic = 'force-static';

export function generateStaticParams() {
  return routing.locales
    .filter(locale => locale !== routing.defaultLocale)
    .map(locale => ({ locale }));
}

मेटाडेटा जनरेशन की कला

प्रत्येक भाषा के लिए सही मेटाडेटा उत्पन्न करने के लिए कुछ कौशल की आवश्यकता होती है। हमने SEO-अनुकूल मेटाडेटा को स्वचालित रूप से उत्पन्न करने के लिए एक सिस्टम विकसित किया:

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Home' });

  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      locale: locale,
    },
  };
}

प्रदर्शन अनुकूलन: उपयोगकर्ता अनुभव को सुचारू बनाना

छवि अनुकूलन का महत्व

हमने छवि लोडिंग को अनुकूलित करने में बहुत समय बिताया। AVIF और WebP प्रारूपों को अपनाने से हमारी पृष्ठ लोडिंग गति 40% बेहतर हुई।

// next.config.ts में छवि कॉन्फ़िगरेशन
images: {
  formats: ['image/avif', 'image/webp'],
  domains: ['freecalculators.app'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
}

कैशिंग रणनीति: हमारा गुप्त हथियार

सही कैशिंग रणनीति को लागू करने के लिए कुछ परीक्षण और त्रुटि की आवश्यकता थी। हम एक स्तरित कैशिंग दृष्टिकोण के साथ समाप्त हुए:

async headers() {
  return [
    // स्थिर संसाधनों के लिए मजबूत कैशिंग
    {
      source: '/(.*).(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=31536000, immutable',
      }],
    },
    // पृष्ठों के लिए बातचीत कैशिंग
    {
      source: '/(.*)',
      headers: [{
        key: 'Cache-Control',
        value: 'public, max-age=0, must-revalidate',
      }],
    },
  ];
}

उपयोगकर्ता अनुभव डिजाइन: सभी को स्वागत महसूस कराना

रेस्पॉन्सिव डिजाइन की चुनौती

यह सुनिश्चित करना कि हमारे कैलकुलेटर सभी डिवाइसों पर पूरी तरह से काम करते हैं एक निरंतर चुनौती है। हमने मोबाइल-फर्स्ट दृष्टिकोण अपनाया:

// मोबाइल-फर्स्ट रेस्पॉन्सिव लेआउट
<div className="flex flex-col md:flex-row gap-4">
  <div className="w-full md:w-1/2">
    {/* कैलकुलेटर इंटरफेस */}
  </div>
  <div className="w-full md:w-1/2">
    {/* परिणाम प्रदर्शन */}
  </div>
</div>

पहुंच: सिर्फ अनुपालन से अधिक

हमने महसूस किया कि पहुंच सिर्फ एक कानूनी आवश्यकता नहीं है - यह सही काम है। हमने हर इंटरैक्टिव तत्व में उचित ARIA लेबल जोड़े:

<button
  aria-label={t('common.calculate')}
  aria-describedby="calculator-help"
  className="bg-blue-600 text-white px-4 py-2 rounded"
>
  {t('common.calculate')}
</button>

डेवलपमेंट टूलचेन: डेवलपमेंट को अधिक कुशल बनाना

त्रुटि निगरानी: हमारा सुरक्षा जाल

हमने त्रुटि निगरानी के लिए Sentry को एकीकृत किया, जिसने हमें कई समस्याओं को खोजने में मदद की जिनकी हमने कभी अपेक्षा नहीं की थी:

export default withSentryConfig(withNextIntl(nextConfig), {
  org: 'my-projects-pd',
  project: 'free-calculators',
  widenClientFileUpload: true,
  disableLogger: true,
  automaticVercelMonitors: true,
});

स्वचालित अनुवाद प्रबंधन

हमने अनुवाद फ़ाइलों का प्रबंधन करने के लिए कुछ स्क्रिप्ट्स विकसित किए, और ये स्क्रिप्ट्स अब हमारे वर्कफ़्लो का एक अभिन्न अंग हैं।

जो सबक हमने सीखे

1. शुरुआत से अंतर्राष्ट्रीयकरण के बारे में सोचें

यदि आपको लगता है कि आपको बहुभाषी समर्थन की आवश्यकता हो सकती है, तो इसे शुरुआत से डिज़ाइन करें। बाद में अंतर्राष्ट्रीयकरण जोड़ना शुरुआत से डिज़ाइन करने की तुलना में बहुत कठिन है।

2. तकनीकी दिखावे से अधिक उपयोगकर्ता अनुभव

हमने प्रदर्शन को अनुकूलित करने में बहुत समय बिताया, लेकिन अंततः उपयोगकर्ता इस बात की परवाह करते हैं कि इंटरफेस सहज है और गणना सटीक है।

3. स्वचालन मुख्य है

12 भाषाओं के लिए अनुवादों का मैन्युअल रूप से प्रबंधन करना अवास्तविक है। स्वचालन स्क्रिप्ट्स हमारे प्रोजेक्ट की जीवन रेखा हैं।

4. परीक्षण, परीक्षण, और फिर से परीक्षण

विभिन्न भाषाओं में विभिन्न पाठ लंबाई, विभिन्न संख्या प्रारूप, और विभिन्न सांस्कृतिक अपेक्षाएं होती हैं। व्यापक परीक्षण आवश्यक है।

भविष्य की योजनाएं

हम अधिक भाषाएं जोड़ने, अपनी अनुवाद प्रबंधन प्रक्रिया में सुधार करने, और AI-सहायता प्राप्त अनुवाद की संभावनाओं का पता लगाने पर विचार कर रहे हैं। लेकिन सबसे महत्वपूर्ण, हम उपयोगकर्ताओं को सबसे अच्छा कैलकुलेटर अनुभव प्रदान करना जारी रखना चाहते हैं।

निष्कर्ष

बहुभाषी वेब एप्लिकेशन बनाना एक चुनौती है, लेकिन यह एक बहुत फायदेमंद अनुभव भी है। स्मार्ट तकनीकी विकल्पों और बहुत सारे परीक्षणों के माध्यम से, हमने सफलतापूर्वक एक ऐसा प्लेटफॉर्म बनाया जो वास्तव में वैश्विक उपयोगकर्ताओं की सेवा करता है।

यदि आप बहुभाषी एप्लिकेशन बनाने पर विचार कर रहे हैं, तो मुझे आशा है कि यह लेख आपको कुछ प्रेरणा देगा। याद रखें, हर चुनौती सीखने का अवसर है, और हर गलती सफलता की ओर एक कदम है।

---

प्रोजेक्ट लिंक: https://www.freecalculators.app टेक स्टैक: Next.js 15, React 19, TypeScript, Tailwind CSS, next-intl