M

MLOG

Lietuvių

Išmokite, kaip panaudoti Next.js maketus kuriant patikimas, mastelį keičiančias ir globaliai pritaikytas programas. Atraskite geriausias bendrų UI komponentų praktikas.

Next.js maketai: bendrų vartotojo sąsajos komponentų modelių įsisavinimas globalioms programoms

Next.js tapo šiuolaikinio web kūrimo kertiniu akmeniu, garsėjančiu savo gebėjimu supaprastinti našų ir vartotojui draugiškų programų kūrimą. Šio gebėjimo pagrindas – efektyvus vartotojo sąsajos komponentų valdymas, o jo esmė slypi Next.js maketų (Layouts) galioje. Šis išsamus vadovas gilinasi į Next.js maketų panaudojimo subtilybes kuriant patikimas, mastelį keičiančias ir globaliai pritaikytas programas. Išnagrinėsime geriausias praktikas kuriant bendrus vartotojo sąsajos komponentus, kurie skatina kodo pakartotinį panaudojimą, palaikomumą ir vientisą vartotojo patirtį visame pasaulyje.

Maketų svarbos supratimas Next.js

Web kūrimo srityje, ypač naudojant karkasus kaip Next.js, maketai tarnauja kaip architektūrinis pagrindas, ant kurio statoma jūsų programos vartotojo sąsaja. Jie yra nuoseklių, pakartotinai naudojamų vartotojo sąsajos elementų planas, formuojantis bendrą vartotojo patirtį. Gerai struktūrizuotas programos dizainas, kuriame apgalvoti maketai, leidžia kūrėjams išvengti kodo dubliavimo ir supaprastina palaikymą. Iš esmės, jie suteikia karkasą:

Pagrindinės Next.js maketų sąvokos ir privalumai

1. `_app.js` ir `_document.js` failai

Next.js, du specialūs failai atlieka kritiškai svarbų vaidmenį apibrėžiant maketus ir globalias konfigūracijas: `_app.js` ir `_document.js`. Jų paskirties supratimas yra fundamentalus.

2. Maketų naudojimo privalumai

Maketų naudojimas suteikia daugybę privalumų, ypač kuriant dideles, sudėtingas web programas:

Bendrų vartotojo sąsajos komponentų modelių diegimas

1. Pagrindinio maketo komponento kūrimas

Sukurkime paprastą maketo komponentą. Šis komponentas apims antraštę, pagrindinio turinio sritį ir poraštę. Jis sukurtas taip, kad būtų naudojamas keliuose puslapiuose.

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

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | Mano Programa</title>
        <meta name="description" content="Mano Next.js programa" />
      </Head>
      <header>
        <h1>Mano Programos Antraštė</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} Mano Programa. Visos teisės saugomos.</p>
      </footer>
    </>
  );
}

export default Layout;

Šiame pavyzdyje `Layout` komponentas gauna `children` ir `title` kaip savybes. `children` atspindi puslapio turinį, kuris bus atvaizduojamas maketo viduje, o `title` nustato puslapio pavadinimo žymą SEO tikslais.

2. Maketo komponento naudojimas puslapyje

Dabar pritaikykime šį maketą vienam iš jūsų puslapių (pvz., `pages/index.js`).

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

function HomePage() {
  return (
    <Layout title="Pagrindinis">
      <h2>Sveiki atvykę į pagrindinį puslapį</h2>
      <p>Tai yra pagrindinis pagrindinio puslapio turinys.</p>
    </Layout>
  );
}

export default HomePage;

`pages/index.js` faile importuojame `Layout` komponentą ir apgaubiame juo puslapio turinį. Taip pat pateikiame puslapiui būdingą `title`. `children` savybė `Layout` komponente bus užpildyta turiniu, esančiu tarp `<Layout>` žymų `index.js` faile.

3. Pažangios maketo funkcijos

Globalūs aspektai tarptautinėms programoms

Kuriant maketus globaliai auditorijai, labai svarbu atsižvelgti į kelis internacionalizacijos ir globalizacijos (i18n/g11n) aspektus. Šios praktikos užtikrina, kad jūsų programa būtų prieinama ir patogi naudoti asmenims iš įvairių kultūrinių aplinkų.

1. Internacionalizacija (i18n) ir lokalizacija (l10n)

2. i18n diegimas Next.js maketuose

Norėdami įdiegti i18n Next.js, galite naudoti įvairias bibliotekas, tokias kaip `next-i18next` arba integruotą `next/router` maršrutizavimu pagrįstiems sprendimams.

Štai supaprastintas pavyzdys su `next-i18next`, naudojant `_app.js` failą. Tai nustato i18n programos lygmeniu. Įsitikinkite, kad įdiegėte reikiamus paketus naudodami `npm install i18next react-i18next next-i18next`. Šis pavyzdys demonstruoja supaprastintą integraciją ir gali reikalauti pakeitimų, atsižvelgiant į konkrečius reikalavimus.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Importuokite savo globalius stilius

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

