M

MLOG

हिन्दी

मजबूत, स्केलेबल और वैश्विक रूप से जागरूक एप्लिकेशन बनाने के लिए Next.js लेआउट्स का लाभ उठाना सीखें। साझा यूआई कंपोनेंट्स के लिए सर्वोत्तम प्रथाओं की खोज करें।

Next.js लेआउट्स: वैश्विक अनुप्रयोगों के लिए साझा यूआई कंपोनेंट पैटर्न में महारत हासिल करना

Next.js आधुनिक वेब डेवलपमेंट का एक आधार बन गया है, जो प्रदर्शनकारी और उपयोगकर्ता-अनुकूल एप्लिकेशन बनाने की क्षमता के लिए प्रसिद्ध है। इस क्षमता के केंद्र में यूआई कंपोनेंट्स का प्रभावी प्रबंधन है, और इसके मूल में Next.js लेआउट्स की शक्ति निहित है। यह व्यापक गाइड मजबूत, स्केलेबल और वैश्विक रूप से जागरूक एप्लिकेशन बनाने के लिए Next.js लेआउट्स का लाभ उठाने की जटिलताओं में गहराई से उतरता है। हम साझा यूआई कंपोनेंट्स बनाने के लिए सर्वोत्तम प्रथाओं का पता लगाएंगे जो कोड पुन: प्रयोज्यता, रखरखाव और दुनिया भर के उपयोगकर्ताओं के लिए एक सहज उपयोगकर्ता अनुभव को बढ़ावा देते हैं।

Next.js में लेआउट के महत्व को समझना

वेब डेवलपमेंट के क्षेत्र में, विशेष रूप से Next.js जैसे फ्रेमवर्क के साथ, लेआउट उस वास्तुशिल्प नींव के रूप में काम करते हैं जिस पर आपके एप्लिकेशन का यूजर इंटरफेस बनाया गया है। वे सुसंगत, पुन: प्रयोज्य यूआई तत्वों के लिए ब्लूप्रिंट हैं जो समग्र उपयोगकर्ता अनुभव को आकार देते हैं। एक अच्छी तरह से संरचित एप्लिकेशन डिजाइन में लेआउट के बारे में सोचने से डेवलपर्स को कोड दोहराव से बचने और रखरखाव को सरल बनाने में मदद मिलती है। संक्षेप में, वे इसके लिए एक ढांचा प्रदान करते हैं:

Next.js लेआउट्स की मुख्य अवधारणाएं और लाभ

1. `_app.js` और `_document.js` फ़ाइलें

Next.js में, दो विशेष फ़ाइलें लेआउट और वैश्विक कॉन्फ़िगरेशन को परिभाषित करने में महत्वपूर्ण भूमिका निभाती हैं: `_app.js` और `_document.js`। उनके उद्देश्य को समझना मौलिक है।

2. लेआउट का उपयोग करने के फायदे

लेआउट का उपयोग करने से कई फायदे मिलते हैं, खासकर जब बड़े, जटिल वेब एप्लिकेशन बनाते हैं:

साझा यूआई कंपोनेंट पैटर्न को लागू करना

1. एक बेसिक लेआउट कंपोनेंट बनाना

आइए एक सरल लेआउट कंपोनेंट बनाते हैं। इस कंपोनेंट में एक हेडर, मुख्य सामग्री क्षेत्र और एक फुटर शामिल होगा। इसे कई पेजों पर साझा करने के लिए डिज़ाइन किया गया है।

// components/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | मेरा ऐप</title>
        <meta name="description" content="मेरा Next.js ऐप" />
      </Head>
      <header>
        <h1>मेरा ऐप हैडर</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} मेरा ऐप। सर्वाधिकार सुरक्षित।</p>
      </footer>
    </>
  );
}

export default Layout;

इस उदाहरण में, `Layout` कंपोनेंट `children` और `title` को प्रॉप्स के रूप में प्राप्त करता है। `children` उस पेज की सामग्री का प्रतिनिधित्व करता है जो लेआउट के भीतर प्रस्तुत की जाएगी, जबकि `title` एसईओ के लिए पेज का टाइटल टैग सेट करता है।

2. एक पेज में लेआउट कंपोनेंट का उपयोग करना

