M

MLOG

Eesti

Õppige, kuidas kasutada Next.js Layoutide eeliseid, et luua tugevaid, skaleeritavaid ja globaalselt teadlikke rakendusi. Avastage jagatud UI komponentide parimad praktikad.

Next.js Layoutid: Jagatud UI komponentide mustrite valdamine globaalsete rakenduste jaoks

Next.js on saanud kaasaegse veebiarenduse nurgakiviks, mis on tuntud oma võime poolest sujuvamaks muuta jõudlusele orienteeritud ja kasutajasõbralike rakenduste loomist. Selle võimekuse keskmes on UI komponentide efektiivne haldamine ja selle südames peitub Next.js Layoutide jõud. See põhjalik juhend sukeldub sügavalt Next.js Layoutide võimendamise keerukustesse, et luua tugevaid, skaleeritavaid ja globaalselt teadlikke rakendusi. Uurime jagatud UI komponentide loomise parimaid praktikaid, mis edendavad koodi taaskasutatavust, hooldatavust ja sujuvat kasutajakogemust kasutajatele kogu maailmas.

Layoutide tähtsuse mõistmine Next.js-is

Veebiarenduse valdkonnas, eriti selliste raamistikega nagu Next.js, on layoutid arhitektuuriline vundament, millele teie rakenduse kasutajaliides on ehitatud. Need on järjepidevate, taaskasutatavate UI elementide plaan, mis kujundavad üldist kasutajakogemust. Layoutidele mõtlemine hästi struktureeritud rakenduse disainis võimaldab arendajatel vältida koodi dubleerimist ja lihtsustab hooldust. Põhimõtteliselt pakuvad need raamistiku järgmiseks:

Next.js Layoutide peamised kontseptsioonid ja eelised

1. Failid `_app.js` ja `_document.js`

Next.js-is mängivad kaks spetsiaalset faili paigutuste ja globaalsete konfiguratsioonide määratlemisel kriitilist rolli: `_app.js` ja `_document.js`. Nende eesmärgi mõistmine on fundamentaalne.

2. Layoutide kasutamise eelised

Layoutide kasutamine pakub hulgaliselt eeliseid, eriti suurte ja keerukate veebirakenduste ehitamisel:

Jagatud UI komponentide mustrite juurutamine

1. Põhilise Layout komponendi loomine

Loome lihtsa layout komponendi. See komponent sisaldab päist, peamist sisuala ja jalust. See on mõeldud jagamiseks mitmel lehel.

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

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | My App</title>
        <meta name="description" content="My Next.js App" />
      </Head>
      <header>
        <h1>My App Header</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} My App. All rights reserved.</p>
      </footer>
    </>
  );
}

export default Layout;

Selles näites saab `Layout` komponent rekvisiitidena `children` ja `title`. `children` esindab lehe sisu, mis renderdatakse layoutis, samas kui `title` määrab lehe pealkirjasildi SEO jaoks.

2. Layout komponendi kasutamine lehel

Nüüd rakendame selle layouti ühele teie lehele (nt `pages/index.js`).

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

function HomePage() {
  return (
    <Layout title="Home">
      <h2>Welcome to the Home Page</h2>
      <p>This is the main content of the home page.</p>
    </Layout>
  );
}

export default HomePage;

Failis `pages/index.js` impordime `Layout` komponendi ja pakime lehe sisu selle sisse. Pakume ka lehepõhist `title`. `children` rekvisiit komponendis `Layout` täidetakse sisuga, mis on vahemikus `<Layout>` siltides failis `index.js`.

3. Täiustatud Layout funktsioonid

Globaalsed kaalutlused rahvusvaheliste rakenduste jaoks

Globaalsele publikule layoutide loomisel on oluline arvestada mitmete rahvusvahelistumise ja globaliseerumise (i18n/g11n) aspektidega. Need praktikad tagavad, et teie rakendus on ligipääsetav ja kasutajasõbralik erineva kultuuritaustaga inimestele.

1. Rahvusvahelistumine (i18n) ja lokaliseerimine (l10n)

2. i18n juurutamine Next.js Layoutides

i18n juurutamiseks Next.js-is saate kasutada erinevaid teeke, näiteks `next-i18next` või sisseehitatud `next/router` marsruutimispõhiste lahenduste jaoks.

Siin on lihtsustatud näide `next-i18next` abil, kasutades faili `_app.js`. See seadistab i18n rakenduse tasemel. Veenduge, et olete installinud vajalikud paketid, kasutades `npm install i18next react-i18next next-i18next`. See näide demonstreerib lihtsustatud integratsiooni ja võib vajada kohandusi vastavalt konkreetsetele nõuetele.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Import your global styles

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

