M

MLOG

Latviešu

Uzziniet par Next.js statisko eksportu, lai izveidotu ātras un drošas klienta puses lietojumprogrammas. Izpētiet priekšrocības, iestatīšanu un metodes.

Next.js statiskais eksports: tikai klienta puses lietojumprogrammu izveide

Next.js ir jaudīgs React ietvars, kas ļauj izstrādātājiem veidot veiktspējīgas, mērogojamas un SEO draudzīgas tīmekļa lietojumprogrammas. Lai gan Next.js ir slavens ar savām servera puses renderēšanas (SSR) un statisko vietņu ģenerēšanas (SSG) iespējām, tas piedāvā arī elastību, lai izveidotu tikai klienta puses lietojumprogrammas, izmantojot statisko eksportu. Šī pieeja ļauj jums izmantot Next.js rīku un struktūras priekšrocības, vienlaikus izvietojot tīri klienta puses lietojumprogrammu. Šis raksts jūs iepazīstinās ar visu, kas jums jāzina par tikai klienta puses lietojumprogrammu veidošanu ar Next.js statisko eksportu, aptverot priekšrocības, ierobežojumus, iestatīšanas procesu un progresīvas metodes.

Kas ir Next.js statiskais eksports?

Statiskais eksports Next.js attiecas uz procesu, kurā izveides procesa laikā tiek ģenerēta pilnībā statiska jūsu lietojumprogrammas versija. Tas nozīmē, ka visi HTML, CSS un JavaScript faili ir iepriekš renderēti un gatavi tikt pasniegti tieši no statisko failu servera (piemēram, Netlify, Vercel, AWS S3 vai tradicionāla tīmekļa servera). Atšķirībā no servera puses renderētām lietojumprogrammām, nav nepieciešams Node.js serveris, lai apstrādātu ienākošos pieprasījumus. Tā vietā visa lietojumprogramma tiek piegādāta kā statisku resursu kolekcija.

Mērķējot uz tikai klienta puses lietojumprogrammu, Next.js ģenerē šos statiskos resursus ar pieņēmumu, ka visa dinamiskā uzvedība tiks apstrādāta ar klienta puses JavaScript. Tas ir īpaši noderīgi vienas lapas lietojumprogrammām (SPA), kas galvenokārt paļaujas uz klienta puses maršrutēšanu, API izsaukumiem un lietotāja mijiedarbību.

Kāpēc izvēlēties statisko eksportu klienta puses lietojumprogrammām?

Klienta puses lietojumprogrammu veidošana ar Next.js statisko eksportu piedāvā vairākas pārliecinošas priekšrocības:

Statiskā eksporta ierobežojumi

Lai gan statiskais eksports piedāvā daudzas priekšrocības, ir svarīgi apzināties tā ierobežojumus:

Next.js iestatīšana statiskajam eksportam

Šeit ir soli pa solim sniegta rokasgrāmata, kā iestatīt Next.js statiskajam eksportam:

1. Izveidojiet jaunu Next.js projektu

Ja jums vēl nav Next.js projekta, izveidojiet to, izmantojot šādu komandu:

npx create-next-app my-client-app

Iestatīšanas procesā izvēlieties opcijas, kas vislabāk atbilst jūsu vajadzībām (piemēram, TypeScript, ESLint).

2. Konfigurējiet `next.config.js`

Atveriet `next.config.js` failu sava projekta saknes direktorijā un pievienojiet šādu konfigurāciju:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Neobligāti: mainīt saites /me -> /me/ un emitēt /me.html -> /me/index.html
  // skatiet https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

Opcija `output: 'export'` norāda Next.js ģenerēt statisku jūsu lietojumprogrammas eksportu. Iestatījums `trailingSlash: true` parasti ir ieteicams, lai nodrošinātu konsekventu URL struktūru un izvairītos no potenciālām SEO problēmām.

3. Atjauniniet `package.json`

Pārveidojiet sava `package.json` faila `scripts` sadaļu, lai iekļautu izveides skriptu statiskajam eksportam:

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

Šis skripts vispirms izveidos jūsu Next.js lietojumprogrammu un pēc tam eksportēs to uz statisku direktoriju.

4. Ieviesiet klienta puses maršrutēšanu