अब, चलिए इस लेआउट को आपके किसी एक पेज (जैसे, `pages/index.js`) पर लागू करते हैं।

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="होम">
      <h2>होम पेज में आपका स्वागत है</h2>
      <p>यह होम पेज की मुख्य सामग्री है।</p>
    </Layout>
  );
}

export default HomePage;

`pages/index.js` में, हम `Layout` कंपोनेंट को इम्पोर्ट करते हैं और पेज की सामग्री को उसके भीतर रैप करते हैं। हम एक पेज-विशिष्ट `title` भी प्रदान करते हैं। `Layout` कंपोनेंट में `children` प्रॉप `index.js` में `<Layout>` टैग्स के बीच की सामग्री से भर जाएगा।

3. उन्नत लेआउट सुविधाएँ

अंतर्राष्ट्रीय अनुप्रयोगों के लिए वैश्विक विचार

जब एक वैश्विक दर्शक वर्ग के लिए लेआउट बनाते हैं, तो कई अंतर्राष्ट्रीयकरण और वैश्वीकरण (i18n/g11n) पहलुओं पर विचार करना महत्वपूर्ण है। ये प्रथाएं सुनिश्चित करती हैं कि आपका एप्लिकेशन विविध सांस्कृतिक पृष्ठभूमि के व्यक्तियों के लिए सुलभ और उपयोगकर्ता-अनुकूल है।

1. अंतर्राष्ट्रीयकरण (i18n) और स्थानीयकरण (l10n)

2. Next.js लेआउट में i18n लागू करना

Next.js में i18n लागू करने के लिए, आप `next-i18next` जैसी विभिन्न लाइब्रेरियों का उपयोग कर सकते हैं या रूटिंग-आधारित समाधानों के लिए अंतर्निहित `next/router` का उपयोग कर सकते हैं।

यहाँ `_app.js` फ़ाइल का उपयोग करके `next-i18next` के साथ एक सरलीकृत उदाहरण दिया गया है। यह एप्लिकेशन स्तर पर i18n सेट करता है। सुनिश्चित करें कि आपने `npm install i18next react-i18next next-i18next` का उपयोग करके आवश्यक पैकेज स्थापित किए हैं। यह उदाहरण एक सरलीकृत एकीकरण को प्रदर्शित करता है और विशिष्ट आवश्यकताओं के आधार पर समायोजन की आवश्यकता हो सकती है।

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // अपनी वैश्विक शैलियों को आयात करें

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

इस `_app.js` में, `appWithTranslation` एप्लिकेशन को अंतर्राष्ट्रीयकरण संदर्भ प्रदान करता है।

फिर, अपने लेआउट में, `react-i18next` द्वारा प्रदान किए गए `useTranslation` हुक का उपयोग करें:

// components/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // अनुवाद फ़ंक्शन प्राप्त करें

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

इसके बाद आपके पास अपनी अनुवाद फ़ाइलें होंगी, जो आमतौर पर `public/locales/[locale]/[namespace].json` संरचना में संग्रहीत होती हैं। उदाहरण के लिए, `public/locales/en/common.json` में हो सकता है:

{
  "layout": {
    "title": "{{title}} | My App",
    "description": "My Next.js App Description",
    "header": "My App Header",
    "footer": "© {{year}} My App. All rights reserved."
  }
}

और `public/locales/fr/common.json` (फ्रेंच के लिए) में हो सकता है:

{
  "layout": {
    "title": "{{title}} | Mon Application",
    "description": "Description de mon application Next.js",
    "header": "En-tête de mon application",
    "footer": "© {{year}} Mon application. Tous droits réservés."
  }
}

नोट: यह उदाहरण i18n एकीकरण के लिए एक मूलभूत दृष्टिकोण प्रदान करता है और इसे अतिरिक्त कॉन्फ़िगरेशन (जैसे, भाषा का पता लगाना, रूटिंग सेटअप) की आवश्यकता है। व्यापक मार्गदर्शन के लिए `next-i18next` दस्तावेज़ देखें।

3. रिस्पॉन्सिव डिज़ाइन और लेआउट्स

एक वैश्विक दर्शक वर्ग के लिए एक रिस्पॉन्सिव डिज़ाइन महत्वपूर्ण है। आपके लेआउट को विभिन्न स्क्रीन आकारों और उपकरणों के अनुकूल होना चाहिए। सभी उपकरणों पर एक सुसंगत और उपयोगकर्ता-अनुकूल अनुभव सुनिश्चित करने के लिए बूटस्ट्रैप, टेलविंड CSS जैसे CSS फ्रेमवर्क का उपयोग करें या कस्टम मीडिया क्वेरी बनाएं।

