M

MLOG

Lietuvių

Tyrinėkite Next.js statinį eksportavimą kliento pusės aplikacijoms. Sužinokite privalumus, apribojimus ir technikas, kaip sukurti greitas ir saugias svetaines.

Next.js statinis eksportavimas: tik kliento pusės aplikacijų kūrimas

Next.js yra galinga React karkaso sistema, leidžianti programuotojams kurti našias, išplečiamas ir SEO draugiškas interneto aplikacijas. Nors Next.js yra žinomas dėl savo serverio pusės generavimo (SSR) ir statinių svetainių generavimo (SSG) galimybių, jis taip pat suteikia lankstumo kurti tik kliento pusės aplikacijas naudojant statinį eksportavimą. Šis metodas leidžia jums pasinaudoti Next.js įrankių ir struktūros privalumais, diegiant grynai kliento pusės aplikaciją. Šis įrašas padės jums suprasti viską, ką reikia žinoti apie tik kliento pusės aplikacijų kūrimą su Next.js statiniu eksportavimu, aptariant privalumus, apribojimus, diegimo procesą ir pažangias technikas.

Kas yra Next.js statinis eksportavimas?

Statinis eksportavimas Next.js sistemoje reiškia procesą, kurio metu sukuriama visiškai statinė jūsų aplikacijos versija kompiliavimo metu. Tai reiškia, kad visi HTML, CSS ir JavaScript failai yra iš anksto sugeneruoti ir paruošti tiesiogiai pateikti iš statinių failų serverio (pvz., Netlify, Vercel, AWS S3 ar tradicinio interneto serverio). Skirtingai nuo serverio generuojamų aplikacijų, nereikalingas Node.js serveris gaunamoms užklausoms apdoroti. Vietoj to, visa aplikacija pateikiama kaip statinių išteklių rinkinys.

Kuriant tik kliento pusės aplikaciją, Next.js generuoja šiuos statinius išteklius, darydamas prielaidą, kad visas dinaminis elgesys bus tvarkomas kliento pusės JavaScript. Tai ypač naudinga vieno puslapio aplikacijoms (SPA), kurios daugiausia remiasi kliento pusės maršrutizavimu, API iškvietimais ir vartotojo sąveikomis.

Kodėl verta rinktis statinį eksportavimą kliento pusės aplikacijoms?

Kliento pusės aplikacijų kūrimas su Next.js statiniu eksportavimu suteikia keletą svarių privalumų:

Statinio eksportavimo apribojimai

Nors statinis eksportavimas siūlo daugybę privalumų, svarbu žinoti jo apribojimus:

Next.js paruošimas statiniam eksportavimui

Štai žingsnis po žingsnio vadovas, kaip paruošti Next.js statiniam eksportavimui:

1. Sukurkite naują Next.js projektą

Jei dar neturite Next.js projekto, sukurkite jį naudodami šią komandą:

npx create-next-app my-client-app

Diegimo proceso metu pasirinkite parinktis, kurios geriausiai atitinka jūsų poreikius (pvz., TypeScript, ESLint).

2. Konfigūruokite `next.config.js`

Atidarykite `next.config.js` failą savo projekto šakninėje direktorijoje ir pridėkite šią konfigūraciją:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Pasirinktinai: pakeiskite nuorodas /me -> /me/ ir generuokite /me.html -> /me/index.html
  // žr. https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

Parinktis `output: 'export'` nurodo Next.js generuoti statinį jūsų aplikacijos eksportą. Nustatymas `trailingSlash: true` paprastai yra rekomenduojamas, siekiant užtikrinti nuoseklią URL struktūrą ir išvengti galimų SEO problemų.

3. Atnaujinkite `package.json`

Pakeiskite `scripts` skyrių savo `package.json` faile, kad įtrauktumėte kompiliavimo scenarijų statiniam eksportavimui:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}

Šis scenarijus pirmiausia sukompiliuos jūsų Next.js aplikaciją, o tada eksportuos ją į statinę direktoriją.

4. Įdiekite kliento pusės maršrutizavimą

Kadangi kuriate kliento pusės aplikaciją, turėsite įdiegti kliento pusės maršrutizavimą naudodami `next/router` modulį arba trečiosios šalies biblioteką, tokią kaip `react-router-dom`. Štai pavyzdys naudojant `next/router`:

import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Pradinis puslapis</h1>
      <p>Sveiki atvykę į pradinį puslapį!</p>
      <button onClick={handleClick}>Eiti į „Apie“ puslapį</button>

      <Link href="/about">
         <a>Eiti į „Apie“ puslapį (naudojant „Link“)</a>
      </Link>
    </div>
  );
}

export default HomePage;

Nepamirškite naudoti `Link` komponento iš `next/link` vidinei navigacijai, kad užtikrintumėte sklandžius kliento pusės perėjimus.

5. Tvarkykite duomenų gavimą kliento pusėje

Kliento pusės aplikacijoje visas duomenų gavimas turi būti atliekamas kliento pusėje, naudojant technikas, tokias kaip `useEffect` arba `useState` „hooks“. Pavyzdžiui:

