M

MLOG

Eesti

Avastage Next.js staatilisi eksporte ainult kliendipoolsete rakenduste jaoks. Õppige eeliseid, piiranguid, seadistamist ja täiustatud tehnikaid kiirete, turvaliste ja globaalselt kättesaadavate veebikogemuste loomiseks.

Next.js staatilised ekspordid: ainult kliendipoolsete rakenduste loomine

Next.js on võimas Reacti raamistik, mis võimaldab arendajatel luua jõudsaid, skaleeritavaid ja SEO-sõbralikke veebirakendusi. Kuigi Next.js on tuntud oma serveripoolse renderdamise (SSR) ja staatilise saidi genereerimise (SSG) võimekuse poolest, pakub see ka paindlikkust luua ainult kliendipoolseid rakendusi, kasutades staatilisi eksporte. See lähenemine võimaldab teil kasutada Next.js-i tööriistade ja struktuuri eeliseid, juurutades samal ajal puhtalt kliendipoolse rakenduse. See postitus juhendab teid läbi kõige, mida peate teadma ainult kliendipoolsete rakenduste loomisest Next.js staatiliste eksportidega, käsitledes eeliseid, piiranguid, seadistusprotsessi ja täiustatud tehnikaid.

Mis on Next.js staatilised ekspordid?

Staatilised ekspordid Next.js-is viitavad protsessile, kus teie rakendusest genereeritakse ehitusprotsessi käigus täielikult staatiline versioon. See tähendab, et kõik HTML-, CSS- ja JavaScripti-failid on eelrenderdatud ja valmis otse staatilisest failiserverist (nt Netlify, Vercel, AWS S3 või traditsiooniline veebiserver) serveerimiseks. Erinevalt serveris renderdatud rakendustest pole sissetulevate päringute käsitlemiseks vaja Node.js serverit. Selle asemel tarnitakse kogu rakendus staatiliste varade kogumina.

Ainult kliendipoolse rakenduse sihtimisel genereerib Next.js need staatilised varad eeldusega, et kogu dünaamiline käitumine toimub kliendipoolse JavaScripti abil. See on eriti kasulik üheleheliste rakenduste (SPA) jaoks, mis tuginevad peamiselt kliendipoolsele marsruutimisele, API-kõnedele ja kasutaja interaktsioonidele.

Miks valida staatilised ekspordid kliendipoolsete rakenduste jaoks?

Kliendipoolsete rakenduste loomine Next.js staatiliste eksportidega pakub mitmeid kaalukaid eeliseid:

Staatiliste eksportide piirangud

Kuigi staatilised ekspordid pakuvad arvukalt eeliseid, on oluline olla teadlik nende piirangutest:

Next.js seadistamine staatiliste eksportide jaoks

Siin on samm-sammuline juhend, kuidas seadistada Next.js staatiliste eksportide jaoks:

1. Looge uus Next.js projekt

Kui teil veel pole Next.js projekti, looge see järgmise käsuga:

npx create-next-app my-client-app

Valige seadistusprotsessi käigus oma vajadustele kõige paremini vastavad valikud (nt TypeScript, ESLint).

2. Konfigureerige `next.config.js`

Avage oma projekti juurkaustas fail `next.config.js` ja lisage järgmine konfiguratsioon:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Valikuline: muuda lingid `/me` -> `/me/` ja väljasta `/me.html` -> `/me/index.html`
  // vt https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

`output: 'export'` valik annab Next.js-ile käsu genereerida teie rakendusest staatiline eksport. `trailingSlash: true` seadistamine on üldiselt soovitatav, et tagada ühtlane URL-i struktuur ja vältida võimalikke SEO probleeme.

3. Uuendage `package.json`

Muutke oma `package.json` faili `scripts` jaotist, et lisada ehitusskript staatiliste eksportide jaoks:

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

See skript ehitab esmalt teie Next.js rakenduse ja seejärel ekspordib selle staatilisse kausta.

4. Rakendage kliendipoolne marsruutimine