Tā kā jūs veidojat klienta puses lietojumprogrammu, jums būs jāievieš klienta puses maršrutēšana, izmantojot `next/router` moduli vai trešās puses bibliotēku, piemēram, `react-router-dom`. Šeit ir piemērs, izmantojot `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>Sākumlapa</h1>
      <p>Laipni lūdzam sākumlapā!</p>
      <button onClick={handleClick}>Doties uz lapu Par mums</button>

      <Link href="/about">
         <a>Doties uz lapu Par mums (izmantojot Link)</a>
      </Link>
    </div>
  );
}

export default HomePage;

Atcerieties izmantot `Link` komponenti no `next/link` iekšējai navigācijai, lai nodrošinātu plūstošas klienta puses pārejas.

5. Apstrādājiet datu ienesi klienta pusē

Klienta puses lietojumprogrammā visa datu ienese jāveic klienta pusē, izmantojot tādas metodes kā `useEffect` vai `useState` āķus (hooks). Piemēram:

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 kļūda! statuss: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Notiek ielāde...</p>;
  if (error) return <p>Kļūda: {error.message}</p>;
  if (!data) return <p>Nav datu, ko attēlot</p>;

  return (
    <div>
      <h1>Datu lapa</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. Izveidojiet un eksportējiet savu lietojumprogrammu

Palaidiet izveides skriptu, lai ģenerētu statisko eksportu:

npm run build

Tas izveidos `out` (vai `public` atkarībā no Next.js versijas) direktoriju, kas saturēs statiskos HTML, CSS un JavaScript failus jūsu lietojumprogrammai.

7. Izvietojiet savu statisko vietni

Tagad jūs varat izvietot `out` direktorijas saturu statiskās mitināšanas pakalpojumu sniedzējā, piemēram, Netlify, Vercel, AWS S3 vai GitHub Pages. Lielākā daļa pakalpojumu sniedzēju piedāvā vienkāršu vilkšanas un nomešanas izvietošanu vai komandrindas rīkus, lai automatizētu procesu.

Progresīvas metodes klienta puses Next.js lietojumprogrammām

Šeit ir dažas progresīvas metodes, lai optimizētu jūsu klienta puses Next.js lietojumprogrammas:

1. Koda sadalīšana un slinkā ielāde (Lazy Loading)

Izmantojiet dinamiskos importus (`import()`), lai sadalītu savu kodu mazākos gabalos, kas tiek ielādēti pēc pieprasījuma. Tas var ievērojami uzlabot sākotnējo ielādes laiku, īpaši lielām lietojumprogrammām.

import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    <Suspense fallback={<div>Notiek ielāde...</div>}>
      <MyComponent />
    </Suspense>
  );
}

2. Attēlu optimizācija

Izmantojiet `next/image` komponenti attēlu optimizācijai. Šī komponente automātiski optimizē attēlus dažādām ierīcēm un ekrāna izmēriem, uzlabojot veiktspēju un lietotāja pieredzi. Tā atbalsta slinko ielādi, adaptīvus attēlus un dažādus attēlu formātus.

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Mans attēls"
      width={500}
      height={300}
    />
  );
}

3. Servisa darbinieki (Service Workers)

Ieviesiet servisa darbinieku, lai iespējotu bezsaistes funkcionalitāti un uzlabotu veiktspēju. Servisa darbinieks ir skripts, kas darbojas fonā un var pārtvert tīkla pieprasījumus, kešot resursus un sūtīt paziņojumus. Bibliotēkas, piemēram, `next-pwa`, var vienkāršot servisa darbinieka pievienošanas procesu jūsu Next.js lietojumprogrammai.

4. Vides mainīgie

Izmantojiet vides mainīgos, lai konfigurētu savu lietojumprogrammu dažādām vidēm (piemēram, izstrāde, sagatavošana, ražošana). Next.js nodrošina iebūvētu atbalstu vides mainīgajiem, izmantojot `.env` failu un `process.env` objektu. Esiet uzmanīgi, lai neeksponētu sensitīvu informāciju klienta puses kodā. Izmantojiet vides mainīgos galvenokārt konfigurācijas iestatījumiem, kurus ir droši eksponēt.

5. Monitorings un analītika

Integrējiet monitoringa un analītikas pakalpojumu (piemēram, Google Analytics, Sentry vai New Relic), lai izsekotu veiktspējas metrikas, identificētu kļūdas un gūtu ieskatu lietotāju uzvedībā. Tas palīdzēs jums optimizēt lietojumprogrammu un laika gaitā uzlabot lietotāja pieredzi.

6. SEO optimizācija klienta puses lietojumprogrammās

Lai gan statiskais eksports nodrošina sākotnējo HTML struktūru, apsveriet šīs stratēģijas labākam SEO klienta puses ietilpīgās lietojumprogrammās:

Internacionalizācijas (i18n) apsvērumi

Veidojot klienta puses lietojumprogrammu globālai auditorijai, internacionalizācija (i18n) ir ļoti svarīga. Šeit ir dažas labākās prakses:

Pareizās pieejas izvēle: statiskais eksports pret servera puses renderēšanu

Lēmums, vai izmantot statisko eksportu vai servera puses renderēšanu, ir atkarīgs no jūsu lietojumprogrammas specifiskajām prasībām. Apsveriet šādus faktorus:

Reālās pasaules piemēri

Šeit ir daži reālās pasaules piemēri lietojumprogrammām, kas var gūt labumu no Next.js statiskā eksporta:

Piemērs: Starptautiska uzņēmuma vietne

Iedomājieties uzņēmumu ar birojiem Ņujorkā, Londonā un Tokijā. Viņi vēlas vietni, kas pieejama angļu, franču un japāņu valodā. Next.js statiskais eksports, apvienojumā ar bezgalvas CMS un i18n bibliotēkām, varētu būt ideāls. CMS uzglabātu tulkoto saturu, Next.js to ienestu un renderētu klienta pusē, un statisko vietni varētu izvietot globāli CDN, lai nodrošinātu ātru piekļuvi.

Noslēgums

Next.js statiskais eksports nodrošina jaudīgu veidu, kā veidot tikai klienta puses lietojumprogrammas ar Next.js ietvara priekšrocībām. Izprotot priekšrocības, ierobežojumus, iestatīšanas procesu un progresīvās metodes, jūs varat izveidot ātras, drošas un globāli pieejamas tīmekļa pieredzes, kas atbilst jūsu specifiskajām prasībām. Neatkarīgi no tā, vai veidojat vienkāršu galveno lapu vai sarežģītu SPA, statiskais eksports var būt vērtīgs rīks jūsu tīmekļa izstrādes arsenālā.