import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP klaida! būsena: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Kraunama...</p>;
  if (error) return <p>Klaida: {error.message}</p>;
  if (!data) return <p>Nėra duomenų, kuriuos būtų galima rodyti</p>;

  return (
    <div>
      <h1>Duomenų puslapis</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. Sukompiliuokite ir eksportuokite savo aplikaciją

Paleiskite kompiliavimo scenarijų, kad sugeneruotumėte statinį eksportą:

npm run build

Tai sukurs `out` (arba `public`, priklausomai nuo Next.js versijos) direktoriją, kurioje bus statiniai HTML, CSS ir JavaScript failai jūsų aplikacijai.

7. Įdiekite savo statinę svetainę

Dabar galite įdiegti `out` direktorijos turinį į statinio talpinimo paslaugų teikėją, pvz., Netlify, Vercel, AWS S3 ar GitHub Pages. Dauguma teikėjų siūlo paprastą „drag-and-drop“ diegimą arba komandinės eilutės įrankius procesui automatizuoti.

Pažangios technikos kliento pusės Next.js aplikacijoms

Štai keletas pažangių technikų, skirtų optimizuoti jūsų kliento pusės Next.js aplikacijas:

1. Kodo padalijimas ir vėlusis įkėlimas (Lazy Loading)

Naudokite dinaminius importus (`import()`), kad padalintumėte savo kodą į mažesnes dalis, kurios įkeliamos pagal poreikį. Tai gali žymiai pagerinti pradinį įkėlimo laiką, ypač didelėms aplikacijoms.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Kraunama...</div>}>
      <MyComponent />
    </Suspense>
  );
}

2. Paveikslėlių optimizavimas

Naudokite `next/image` komponentą paveikslėlių optimizavimui. Šis komponentas automatiškai optimizuoja paveikslėlius skirtingiems įrenginiams ir ekrano dydžiams, gerindamas našumą ir vartotojo patirtį. Jis palaiko vėlųjį įkėlimą, prisitaikančius paveikslėlius ir įvairius paveikslėlių formatus.

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Mano paveikslėlis"
      width={500}
      height={300}
    />
  );
}

3. Service Workers

Įdiekite „service worker“, kad įgalintumėte funkcionalumą neprisijungus ir pagerintumėte našumą. „Service worker“ yra scenarijus, kuris veikia fone ir gali perimti tinklo užklausas, talpinti išteklius ir siųsti pranešimus. Bibliotekos, tokios kaip `next-pwa`, gali supaprastinti „service worker“ pridėjimo procesą į jūsų Next.js aplikaciją.

4. Aplinkos kintamieji

Naudokite aplinkos kintamuosius, kad konfigūruotumėte savo aplikaciją skirtingoms aplinkoms (pvz., kūrimo, testavimo, produkcijos). Next.js teikia integruotą aplinkos kintamųjų palaikymą per `.env` failą ir `process.env` objektą. Būkite atsargūs ir neatskleiskite slaptos informacijos kliento pusės kode. Aplinkos kintamuosius naudokite pirmiausia konfigūracijos nustatymams, kuriuos saugu atskleisti.

5. Stebėsena ir analitika

Integruokite stebėsenos ir analitikos paslaugą (pvz., Google Analytics, Sentry ar New Relic), kad galėtumėte stebėti našumo metrikas, identifikuoti klaidas ir gauti įžvalgų apie vartotojų elgseną. Tai padės jums optimizuoti aplikaciją ir laikui bėgant pagerinti vartotojo patirtį.

6. SEO optimizavimas kliento pusės aplikacijose

Nors statinis eksportavimas suteikia pradinę HTML struktūrą, apsvarstykite šias strategijas geresniam SEO kliento pusės aplikacijose:

Tarptautinimo (i18n) aspektai

Kuriant kliento pusės aplikaciją pasaulinei auditorijai, tarptautinimas (i18n) yra labai svarbus. Štai keletas geriausių praktikų:

Tinkamo požiūrio pasirinkimas: statinis eksportavimas prieš serverio pusės generavimą

Sprendimas, ar naudoti statinį eksportavimą, ar serverio pusės generavimą, priklauso nuo konkrečių jūsų aplikacijos reikalavimų. Apsvarstykite šiuos veiksnius:

Realūs pavyzdžiai

Štai keletas realių pavyzdžių aplikacijų, kurios gali pasinaudoti Next.js statiniu eksportavimu:

Pavyzdys: Tarptautinės įmonės svetainė

Įsivaizduokite įmonę, turinčią biurus Niujorke, Londone ir Tokijuje. Jie nori svetainės, prieinamos anglų, prancūzų ir japonų kalbomis. Next.js statinis eksportavimas, kartu su „headless“ TVS ir i18n bibliotekomis, galėtų būti idealus sprendimas. TVS saugotų išverstą turinį, Next.js jį gautų ir generuotų kliento pusėje, o statinė svetainė galėtų būti įdiegta visame pasaulyje CDN tinkle greitai prieigai.

Išvada

Next.js statinis eksportavimas suteikia galingą būdą kurti tik kliento pusės aplikacijas, pasinaudojant Next.js karkaso privalumais. Suprasdami privalumus, apribojimus, diegimo procesą ir pažangias technikas, galite sukurti greitas, saugias ir visame pasaulyje prieinamas interneto patirtis, atitinkančias jūsų specifinius reikalavimus. Nesvarbu, ar kuriate paprastą nukreipimo puslapį, ar sudėtingą SPA, statinis eksportavimas gali būti vertingas įrankis jūsų interneto programavimo arsenale.