Kuna loote kliendipoolset rakendust, peate rakendama kliendipoolse marsruutimise, kasutades `next/router` moodulit või kolmanda osapoole teeki nagu `react-router-dom`. Siin on näide, kasutades `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>Avaleht</h1>
      <p>Tere tulemast avalehele!</p>
      <button onClick={handleClick}>Mine lehele 'Teave'</button>

      <Link href="/about">
         <a>Mine lehele 'Teave' (kasutades Linki)</a>
      </Link>
    </div>
  );
}

export default HomePage;

Sujuvate kliendipoolsete üleminekute tagamiseks ärge unustage sisemise navigeerimise jaoks kasutada `next/link` `Link` komponenti.

5. Käsitlege andmete hankimist kliendi poolel

Kliendipoolses rakenduses peab kogu andmete hankimine toimuma kliendi poolel, kasutades tehnikaid nagu `useEffect` või `useState` hooke. Näiteks:

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

    fetchData();
  }, []);

  if (loading) return <p>Laen...</p>;
  if (error) return <p>Viga: {error.message}</p>;
  if (!data) return <p>Kuvatavaid andmeid pole</p>;

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

export default DataPage;

6. Ehitage ja eksportige oma rakendus

Käivitage ehitusskript, et genereerida staatiline eksport:

npm run build

See loob `out` (või `public`, sõltuvalt Next.js versioonist) kausta, mis sisaldab teie rakenduse staatilisi HTML-, CSS- ja JavaScripti-faile.

7. Juurutage oma staatiline sait

Nüüd saate `out` kausta sisu juurutada staatilisse majutusteenusesse nagu Netlify, Vercel, AWS S3 või GitHub Pages. Enamik pakkujaid pakub protsessi automatiseerimiseks lihtsat lohista-ja-viska juurutamist või käsurea tööriistu.

Täiustatud tehnikad kliendipoolsete Next.js rakenduste jaoks

Siin on mõned täiustatud tehnikad teie kliendipoolsete Next.js rakenduste optimeerimiseks:

1. Koodi tükeldamine ja laisklaadimine

Kasutage dünaamilisi importe (`import()`), et jagada oma kood väiksemateks tükkideks, mida laaditakse nõudmisel. See võib märkimisväärselt parandada esialgseid laadimisaegu, eriti suurte rakenduste puhul.

import React, { Suspense } from 'react';

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

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

2. Piltide optimeerimine

Kasutage piltide optimeerimiseks `next/image` komponenti. See komponent optimeerib pildid automaatselt erinevate seadmete ja ekraanisuuruste jaoks, parandades jõudlust ja kasutajakogemust. See toetab laisklaadimist, tundlikke pilte ja erinevaid pildivorminguid.

import Image from 'next/image';

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

3. Service Workerid

Rakendage service worker, et võimaldada võrguühenduseta funktsionaalsust ja parandada jõudlust. Service worker on skript, mis töötab taustal ja suudab kinni püüda võrgupäringuid, vahemällu salvestada varasid ja saata tõuketeateid. Teegid nagu `next-pwa` võivad lihtsustada service workeri lisamist teie Next.js rakendusele.

4. Keskkonnamuutujad

Kasutage keskkonnamuutujaid oma rakenduse konfigureerimiseks erinevate keskkondade jaoks (nt arendus, testimine, tootmine). Next.js pakub sisseehitatud tuge keskkonnamuutujatele `.env` faili ja `process.env` objekti kaudu. Olge ettevaatlik, et mitte paljastada tundlikku teavet kliendipoolses koodis. Kasutage keskkonnamuutujaid peamiselt konfiguratsiooniseadete jaoks, mida on ohutu avaldada.

5. Monitooring ja analüütika

Integreerige monitooringu- ja analüütikateenus (nt Google Analytics, Sentry või New Relic), et jälgida jõudlusnäitajaid, tuvastada vigu ja saada ülevaadet kasutajate käitumisest. See aitab teil oma rakendust optimeerida ja aja jooksul kasutajakogemust parandada.

6. SEO optimeerimine kliendipoolsetes rakendustes

Kuigi staatilised ekspordid pakuvad esialgse HTML-struktuuri, kaaluge neid strateegiaid parema SEO saavutamiseks kliendipoolsetes rakendustes:

Rahvusvahelistamise (i18n) kaalutlused

Globaalsele publikule kliendipoolse rakenduse loomisel on rahvusvahelistamine (i18n) ülioluline. Siin on mõned parimad tavad:

Õige lähenemise valimine: staatiline eksport vs. serveripoolne renderdamine

Otsustamine, kas kasutada staatilisi eksporte või serveripoolset renderdamist, sõltub teie rakenduse konkreetsetest nõuetest. Kaaluge järgmisi tegureid:

Reaalse maailma näited

Siin on mõned reaalse maailma näited rakendustest, mis võivad Next.js staatilistest eksportidest kasu saada:

Näide: Rahvusvahelise ettevõtte veebisait

Kujutage ette ettevõtet, millel on kontorid New Yorgis, Londonis ja Tokyos. Nad soovivad veebisaiti, mis oleks saadaval inglise, prantsuse ja jaapani keeles. Next.js staatiline eksport koos peata CMS-i ja i18n teekidega võiks olla ideaalne. CMS säilitaks tõlgitud sisu, Next.js hangiks ja renderdaks selle kliendi poolel ning staatilise saidi saaks kiireks juurdepääsuks globaalselt CDN-is juurutada.

Kokkuvõte

Next.js staatilised ekspordid pakuvad võimsat viisi ainult kliendipoolsete rakenduste loomiseks, kasutades Next.js raamistiku eeliseid. Mõistes eeliseid, piiranguid, seadistusprotsessi ja täiustatud tehnikaid, saate luua kiireid, turvalisi ja globaalselt kättesaadavaid veebikogemusi, mis vastavad teie konkreetsetele nõuetele. Olenemata sellest, kas loote lihtsat maandumislehte või keerulist SPA-d, võivad staatilised ekspordid olla väärtuslik tööriist teie veebiarenduse arsenalis.