நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்கள்: உலகளாவிய பயன்பாடுகளுக்கான பகிரப்பட்ட UI கூறு வடிவங்களில் தேர்ச்சி பெறுதல்

நெக்ஸ்ட்.ஜேஎஸ் நவீன வலை மேம்பாட்டின் ஒரு மூலக்கல்லாக மாறியுள்ளது, செயல்திறன் மிக்க மற்றும் பயனர் நட்பு பயன்பாடுகளை உருவாக்கும் திறனுக்காக இது புகழ்பெற்றது. இந்தத் திறனுக்கு மையமானது UI கூறுகளின் திறமையான மேலாண்மை, மற்றும் இதன் மையத்தில் நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்களின் சக்தி உள்ளது. இந்த விரிவான வழிகாட்டி, வலுவான, அளவிடக்கூடிய மற்றும் உலகளவில் அறிந்த பயன்பாடுகளை உருவாக்க நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்களைப் பயன்படுத்துவதன் நுணுக்கங்களை ஆழமாக ஆராய்கிறது. குறியீடு மறுபயன்பாடு, பராமரிப்புத்திறன் மற்றும் உலகெங்கிலும் உள்ள பயனர்களுக்கு ஒரு தடையற்ற பயனர் அனுபவத்தை ஊக்குவிக்கும் பகிரப்பட்ட UI கூறுகளை உருவாக்குவதற்கான சிறந்த நடைமுறைகளை நாங்கள் ஆராய்வோம்.

நெக்ஸ்ட்.ஜேஎஸ்-ல் லேஅவுட்களின் முக்கியத்துவத்தைப் புரிந்துகொள்ளுதல்

வலை மேம்பாட்டுத் துறையில், குறிப்பாக நெக்ஸ்ட்.ஜேஎஸ் போன்ற கட்டமைப்புகளுடன், உங்கள் பயன்பாட்டின் பயனர் இடைமுகம் கட்டமைக்கப்படும் கட்டடக்கலை அடித்தளமாக லேஅவுட்கள் செயல்படுகின்றன. அவை ஒட்டுமொத்த பயனர் அனுபவத்தை வடிவமைக்கும் சீரான, மீண்டும் பயன்படுத்தக்கூடிய UI கூறுகளுக்கான வரைபடமாகும். ஒரு நன்கு கட்டமைக்கப்பட்ட பயன்பாட்டு வடிவமைப்பில் லேஅவுட்களைப் பற்றி சிந்திப்பது, டெவலப்பர்கள் குறியீடு நகலெடுப்பதைத் தவிர்க்கவும், பராமரிப்பை எளிதாக்கவும் அனுமதிக்கிறது. சாராம்சத்தில், அவை பின்வருவனவற்றிற்கான ஒரு கட்டமைப்பை வழங்குகின்றன:

நிலையான பிராண்டிங்: எல்லாப் பக்கங்களிலும் ஒரு ஒருங்கிணைந்த காட்சி அடையாளத்தைப் பராமரித்தல்.
பகிரப்பட்ட வழிசெலுத்தல்: பல பக்கங்களில் தோன்றும் வழிசெலுத்தல் மெனுக்கள், அடிக்குறிப்புகள் மற்றும் பிற நிலையான UI கூறுகளைச் செயல்படுத்துதல் மற்றும் நிர்வகித்தல்.
குறியீடு மறுபயன்பாடு: ஒரே UI தர்க்கத்தை மீண்டும் மீண்டும் எழுதும் தேவையைத் தடுத்தல்.
எஸ்இஓ மேம்படுத்தல்: உங்கள் தளம் முழுவதும் சீரான மெட்டா குறிச்சொற்கள், தலைப்புக் குறிச்சொற்கள் மற்றும் பிற எஸ்இஓ கூறுகளைப் பயன்படுத்துதல், இது தேடுபொறி தரவரிசைகளை மேம்படுத்த உதவுகிறது.
செயல்திறன் மேம்பாடுகள்: நெக்ஸ்ட்.ஜேஎஸ் வழங்கும் சர்வர்-சைட் ரெண்டரிங் (SSR) மற்றும் ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) போன்ற அம்சங்களை உகந்த கூறு உள்ளமைவுகளுடன் பயன்படுத்துதல்.

நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்களின் முக்கியக் கருத்துகள் மற்றும் நன்மைகள்

1. `_app.js` மற்றும் `_document.js` கோப்புகள்

நெக்ஸ்ட்.ஜேஎஸ்-ல், இரண்டு சிறப்புக் கோப்புகள் லேஅவுட்கள் மற்றும் உலகளாவிய உள்ளமைவுகளை வரையறுப்பதில் முக்கியப் பங்கு வகிக்கின்றன: _app.js மற்றும் _document.js. அவற்றின் நோக்கத்தைப் புரிந்துகொள்வது அடிப்படையானது.

_app.js: இது உங்கள் பயன்பாட்டில் உள்ள அனைத்துப் பக்கங்களையும் உள்ளடக்கிய உயர் மட்டக் கூறு ஆகும். நீங்கள் பொதுவாக இந்தக் கோப்பைப் பின்வருவனவற்றிற்குப் பயன்படுத்துகிறீர்கள்:
- உலகளாவிய CSS அல்லது ஸ்டைல்ட் கூறுகளைத் தொடங்குதல்.
- சூழல் வழங்குநர்களைப் பயன்படுத்தி உங்கள் கூறுகளுக்குத் தரவை வழங்குதல்.
- நிலை மேலாண்மைக்காக உங்கள் பயன்பாட்டை Redux அல்லது Zustand போன்ற வழங்குநர்களுடன் மூடுதல்.
- அனைத்துப் பக்கங்களுக்கும் பொருந்தும் ஒரு உலகளாவிய லேஅவுட்டை வரையறுத்தல், அதாவது ஒரு நிலையான தலைப்பு அல்லது அடிக்குறிப்பு.
_document.js: இது ஒரு மேம்பட்ட உள்ளமைவுக் கோப்பு ஆகும், இங்கு HTML ஆவணத்தின் சர்வர்-சைட் ரெண்டரிங்கின் மீது உங்களுக்குக் கட்டுப்பாடு உள்ளது. இந்தக் கோப்பு <html>, <head>, மற்றும் <body> குறிச்சொற்களை மாற்ற உங்களை அனுமதிக்கிறது. இது முதன்மையாக மிகவும் சிக்கலான எஸ்இஓ மற்றும் செயல்திறன் மேம்படுத்தல்களுக்குப் பயன்படுத்தப்படுகிறது. பொதுவாக, நீங்கள் `_document.js`-ஐப் பின்வருவனவற்றிற்குப் பயன்படுத்துகிறீர்கள்:

வெளிப்புற எழுத்துருக்கள், ஸ்கிரிப்டுகள் மற்றும் ஸ்டைல்ஷீட்களைச் சேர்த்தல்.
உங்கள் HTML ஆவணத்திற்கு ஒரு இயல்புநிலை கட்டமைப்பை அமைத்தல்.
சர்வர்-சைட் ரெண்டரிங் செயல்முறையைத் தனிப்பயனாக்குதல்.

2. லேஅவுட்களைப் பயன்படுத்துவதன் நன்மைகள்

லேஅவுட்களைப் பயன்படுத்துவது எண்ணற்ற நன்மைகளை வழங்குகிறது, குறிப்பாக பெரிய, சிக்கலான வலைப் பயன்பாடுகளை உருவாக்கும்போது:

மேம்பட்ட குறியீடு அமைப்பு: UI கூறுகளை மீண்டும் பயன்படுத்தக்கூடிய தொகுதிகளாகப் பிரிப்பதன் மூலம், நீங்கள் குறியீடு வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனை மேம்படுத்துகிறீர்கள்.
எளிதாக்கப்பட்ட பராமரிப்பு: மாற்றங்கள் தேவைப்படும்போது, நீங்கள் லேஅவுட் கூறினை மட்டும் புதுப்பித்தால் போதும், அந்த மாற்றங்கள் முழுப் பயன்பாட்டிலும் பிரதிபலிக்கும்.
மேம்படுத்தப்பட்ட செயல்திறன்: லேஅவுட்கள் உள்ளடக்க விநியோகத்தை மேம்படுத்த முடியும், இது வேகமான பக்கச் சுமை நேரங்கள் மற்றும் மேம்பட்ட பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.
சீரான பயனர் அனுபவம்: ஒரு சீரான லேஅவுட், பயனர்கள் உங்கள் பயன்பாட்டில் செல்லும்போது ஒரு பழக்கமான அனுபவத்தைப் பெறுவதை உறுதி செய்கிறது.
எஸ்இஓ நன்மைகள்: சீரான HTML கட்டமைப்பு மற்றும் மெட்டா குறிச்சொற்கள் (பெரும்பாலும் லேஅவுட்களுக்குள் நிர்வகிக்கப்படுகின்றன) தேடுபொறி தரவரிசைகள் மற்றும் தெரிவுநிலையை மேம்படுத்துகின்றன.

பகிரப்பட்ட UI கூறு வடிவங்களைச் செயல்படுத்துதல்

1. ஒரு அடிப்படை லேஅவுட் கூறினை உருவாக்குதல்

ஒரு எளிய லேஅவுட் கூறினை உருவாக்குவோம். இந்தக் கூறு ஒரு தலைப்பு, முக்கிய உள்ளடக்கப் பகுதி மற்றும் அடிக்குறிப்பைக் கொண்டிருக்கும். இது பல பக்கங்களில் பகிரப்படும் வகையில் வடிவமைக்கப்பட்டுள்ளது.

// கூறுகள்/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | எனது ஆப்</title>
        <meta name="description" content="எனது நெக்ஸ்ட்.ஜேஎஸ் ஆப்" />
      </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`) பயன்படுத்துவோம்.

// பக்கங்கள்/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. மேம்பட்ட லேஅவுட் அம்சங்கள்

டைனமிக் தரவுப் பெறுதல்: உங்கள் லேஅவுட் கூறினுள் தரவைப் பெற நீங்கள் `getServerSideProps` அல்லது `getStaticProps`-ஐப் பயன்படுத்தலாம். இது ஒரு தரவு மூலத்திலிருந்து தலைப்பு அல்லது வழிசெலுத்தலில் தரவைச் செலுத்த உங்களை அனுமதிக்கிறது.
சூழல் வழங்குநர்கள் (Context Providers): லேஅவுட்டில் உள்ள கூறுகள் முழுவதும் நிலை மற்றும் தரவைப் பகிர ரியாக்ட் சூழலைப் பயன்படுத்தவும். தீம்கள், பயனர் அங்கீகாரம் மற்றும் பிற உலகளாவிய பயன்பாட்டு நிலைகளை நிர்வகிப்பதற்கு இது அவசியம்.
நிபந்தனைக்குட்பட்ட ரெண்டரிங்: பயனர் அங்கீகாரம், திரை அளவு அல்லது பிற காரணிகளைப் பொறுத்து வெவ்வேறு UI கூறுகளைக் காண்பிக்க உங்கள் லேஅவுட்டில் நிபந்தனைக்குட்பட்ட ரெண்டரிங்கைச் செயல்படுத்தவும்.
ஸ்டைலிங்: CSS-in-JS (எ.கா., styled-components, Emotion), CSS தொகுதிகள் அல்லது சாதாரண CSS-ஐ நேரடியாக உங்கள் லேஅவுட் கூறினுள் இணைக்கவும்.

சர்வதேச பயன்பாடுகளுக்கான உலகளாவியக் கருத்தாய்வுகள்

உலகளாவியப் பார்வையாளர்களுக்காக லேஅவுட்களை உருவாக்கும்போது, பல சர்வதேசமயமாக்கல் மற்றும் உலகமயமாக்கல் (i18n/g11n) அம்சங்களைக் கருத்தில் கொள்வது மிகவும் முக்கியம். இந்த நடைமுறைகள் உங்கள் பயன்பாடு பல்வேறு கலாச்சாரப் பின்னணியைச் சேர்ந்த நபர்களுக்கு அணுகக்கூடியதாகவும், பயனர் நட்புடையதாகவும் இருப்பதை உறுதி செய்கின்றன.

1. சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n)

i18n (சர்வதேசமயமாக்கல்): உங்கள் பயன்பாட்டை வெவ்வேறு மொழிகள் மற்றும் பிராந்தியங்களுக்கு ஏற்ப மாற்றியமைக்கும் வகையில் வடிவமைக்கவும். இது உரையைச் சுருக்குதல், தேதி மற்றும் எண் வடிவங்களைக் கையாளுதல் மற்றும் வெவ்வேறு குறியீட்டுத் தொகுப்புகளை ஆதரித்தல் ஆகியவற்றை உள்ளடக்கியது.
l10n (உள்ளூர்மயமாக்கல்): மொழிபெயர்ப்பு, நாணய வடிவமைப்பு, தேதி/நேர வடிவங்கள் மற்றும் கலாச்சார விருப்பத்தேர்வுகள் உட்பட, ஒரு குறிப்பிட்ட இடத்திற்கு உங்கள் பயன்பாட்டை மாற்றியமைக்கவும்.

2. நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்களில் i18n-ஐ செயல்படுத்துதல்

நெக்ஸ்ட்.ஜேஎஸ்-ல் i18n-ஐ செயல்படுத்த, நீங்கள் `next-i18next` போன்ற பல்வேறு நூலகங்களைப் பயன்படுத்தலாம் அல்லது ரூட்டிங் அடிப்படையிலான தீர்வுகளுக்கு உள்ளமைக்கப்பட்ட `next/router`-ஐப் பயன்படுத்தலாம்.

இங்கே `next-i18next` உடன் ஒரு `_app.js` கோப்பைப் பயன்படுத்தி ஒரு எளிய எடுத்துக்காட்டு. இது பயன்பாட்டு மட்டத்தில் 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` ஹூக்கைப் பயன்படுத்தவும்:

// கூறுகள்/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}} | எனது ஆப்",
    "description": "எனது நெக்ஸ்ட்.ஜேஎஸ் ஆப் விளக்கம்",
    "header": "எனது ஆப் ஹெடர்",
    "footer": "© {{year}} எனது ஆப். அனைத்து உரிமைகளும் பாதுகாக்கப்பட்டவை."
  }
}

மேலும் `public/locales/fr/common.json` (பிரெஞ்சு மொழிக்கு) இதைக் கொண்டிருக்கலாம்:

{
  "layout": {
    "title": "{{title}} | எனது பயன்பாடு",
    "description": "எனது நெக்ஸ்ட்.ஜேஎஸ் பயன்பாட்டின் விளக்கம்",
    "header": "எனது பயன்பாட்டின் தலைப்பு",
    "footer": "© {{year}} எனது பயன்பாடு. அனைத்து உரிமைகளும் பாதுகாக்கப்பட்டவை."
  }
}

குறிப்பு: இந்த எடுத்துக்காட்டு i18n ஒருங்கிணைப்பிற்கு ஒரு அடிப்படை அணுகுமுறையை வழங்குகிறது மற்றும் கூடுதல் உள்ளமைவு (எ.கா., மொழி கண்டறிதல், ரூட்டிங் அமைப்பு) தேவைப்படுகிறது. விரிவான வழிகாட்டுதலுக்கு `next-i18next` ஆவணங்களைப் பார்க்கவும்.

3. ரெஸ்பான்சிவ் வடிவமைப்பு மற்றும் லேஅவுட்கள்

ஒரு ரெஸ்பான்சிவ் வடிவமைப்பு உலகளாவிய பார்வையாளர்களுக்கு மிகவும் முக்கியமானது. உங்கள் லேஅவுட் பல்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு ஏற்ப மாற்றியமைக்கப்பட வேண்டும். பூட்ஸ்டார்ப், டெயில்விண்ட் CSS போன்ற CSS கட்டமைப்புகளைப் பயன்படுத்தவும் அல்லது அனைத்து சாதனங்களிலும் ஒரு சீரான மற்றும் பயனர் நட்பு அனுபவத்தை உறுதிப்படுத்த தனிப்பயன் மீடியா வினவல்களை உருவாக்கவும்.

4. அணுகல்தன்மைக் கருத்தாய்வுகள்