export default appWithTranslation(MyApp);

Šiame `_app.js` faile `appWithTranslation` suteikia internacionalizacijos kontekstą programai.

Tada savo makete naudokite `useTranslation` kabliuką, kurį teikia `react-i18next`:

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

function Layout({ children, title }) {
  const { t } = useTranslation(); // Gaukite vertimo funkciją

  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;

Tada turėtumėte savo vertimų failus, paprastai saugomus `public/locales/[locale]/[namespace].json` struktūroje. Pavyzdžiui, `public/locales/en/common.json` galėtų turėti:

{
  "layout": {
    "title": "{{title}} | Mano Programa",
    "description": "Mano Next.js programos aprašymas",
    "header": "Mano Programos Antraštė",
    "footer": "© {{year}} Mano Programa. Visos teisės saugomos."
  }
}

O `public/locales/fr/common.json` (prancūzų kalbai) galėtų turėti:

{
  "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."
  }
}

Pastaba: Šis pavyzdys pateikia pagrindinį požiūrį į i18n integraciją ir reikalauja papildomos konfigūracijos (pvz., kalbos nustatymo, maršrutizavimo nustatymų). Išsamesnių nurodymų ieškokite `next-i18next` dokumentacijoje.

3. Adaptyvus dizainas ir maketai

Adaptyvus dizainas yra labai svarbus globaliai auditorijai. Jūsų maketas turi prisitaikyti prie įvairių ekrano dydžių ir įrenginių. Naudokite CSS karkasus, tokius kaip Bootstrap, Tailwind CSS, arba kurkite pasirinktines medijos užklausas, kad užtikrintumėte nuoseklią ir vartotojui draugišką patirtį visuose įrenginiuose.

4. Prieinamumo aspektai

Laikykitės prieinamumo gairių (WCAG), kad jūsų programa būtų naudojama žmonėms su negalia. Tai apima:

5. Datos ir laiko formatavimas

Skirtingi regionai turi skirtingas datos ir laiko formatų konvencijas. Užtikrinkite, kad datos ir laikas būtų rodomi teisingai, atsižvelgiant į vartotojo lokalę. Bibliotekos, tokios kaip `date-fns` arba integruota `Intl` API JavaScript, gali tai sutvarkyti.

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. Valiutos formatavimas

Rodykite pinigines vertes teisingu formatu kiekvienai vietovei. `Intl.NumberFormat` API yra vertinga tvarkant valiutos formatavimą.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Naudokite i18n.language localei
    style: 'currency',
    currency: 'USD', // Arba dinamiškai nustatykite valiutą pagal vartotojo nustatymus
  }).format(price);

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

7. Iš dešinės į kairę (RTL) rašomos kalbos

Jei jūsų programa turi palaikyti kalbas, tokias kaip arabų ar hebrajų (RTL kalbos), sukurkite maketą taip, kad jis tai palaikytų. Apsvarstykite galimybę naudoti CSS savybes, tokias kaip `direction: rtl;`, ir koreguoti vartotojo sąsajos elementų pozicijas.

8. Turinio pristatymo tinklai (CDN) ir našumas

Naudokite CDN, kad pateiktumėte savo programos statinius išteklius (paveikslėlius, CSS, JavaScript) iš serverių, geografiškai esančių arčiau jūsų vartotojų. Tai sumažina delsą ir pagerina puslapių įkėlimo laiką tarptautiniams vartotojams. Next.js integruota paveikslėlių optimizacija ir CDN integracija gali žymiai pagerinti našumą.

9. SEO optimizavimas globalioms rinkoms

Paieškos sistemų optimizavimas (SEO) yra labai svarbus norint pritraukti vartotojus visame pasaulyje. Naudokite šias technikas:

`hreflang` žymų pavyzdys jūsų `Layout` komponento `` skiltyje:


<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" />  {/* This should be outside the curly brace */}
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // Daugiau kalbų variantų
</Head>

Pažangios maketų strategijos

1. Kodo skaidymas su maketais

Next.js automatiškai atlieka kodo skaidymą, siekiant pagerinti našumą, tačiau galite tiksliau suderinti šį elgesį naudodami dinaminius importus, ypač savo maketuose. Dinamiškai importuodami didesnius komponentus, galite sumažinti pradinio JavaScript paketo dydį, kas lemia greitesnį pradinį įkėlimo laiką.


import dynamic from 'next/dynamic';

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

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dinamiškai įkeliamas komponentas -->
      </main>
      <footer>...</footer>
    </>
  );
}

Pavyzdyje `LargeComponent` įkeliamas dinamiškai. Dinaminis importavimas atideda šio komponento atsisiuntimą, kol jo iš tikrųjų prireikia.

2. Maketai su serverio pusės atvaizdavimu (SSR)