export default appWithTranslation(MyApp);

Selles failis `_app.js` pakub `appWithTranslation` rahvusvahelistumise konteksti rakendusele.

Seejärel kasutage oma layoutis `react-i18next` pakutavat hooki `useTranslation`:

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

function Layout({ children, title }) {
  const { t } = useTranslation(); // Get the translate function

  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;

Seejärel on teil tõlkefailid, mis on tavaliselt salvestatud struktuuris `public/locales/[locale]/[namespace].json`. Näiteks võib `public/locales/en/common.json` sisaldada järgmist:

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

Ja `public/locales/fr/common.json` (prantsuse keele jaoks) võib sisaldada järgmist:

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

Märkus: See näide pakub i18n integratsioonile aluselist lähenemisviisi ja vajab täiendavat konfiguratsiooni (nt keeletuvastus, marsruutimise seadistamine). Põhjaliku juhendamise saamiseks vaadake `next-i18next` dokumentatsiooni.

3. Responsivne disain ja layoutid

Responsivne disain on ülemaailmse publiku jaoks kriitilise tähtsusega. Teie layout peab kohanema erinevate ekraanisuuruste ja seadmetega. Kasutage CSS raamistikke nagu Bootstrap, Tailwind CSS või looge kohandatud meediapäringuid, et tagada järjepidev ja kasutajasõbralik kogemus kõigis seadmetes.

4. Ligipääsetavuse kaalutlused

Järgige ligipääsetavuse juhiseid (WCAG), et muuta oma rakendus puuetega inimestele kasutatavaks. See hõlmab järgmist:

5. Kuupäeva ja kellaaja vormindamine

Erinevatel piirkondadel on erinevad kuupäeva ja kellaaja vormingute konventsioonid. Veenduge, et kuupäevad ja kellaajad kuvatakse õigesti, lähtudes kasutaja lokaadist. Teegid nagu `date-fns` või JavaScripti sisseehitatud `Intl` API saavad seda käsitleda.

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. Valuuta vormindamine

Kuvage rahalisi väärtusi iga lokaadi jaoks õiges vormingus. API `Intl.NumberFormat` on valuuta vormindamise käsitlemisel väärtuslik.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Use i18n.language for locale
    style: 'currency',
    currency: 'USD', // Or dynamically determine the currency based on user preferences
  }).format(price);

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

7. Paremalt-vasakule (RTL) keeled

Kui teie rakendus peab toetama keeli nagu araabia või heebrea (RTL keeled), kujundage oma layout selle majutamiseks. Kaaluge CSS omaduste kasutamist nagu `direction: rtl;` ja UI elementide positsioneerimise reguleerimist.

8. Sisu edastusvõrgud (CDN) ja jõudlus

Kasutage CDN-i, et teenindada oma rakenduse staatilisi varasid (pildid, CSS, JavaScript) serveritest, mis on geograafiliselt teie kasutajatele lähemal. See vähendab latentsust ja parandab rahvusvaheliste kasutajate jaoks lehe laadimisaega. Next.js-i sisseehitatud pildi optimeerimine ja CDN-i integratsioon võivad jõudlust oluliselt parandada.

9. SEO optimeerimine globaalsetele turgudele

Otsingumootori optimeerimine (SEO) on ülioluline kasutajate meelitamiseks kogu maailmas. Kasutage järgmisi tehnikaid:

Näide hreflang siltidest teie `Layout` komponendi jaotises ``:


<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" />
  // More language variants
</Head>

Täiustatud layout strateegiad

1. Koodi tükeldamine layoutidega

Next.js teostab automaatselt koodi tükeldamise, et parandada jõudlust, kuid saate seda käitumist dünaamiliste importide abil täpselt häälestada, eriti oma layoutides. Suuremate komponentide dünaamilise importimise abil saate vähendada esialgset JavaScripti paketi suurust, mis toob kaasa kiirema esialgse laadimisaja.

import dynamic from 'next/dynamic';

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

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dynamically loaded component -->
      </main>
      <footer>...</footer>
    </>
  );
}

Näites laaditakse `LargeComponent` dünaamiliselt. Dünaamiline import viivitab selle komponendi allalaadimisega, kuni seda tegelikult vaja on.

2. Layoutid serveripoolse renderdamisega (SSR)

Next.js-i SSR võimalused võimaldavad teil sisu eelrenderdada serveris, parandades SEO-d ja esialgset laadimisaega. Saate juurutada SSR-i oma layoutides, et andmeid enne lehe kliendile edastamist hankida. See on eriti oluline sisu puhul, mis muutub sageli või mida otsingumootorid peaksid indekseerima.