மாற்றுத்திறனாளிகளுக்கு உங்கள் பயன்பாட்டைப் பயன்படுத்தக்கூடியதாக மாற்ற அணுகல்தன்மை வழிகாட்டுதல்களை (WCAG) கடைப்பிடிக்கவும். இதில் அடங்குவன:

சொற்பொருள் HTML: உங்கள் உள்ளடக்கத்தைத் தர்க்கரீதியாக கட்டமைக்க சொற்பொருள் HTML கூறுகளைப் (<nav>, <article>, <aside>) பயன்படுத்தவும்.
படங்களுக்கான மாற்று உரை: படங்களுக்கு எப்போதும் விளக்கமான `alt` பண்புகளை வழங்கவும்.
விசைப்பலகை வழிசெலுத்தல்: உங்கள் பயன்பாட்டை ஒரு விசைப்பலகை மூலம் மட்டுமே செல்லக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும்.
வண்ண வேறுபாடு: உரைக்கும் பின்னணிக்கும் இடையில் போதுமான வண்ண வேறுபாட்டைப் பராமரிக்கவும்.
ARIA பண்புகள்: தேவைப்படும் இடங்களில் அணுகல்தன்மையை மேம்படுத்த ARIA பண்புகளைப் பயன்படுத்தவும்.

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 பண்புகளைப் பயன்படுத்துவதையும், UI கூறுகளின் நிலையை சரிசெய்வதையும் கருத்தில் கொள்ளுங்கள்.

8. உள்ளடக்க விநியோக நெட்வொர்க்குகள் (CDNs) மற்றும் செயல்திறன்

உங்கள் பயனர்களுக்கு புவியியல் ரீதியாக நெருக்கமான சர்வர்களில் இருந்து உங்கள் பயன்பாட்டின் நிலையான சொத்துக்களை (படங்கள், CSS, ஜாவாஸ்கிரிப்ட்) வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும். இது தாமதத்தைக் குறைக்கிறது மற்றும் சர்வதேச பயனர்களுக்கான பக்கச் சுமை நேரங்களை மேம்படுத்துகிறது. நெக்ஸ்ட்.ஜேஎஸ்-ன் உள்ளமைக்கப்பட்ட பட மேம்படுத்தல் மற்றும் CDN ஒருங்கிணைப்பு செயல்திறனை கணிசமாக மேம்படுத்தும்.

9. உலகளாவிய சந்தைகளுக்கான எஸ்இஓ மேம்படுத்தல்

உலகெங்கிலும் உள்ள பயனர்களை ஈர்க்க தேடுபொறி மேம்படுத்தல் (எஸ்இஓ) மிகவும் முக்கியமானது. பின்வரும் நுட்பங்களைப் பயன்படுத்தவும்:

மொழி-குறிப்பிட்ட URLகள்: உள்ளடக்கத்தின் மொழியைக் குறிக்க உங்கள் URL-களில் மொழி குறியீடுகளைப் (எ.கா., `/en/`, `/fr/`, `/es/`) பயன்படுத்தவும்.
hreflang குறிச்சொற்கள்: உங்கள் HTML `` பிரிவில் `hreflang` குறிச்சொற்களைச் செயல்படுத்தவும். இந்த குறிச்சொற்கள் ஒரு வலைப்பக்கத்தின் மொழி மற்றும் பிராந்திய இலக்கைத் தேடுபொறிகளுக்குத் தெரிவிக்கின்றன. தேடல் முடிவுகளில் உங்கள் உள்ளடக்கத்தின் சரியான பதிப்பு காட்டப்படுவதை உறுதி செய்வதற்கு இது அவசியம்.
மெட்டா விளக்கங்கள் மற்றும் தலைப்புக் குறிச்சொற்கள்: ஒவ்வொரு மொழி மற்றும் பிராந்தியத்திற்கும் உங்கள் மெட்டா விளக்கங்கள் மற்றும் தலைப்புக் குறிச்சொற்களை மேம்படுத்தவும்.
உள்ளடக்கத் தரம்: உங்கள் இலக்கு பார்வையாளர்களுக்குப் பொருத்தமான உயர்தர, அசல் உள்ளடக்கத்தை வழங்கவும்.
வலைத்தள வேகம்: வலைத்தள வேகத்தை மேம்படுத்தவும், ஏனெனில் இது ஒரு முக்கியமான தரவரிசைக் காரணியாகும். நெக்ஸ்ட்.ஜேஎஸ்-ன் செயல்திறன் மேம்படுத்தல்களைப் பயன்படுத்தவும்.