4. एक्सेसिबिलिटी संबंधी विचार

अपने एप्लिकेशन को विकलांग लोगों के लिए प्रयोग करने योग्य बनाने के लिए एक्सेसिबिलिटी दिशानिर्देशों (WCAG) का पालन करें। इसमें शामिल हैं:

5. दिनांक और समय स्वरूपण

विभिन्न क्षेत्रों में दिनांक और समय प्रारूपों के लिए अलग-अलग परंपराएं होती हैं। सुनिश्चित करें कि उपयोगकर्ता के लोकेल के आधार पर दिनांक और समय सही ढंग से प्रदर्शित होते हैं। `date-fns` जैसी लाइब्रेरी या जावास्क्रिप्ट में अंतर्निहित `Intl` API इसे संभाल सकती है।

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

6. मुद्रा स्वरूपण

प्रत्येक लोकेल के लिए मौद्रिक मूल्यों को सही प्रारूप में प्रदर्शित करें। `Intl.NumberFormat` API मुद्रा स्वरूपण को संभालने के लिए मूल्यवान है।

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // लोकेल के लिए i18n.language का उपयोग करें
    style: 'currency',
    currency: 'USD', // या उपयोगकर्ता की वरीयताओं के आधार पर गतिशील रूप से मुद्रा निर्धारित करें
  }).format(price);

  return <p>{formattedPrice}</p>
}

7. राइट-टू-लेफ्ट (RTL) भाषाएँ

यदि आपके एप्लिकेशन को अरबी या हिब्रू (RTL भाषाएँ) जैसी भाषाओं का समर्थन करने की आवश्यकता है, तो अपने लेआउट को इसे समायोजित करने के लिए डिज़ाइन करें। `direction: rtl;` जैसी CSS प्रॉपर्टी का उपयोग करने और यूआई तत्वों की स्थिति को समायोजित करने पर विचार करें।

8. कंटेंट डिलीवरी नेटवर्क (CDN) और प्रदर्शन

अपने एप्लिकेशन के स्थिर संपत्तियों (छवियों, CSS, जावास्क्रिप्ट) को अपने उपयोगकर्ताओं के भौगोलिक रूप से करीब सर्वरों से परोसने के लिए CDN का उपयोग करें। यह अंतर्राष्ट्रीय उपयोगकर्ताओं के लिए विलंबता को कम करता है और पेज लोड समय में सुधार करता है। Next.js का अंतर्निहित छवि अनुकूलन और CDN एकीकरण प्रदर्शन में काफी सुधार कर सकता है।

9. वैश्विक बाजारों के लिए एसईओ ऑप्टिमाइज़ेशन

दुनिया भर के उपयोगकर्ताओं को आकर्षित करने के लिए सर्च इंजन ऑप्टिमाइज़ेशन (एसईओ) महत्वपूर्ण है। निम्नलिखित तकनीकों का उपयोग करें:

आपके `Layout` कंपोनेंट के `` में hreflang टैग का उदाहरण:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />  {
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // अधिक भाषा संस्करण
</Head>

उन्नत लेआउट रणनीतियाँ

1. लेआउट के साथ कोड स्प्लिटिंग

Next.js प्रदर्शन में सुधार के लिए स्वचालित रूप से कोड स्प्लिटिंग करता है, लेकिन आप इस व्यवहार को डायनेमिक इम्पोर्ट का उपयोग करके ठीक कर सकते हैं, खासकर अपने लेआउट के भीतर। बड़े कंपोनेंट्स को गतिशील रूप से आयात करके, आप प्रारंभिक जावास्क्रिप्ट बंडल आकार को कम कर सकते हैं, जिससे प्रारंभिक लोड समय तेज हो जाता है।


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- गतिशील रूप से लोड किया गया कंपोनेंट -->
      </main>
      <footer>...</footer>
    </>
  );
}

उदाहरण में, `LargeComponent` गतिशील रूप से लोड होता है। डायनेमिक इम्पोर्ट इस कंपोनेंट के डाउनलोड में तब तक देरी करता है जब तक इसकी वास्तव में आवश्यकता न हो।

2. सर्वर-साइड रेंडरिंग (SSR) के साथ लेआउट्स