Kasutades lehel `getServerSideProps`, saate layoutile andmeid edastada:

// 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;

Funktsioon `getServerSideProps` hangib postituse andmed. Andmed `post` edastatakse seejärel rekvisiidina layoutile.

3. Layoutid staatilise saidi genereerimisega (SSG)

Sisu jaoks, mis ei muutu sageli, pakub SSG olulisi jõudluse eeliseid. See eelrenderdab lehed ehitamise ajal, genereerides staatilised HTML failid, mida teenindatakse otse kasutajale. SSG kasutamiseks juurutage oma lehe komponentides funktsioon `getStaticProps` ja andmeid saab layoutile edastada.

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

export async function getStaticProps() {
  const aboutData = { title: 'About Us', content: 'Some information about our company.' };
  return {
    props: {
      aboutData,
    },
  };
}

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

export default AboutPage;

Selles SSG näites hangib `getStaticProps` andmeid ehitamise ajal ja edastab need seejärel `AboutPage` lehele, mida seejärel renderdatakse, kasutades komponenti `Layout`.

4. Pesa paigutused

Keerukate rakenduste jaoks võib vaja minna pesa paigutusi. See tähendab, et paigutused on paigutuste sees. Näiteks võib teil olla peamine rakenduse paigutus ja seejärel kasutada oma veebisaidi konkreetsete jaotiste jaoks erinevaid paigutusi. See võimaldab kasutajaliidese peenemat kontrolli.

// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Main Header</header>
      <main>{children}</main>
      <footer>Main Footer</footer>
    </>
  );
}

export default MainLayout;

// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Section Navigation</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>Section Page: {page}</h1>
        <p>Content for section page {page}.</p>
      </SectionLayout>
    </MainLayout>
  );
}

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

export default SectionPage;

Sel juhul on `SectionPage` pakitud nii `MainLayout` kui ka `SectionLayout` abil, et luua pesa paigutuse struktuur.

Parimad praktikad ja optimeerimise näpunäited

1. Komponendi kompositsioon

Kasutage komponendi kompositsiooni. Jaotage oma paigutused ja UI elemendid väiksemateks, taaskasutatavateks komponentideks. See suurendab koodi loetavust ja hooldatavust.

2. Jõudluse jälgimine

Jälgige pidevalt oma paigutuste ja rakenduse jõudlust, kasutades selliseid tööriistu nagu Google Lighthouse või WebPageTest. Need tööriistad aitavad teil tuvastada jõudluse kitsaskohti ja optimeerimisvaldkondi.

3. Vahemällu salvestamise strateegiad

Juurutage vahemällu salvestamise strateegiad, et vähendada serveri koormust ja parandada reageerimisaegu. Kaaluge sageli juurdepääsetavate andmete vahemällu salvestamist, staatiliste varade jaoks brauseri vahemällu salvestamist ja sisu kasutajale lähemale vahemällu salvestamiseks sisu edastusvõrgu (CDN) juurutamist.

4. Laisk laadimine

Kasutage piltide ja muude mittekriitiliste komponentide jaoks laisk laadimist. See lähenemisviis viivitab ressursside laadimisega, kuni neid vaja on, vähendades esialgset lehe laadimisaega.

5. Vältige liigseid ümberrenderdusi

Optimeerige oma komponente, et vältida tarbetuid ümberrenderdusi. Komponentide ja funktsioonide memoiseerimiseks kasutage `React.memo`, `useMemo` ja `useCallback`. Kasutage loendite renderdamisel õigesti rekvisiiti `key`, et aidata Reactil muudatusi tõhusalt tuvastada.

6. Testimine

Juurutage oma paigutuse komponentide põhjalik testimine, sealhulgas ühiku- ja integratsioonitestid, et tagada nende ootuspärane toimimine ja järjepideva käitumise säilitamine. Testige paigutusi erinevatel ekraanisuurustel ja lokaatides.

Kokkuvõte

Next.js Layoutid pakuvad võimsaid ja mitmekülgseid tööriistu erakordsete veebirakenduste ehitamiseks. Valdades selles juhendis käsitletud tehnikaid, saate luua hästi struktureeritud, hooldatavaid ja jõudlusele orienteeritud UI-sid. Ärge unustage järgida rahvusvahelistumise ja globaliseerumise parimaid praktikaid, et tagada, et teie rakendus resoneerib globaalse publikuga. Ühendades Next.js-i jõu läbimõeldud lähenemisega paigutustele, olete hästi varustatud kaasaegsete, skaleeritavate ja universaalselt juurdepääsetavate veebikogemuste loomiseks.