உங்கள் `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. லேஅவுட்களுடன் குறியீடு பிரித்தல்

நெக்ஸ்ட்.ஜேஎஸ் செயல்திறனை மேம்படுத்த தானாகவே குறியீடு பிரித்தலைச் செய்கிறது, ஆனால் நீங்கள் டைனமிக் இறக்குமதிகளைப் பயன்படுத்தி இந்த நடத்தையைச் சரிசெய்யலாம், குறிப்பாக உங்கள் லேஅவுட்களுக்குள். பெரிய கூறுகளை மாறும் வகையில் இறக்குமதி செய்வதன் மூலம், நீங்கள் ஆரம்ப ஜாவாஸ்கிரிப்ட் தொகுப்பு அளவைக் குறைக்கலாம், இது வேகமான ஆரம்ப சுமை நேரங்களுக்கு வழிவகுக்கிறது.


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) உடன் லேஅவுட்கள்

நெக்ஸ்ட்.ஜேஎஸ்-ன் SSR திறன்கள், சர்வரில் உள்ளடக்கத்தை முன்-ரெண்டர் செய்ய உங்களை அனுமதிக்கிறது, இது எஸ்இஓ மற்றும் ஆரம்ப சுமை நேரங்களை மேம்படுத்துகிறது. பக்கம் கிளையண்டிற்கு வழங்கப்படும் முன் தரவைப் பெற உங்கள் லேஅவுட்களுக்குள் SSR-ஐ செயல்படுத்தலாம். அடிக்கடி மாறும் அல்லது தேடுபொறிகளால் குறியிடப்பட வேண்டிய உள்ளடக்கத்திற்கு இது குறிப்பாக முக்கியமானது.

ஒரு பக்கத்திற்குள் `getServerSideProps`-ஐப் பயன்படுத்தி, நீங்கள் லேஅவுட்டிற்குத் தரவை அனுப்பலாம்:


// பக்கங்கள்/பதிவுகள்/[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` செயல்பாட்டைச் செயல்படுத்தவும், மேலும் தரவை லேஅவுட்டிற்கு அனுப்பலாம்.


// பக்கங்கள்/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. உட்பொதிந்த லேஅவுட்கள்

சிக்கலான பயன்பாடுகளுக்கு, உங்களுக்கு உட்பொதிந்த லேஅவுட்கள் தேவைப்படலாம். இதன் பொருள் லேஅவுட்களுக்குள் லேஅவுட்கள் இருப்பது. உதாரணமாக, நீங்கள் ஒரு முக்கிய பயன்பாட்டு லேஅவுட்டைக் கொண்டிருக்கலாம், பின்னர் உங்கள் வலைத்தளத்தின் குறிப்பிட்ட பிரிவுகளுக்கு வெவ்வேறு லேஅவுட்களைப் பயன்படுத்தலாம். இது பயனர் இடைமுகத்தின் மீது நுணுக்கமான கட்டுப்பாட்டை அனுமதிக்கிறது.


// கூறுகள்/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>முதன்மை தலைப்பு</header>
      <main>{children}</main>
      <footer>முதன்மை அடிக்குறிப்பு</footer>
    </>
  );
}

export default MainLayout;


// கூறுகள்/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>பிரிவு வழிசெலுத்தல்</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// பக்கங்கள்/பிரிவு/[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. கூறு கலவை

கூறு கலவையைப் பயன்படுத்தவும். உங்கள் லேஅவுட்கள் மற்றும் UI கூறுகளைச் சிறிய, மீண்டும் பயன்படுத்தக்கூடிய கூறுகளாகப் பிரிக்கவும். இது குறியீடு வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனை மேம்படுத்துகிறது.

2. செயல்திறன் கண்காணிப்பு