Next.js की SSR क्षमताएं आपको सर्वर पर सामग्री को प्री-रेंडर करने की अनुमति देती हैं, जिससे एसईओ और प्रारंभिक लोड समय में सुधार होता है। आप पेज को क्लाइंट को डिलीवर करने से पहले डेटा लाने के लिए अपने लेआउट के भीतर SSR लागू कर सकते हैं। यह विशेष रूप से उस सामग्री के लिए महत्वपूर्ण है जो बार-बार बदलती है या जिसे सर्च इंजन द्वारा अनुक्रमित किया जाना चाहिए।

एक पेज के अंदर `getServerSideProps` का उपयोग करके, आप लेआउट में डेटा पास कर सकते हैं:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

`getServerSideProps` फ़ंक्शन पोस्ट डेटा लाता है। `post` डेटा फिर `Layout` को एक प्रॉप के रूप में पास किया जाता है।

3. स्टैटिक साइट जेनरेशन (SSG) के साथ लेआउट्स

उस सामग्री के लिए जो बार-बार नहीं बदलती है, SSG महत्वपूर्ण प्रदर्शन लाभ प्रदान करता है। यह बिल्ड समय पर पेजों को प्री-रेंडर करता है, जिससे स्थिर HTML फ़ाइलें बनती हैं जो सीधे उपयोगकर्ता को परोसी जाती हैं। SSG का उपयोग करने के लिए, अपने पेज कंपोनेंट्स में `getStaticProps` फ़ंक्शन लागू करें, और डेटा को लेआउट में पास किया जा सकता है।


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'हमारे बारे में', content: 'हमारी कंपनी के बारे में कुछ जानकारी।' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

इस SSG उदाहरण में, `getStaticProps` बिल्ड समय पर डेटा लाता है और फिर इसे `AboutPage` को पास करता है, जिसे फिर `Layout` कंपोनेंट का उपयोग करके रेंडर किया जाता है।

4. नेस्टेड लेआउट्स

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


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>मुख्य हैडर</header>
      <main>{children}</main>
      <footer>मुख्य फुटर</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>अनुभाग नेविगेशन</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>अनुभाग पेज: {page}</h1>
        <p>अनुभाग पेज {page} के लिए सामग्री।</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

इस मामले में, `SectionPage` को `MainLayout` और `SectionLayout` दोनों द्वारा रैप किया गया है ताकि एक नेस्टेड लेआउट संरचना बनाई जा सके।

सर्वोत्तम अभ्यास और अनुकूलन युक्तियाँ

1. कंपोनेंट कंपोजिशन

कंपोनेंट कंपोजिशन का उपयोग करें। अपने लेआउट और यूआई तत्वों को छोटे, पुन: प्रयोज्य कंपोनेंट्स में तोड़ें। यह कोड पठनीयता और रखरखाव को बढ़ाता है।

2. प्रदर्शन की निगरानी

Google Lighthouse या WebPageTest जैसे उपकरणों का उपयोग करके अपने लेआउट और एप्लिकेशन के प्रदर्शन की लगातार निगरानी करें। ये उपकरण आपको प्रदर्शन बाधाओं और अनुकूलन के क्षेत्रों की पहचान करने में मदद कर सकते हैं।

3. कैशिंग रणनीतियाँ

सर्वर लोड को कम करने और प्रतिक्रिया समय में सुधार के लिए कैशिंग रणनीतियों को लागू करें। अक्सर एक्सेस किए गए डेटा को कैश करने, स्थिर संपत्तियों के लिए ब्राउज़र कैशिंग का उपयोग करने और उपयोगकर्ता के करीब सामग्री को कैश करने के लिए कंटेंट डिलीवरी नेटवर्क (CDN) को लागू करने पर विचार करें।

4. लेज़ी लोडिंग

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

5. अत्यधिक री-रेंडर से बचें

अनावश्यक री-रेंडर से बचने के लिए अपने कंपोनेंट्स को अनुकूलित करें। कंपोनेंट्स और फ़ंक्शंस को मेमोइज़ करने के लिए `React.memo`, `useMemo`, और `useCallback` का उपयोग करें। कंपोनेंट्स की सूचियों को रेंडर करते समय `key` प्रॉप का ठीक से उपयोग करें ताकि React परिवर्तनों को कुशलता से पहचान सके।

6. परीक्षण

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

निष्कर्ष

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