Next.js SSR galimybės leidžia iš anksto atvaizduoti turinį serveryje, pagerinant SEO ir pradinį įkėlimo laiką. Galite įdiegti SSR savo maketuose, kad gautumėte duomenis prieš puslapį pristatant klientui. Tai ypač svarbu turiniui, kuris dažnai keičiasi arba turėtų būti indeksuojamas paieškos sistemų.

Naudodami `getServerSideProps` puslapyje, galite perduoti duomenis į maketą:


// 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` funkcija gauna įrašo duomenis. Tada `post` duomenys perduodami kaip savybė į `Layout`.

3. Maketai su statinių svetainių generavimu (SSG)

Turiniui, kuris dažnai nesikeičia, SSG suteikia didelių našumo privalumų. Jis iš anksto atvaizduoja puslapius kūrimo metu, generuodamas statinius HTML failus, kurie tiesiogiai pateikiami vartotojui. Norėdami naudoti SSG, įdiekite `getStaticProps` funkciją savo puslapio komponentuose, o duomenis galima perduoti į maketą.


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

export async function getStaticProps() {
  const aboutData = { title: 'Apie mus', content: 'Šiek tiek informacijos apie mūsų įmonę.' };
  return {
    props: {
      aboutData,
    },
  };
}

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

export default AboutPage;

Šiame SSG pavyzdyje `getStaticProps` gauna duomenis kūrimo metu ir tada juos perduoda `AboutPage`, kuris vėliau atvaizduojamas naudojant `Layout` komponentą.

4. Įdėtieji maketai

Sudėtingoms programoms gali prireikti įdėtųjų maketų. Tai reiškia turėti maketus maketuose. Pavyzdžiui, galite turėti pagrindinį programos maketą ir tada naudoti skirtingus maketus konkrečioms svetainės skiltims. Tai leidžia smulkmeniškai kontroliuoti vartotojo sąsają.


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Pagrindinė antraštė</header>
      <main>{children}</main>
      <footer>Pagrindinė poraštė</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Skilties navigacija</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>Skilties puslapis: {page}</h1>
        <p>Turinys skilties puslapiui {page}.</p>
      </SectionLayout>
    </MainLayout>
  );
}

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

export default SectionPage;

Šiuo atveju `SectionPage` yra apgaubtas tiek `MainLayout`, tiek `SectionLayout`, kad būtų sukurta įdėtųjų maketų struktūra.

Geriausios praktikos ir optimizavimo patarimai

1. Komponentų kompozicija

Išnaudokite komponentų kompoziciją. Suskaidykite savo maketus ir vartotojo sąsajos elementus į mažesnius, pakartotinai naudojamus komponentus. Tai pagerina kodo skaitomumą ir palaikomumą.

2. Našumo stebėjimas

Nuolat stebėkite savo maketų ir programos našumą naudodami įrankius, tokius kaip Google Lighthouse ar WebPageTest. Šie įrankiai gali padėti jums nustatyti našumo kliūtis ir optimizavimo sritis.

3. Spartinimo strategijos

Įdiekite spartinimo (caching) strategijas, kad sumažintumėte serverio apkrovą ir pagerintumėte atsako laiką. Apsvarstykite dažnai naudojamų duomenų spartinimą, naršyklės spartinimo naudojimą statiniams ištekliams ir turinio pristatymo tinklo (CDN) įdiegimą, kad spartintumėte turinį arčiau vartotojo.

4. Atidėtasis įkėlimas

Naudokite atidėtąjį įkėlimą (lazy loading) paveikslėliams ir kitiems neesminiams komponentams. Šis metodas atideda išteklių įkėlimą, kol jų prireikia, sumažindamas pradinį puslapio įkėlimo laiką.

5. Venkite perteklinio pervaizdavimo

Optimizuokite savo komponentus, kad išvengtumėte nereikalingo pervaizdavimo (re-renders). Naudokite `React.memo`, `useMemo` ir `useCallback` komponentams ir funkcijoms atmintyje išsaugoti (memoize). Tinkamai naudokite `key` savybę, kai atvaizduojate komponentų sąrašus, kad padėtumėte React efektyviai identifikuoti pakeitimus.

6. Testavimas

Įdiekite išsamų savo maketo komponentų testavimą, įskaitant vienetinius (unit) ir integracinius testus, kad užtikrintumėte, jog jie veikia kaip tikėtasi ir išlaiko nuoseklų elgesį. Testuokite maketus skirtingų dydžių ekranuose ir skirtingose lokalėse.

Išvada

Next.js maketai siūlo galingus ir universalius įrankius išskirtinėms web programoms kurti. Įsisavinę šiame vadove aptartas technikas, galite sukurti gerai struktūrizuotas, palaikomas ir našias vartotojo sąsajas. Nepamirškite taikyti internacionalizacijos ir globalizacijos geriausių praktikų, kad užtikrintumėte, jog jūsų programa rezonuotų su globalia auditorija. Sujungę Next.js galią su apgalvotu požiūriu į maketus, būsite gerai pasirengę kurti šiuolaikiškas, mastelį keičiančias ir visuotinai prieinamas web patirtis.