கூகுள் லைட்ஹவுஸ் அல்லது WebPageTest போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் லேஅவுட்கள் மற்றும் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும். இந்தக் கருவிகள் செயல்திறன் தடைகள் மற்றும் மேம்படுத்தலுக்கான பகுதிகளை அடையாளம் காண உதவும்.

3. கேச்சிங் உத்திகள்

சர்வர் சுமையைக் குறைக்கவும், மறுமொழி நேரங்களை மேம்படுத்தவும் கேச்சிங் உத்திகளைச் செயல்படுத்தவும். அடிக்கடி அணுகப்படும் தரவைக் கேச் செய்வதையும், நிலையான சொத்துக்களுக்கு உலாவி கேச்சிங்கைப் பயன்படுத்துவதையும், பயனருக்கு நெருக்கமாக உள்ளடக்கத்தைக் கேச் செய்ய ஒரு உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) செயல்படுத்துவதையும் கருத்தில் கொள்ளுங்கள்.

4. சோம்பேறி ஏற்றுதல் (Lazy Loading)

படங்கள் மற்றும் பிற முக்கியமற்ற கூறுகளுக்கு சோம்பேறி ஏற்றுதலைப் பயன்படுத்தவும். இந்த அணுகுமுறை வளங்கள் தேவைப்படும் வரை ஏற்றுவதை தாமதப்படுத்துகிறது, இது ஆரம்ப பக்கச் சுமை நேரத்தைக் குறைக்கிறது.

5. அதிகப்படியான ரீ-ரெண்டர்களைத் தவிர்த்தல்

தேவையற்ற ரீ-ரெண்டர்களைத் தவிர்க்க உங்கள் கூறுகளை மேம்படுத்தவும். கூறுகள் மற்றும் செயல்பாடுகளை நினைவில் கொள்ள `React.memo`, `useMemo`, மற்றும் `useCallback`-ஐப் பயன்படுத்தவும். கூறுகளின் பட்டியல்களை ரெண்டர் செய்யும்போது `key` ப்ராப்பைச் சரியாகப் பயன்படுத்தி, மாற்றங்களை திறமையாக அடையாளம் காண ரியாக்டிற்கு உதவுங்கள்.

6. சோதனை செய்தல்

உங்கள் லேஅவுட் கூறுகளுக்கு யூனிட் சோதனைகள் மற்றும் ஒருங்கிணைப்பு சோதனைகள் உட்பட முழுமையான சோதனைகளைச் செயல்படுத்தவும், அவை எதிர்பார்த்தபடி செயல்படுவதையும், சீரான நடத்தையைப் பராமரிப்பதையும் உறுதிப்படுத்தவும். வெவ்வேறு திரை அளவுகள் மற்றும் இடங்களில் லேஅவுட்களைச் சோதிக்கவும்.

முடிவுரை

நெக்ஸ்ட்.ஜேஎஸ் லேஅவுட்கள் விதிவிலக்கான வலைப் பயன்பாடுகளை உருவாக்க சக்திவாய்ந்த மற்றும் பல்துறை கருவிகளை வழங்குகின்றன. இந்த வழிகாட்டியில் விவாதிக்கப்பட்ட நுட்பங்களில் தேர்ச்சி பெறுவதன் மூலம், நீங்கள் நன்கு கட்டமைக்கப்பட்ட, பராமரிக்கக்கூடிய மற்றும் செயல்திறன் மிக்க UI-களை உருவாக்கலாம். உங்கள் பயன்பாடு உலகளாவிய பார்வையாளர்களுடன் எதிரொலிப்பதை உறுதிசெய்ய சர்வதேசமயமாக்கல் மற்றும் உலகமயமாக்கல் சிறந்த நடைமுறைகளைத் தழுவ நினைவில் கொள்ளுங்கள். நெக்ஸ்ட்.ஜேஎஸ்-ன் சக்தியை லேஅவுட்களுக்கான சிந்தனைமிக்க அணுகுமுறையுடன் இணைப்பதன் மூலம், நீங்கள் நவீன, அளவிடக்கூடிய மற்றும் உலகளவில் அணுகக்கூடிய வலை அனுபவங்களை உருவாக்க நன்கு தயாராக இருப்பீர்கள்.