M

MLOG

Hrvatski

Istražite statički izvoz u Next.js-u za aplikacije koje se izvršavaju isključivo na klijentskoj strani. Saznajte prednosti, ograničenja, postavljanje i napredne tehnike za stvaranje brzih, sigurnih i globalno dostupnih web iskustava.

Next.js statički izvoz: Izrada aplikacija isključivo na klijentskoj strani

Next.js je moćan React radni okvir (framework) koji omogućuje programerima izradu performantnih, skalabilnih i SEO-prijateljskih web aplikacija. Iako je Next.js poznat po svojim mogućnostima renderiranja na strani poslužitelja (SSR) i generiranja statičkih stranica (SSG), također nudi fleksibilnost za stvaranje aplikacija koje se izvršavaju isključivo na klijentskoj strani koristeći statički izvoz. Ovaj pristup omogućuje vam da iskoristite prednosti Next.js alata i strukture dok implementirate čisto klijentsku aplikaciju. Ovaj post će vas voditi kroz sve što trebate znati o izradi aplikacija isključivo na klijentskoj strani s Next.js statičkim izvozom, pokrivajući prednosti, ograničenja, proces postavljanja i napredne tehnike.

Što je Next.js statički izvoz?

Statički izvoz u Next.js-u odnosi se na proces generiranja potpuno statične verzije vaše aplikacije tijekom procesa izgradnje (build). To znači da su sve HTML, CSS i JavaScript datoteke unaprijed renderirane i spremne za posluživanje izravno sa statičkog poslužitelja datoteka (npr. Netlify, Vercel, AWS S3 ili tradicionalni web poslužitelj). Za razliku od aplikacija renderiranih na poslužitelju, nije potreban Node.js poslužitelj za obradu dolaznih zahtjeva. Umjesto toga, cijela aplikacija se isporučuje kao zbirka statičkih resursa (assets).

Kada se cilja na aplikaciju koja radi isključivo na klijentskoj strani, Next.js generira te statičke resurse uz pretpostavku da će se svo dinamičko ponašanje obraditi pomoću JavaScripta na klijentskoj strani. To je posebno korisno za Single Page Applications (SPA) koje se prvenstveno oslanjaju na usmjeravanje (routing) na klijentskoj strani, API pozive i interakcije s korisnikom.

Zašto odabrati statički izvoz za klijentske aplikacije?

Izrada klijentskih aplikacija s Next.js statičkim izvozom nudi nekoliko uvjerljivih prednosti:

Ograničenja statičkog izvoza

Iako statički izvoz nudi brojne prednosti, važno je biti svjestan njegovih ograničenja:

Postavljanje Next.js-a za statički izvoz

Ovdje je vodič korak po korak o tome kako postaviti Next.js za statički izvoz:

1. Kreirajte novi Next.js projekt

Ako već nemate Next.js projekt, stvorite ga pomoću sljedeće naredbe:

npx create-next-app my-client-app

Odaberite opcije koje najbolje odgovaraju vašim potrebama tijekom procesa postavljanja (npr. TypeScript, ESLint).

2. Konfigurirajte `next.config.js`

Otvorite datoteku `next.config.js` u korijenu vašeg projekta i dodajte sljedeću konfiguraciju:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // see https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig

Opcija `output: 'export'` govori Next.js-u da generira statički izvoz vaše aplikacije. Postavljanje `trailingSlash: true` općenito se preporučuje kako bi se osigurala dosljedna struktura URL-a i izbjegli potencijalni SEO problemi.

3. Ažurirajte `package.json`

Izmijenite odjeljak `scripts` u vašoj `package.json` datoteci kako biste uključili skriptu za izgradnju za statički izvoz:

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

Ova skripta će prvo izgraditi vašu Next.js aplikaciju, a zatim je izvesti u statički direktorij.

4. Implementirajte usmjeravanje (routing) na klijentskoj strani

Budući da gradite klijentsku aplikaciju, morat ćete implementirati usmjeravanje na klijentskoj strani koristeći modul `next/router` ili biblioteku treće strane poput `react-router-dom`. Evo primjera korištenja `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>Početna stranica</h1>
      <p>Dobrodošli na početnu stranicu!</p>
      <button onClick={handleClick}>Idi na stranicu O nama</button>

      <Link href="/about">
         <a>Idi na stranicu O nama (koristeći Link)</a>
      </Link>
    </div>
  );
}

export default HomePage;

Ne zaboravite koristiti komponentu `Link` iz `next/link` za internu navigaciju kako biste osigurali glatke prijelaze na klijentskoj strani.

5. Obrada dohvaćanja podataka na klijentskoj strani

U klijentskoj aplikaciji, svo dohvaćanje podataka mora se obaviti na klijentskoj strani koristeći tehnike poput `useEffect` ili `useState` hookova. Na primjer:

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

    fetchData();
  }, []);

  if (loading) return <p>Učitavanje...</p>;
  if (error) return <p>Greška: {error.message}</p>;
  if (!data) return <p>Nema podataka za prikaz</p>;

  return (
    <div>
      <h1>Stranica s podacima</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;

6. Izgradite i izvezite svoju aplikaciju

Pokrenite skriptu za izgradnju kako biste generirali statički izvoz:

npm run build

Ovo će stvoriti direktorij `out` (ili `public` ovisno o verziji Next.js-a) koji sadrži statičke HTML, CSS i JavaScript datoteke za vašu aplikaciju.

7. Implementirajte svoju statičku stranicu

Sada možete implementirati sadržaj direktorija `out` na pružatelja statičkog hostinga kao što su Netlify, Vercel, AWS S3 ili GitHub Pages. Većina pružatelja nudi jednostavno "povuci i ispusti" (drag-and-drop) postavljanje ili alate naredbenog retka za automatizaciju procesa.

Napredne tehnike za Next.js klijentske aplikacije

Ovdje su neke napredne tehnike za optimizaciju vaših Next.js klijentskih aplikacija:

1. Dijeljenje koda (Code Splitting) i lijeno učitavanje (Lazy Loading)

Koristite dinamičke importe (`import()`) kako biste podijelili svoj kod u manje dijelove koji se učitavaju na zahtjev. To može značajno poboljšati početno vrijeme učitavanja, posebno za velike aplikacije.

import React, { Suspense } from 'react';

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

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

2. Optimizacija slika

Koristite komponentu `next/image` za optimizaciju slika. Ova komponenta automatski optimizira slike za različite uređaje i veličine zaslona, poboljšavajući performanse i korisničko iskustvo. Podržava lijeno učitavanje, responzivne slike i različite formate slika.

import Image from 'next/image';

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

3. Service Workers

Implementirajte service worker kako biste omogućili offline funkcionalnost i poboljšali performanse. Service worker je skripta koja se izvršava u pozadini i može presretati mrežne zahtjeve, keširati resurse i slati push obavijesti. Biblioteke poput `next-pwa` mogu pojednostaviti proces dodavanja service workera u vašu Next.js aplikaciju.

4. Varijable okruženja (Environment Variables)

Koristite varijable okruženja za konfiguriranje vaše aplikacije za različita okruženja (npr. razvojno, testno, produkcijsko). Next.js pruža ugrađenu podršku za varijable okruženja putem `.env` datoteke i objekta `process.env`. Pazite da ne izložite osjetljive informacije u kodu na klijentskoj strani. Koristite varijable okruženja prvenstveno za postavke konfiguracije koje je sigurno izložiti.

5. Praćenje i analitika

Integrirajte uslugu praćenja i analitike (npr. Google Analytics, Sentry ili New Relic) za praćenje metrika performansi, identificiranje grešaka i stjecanje uvida u ponašanje korisnika. To će vam pomoći da optimizirate svoju aplikaciju i poboljšate korisničko iskustvo s vremenom.

6. Optimizacija za SEO u klijentskim aplikacijama

Iako statički izvoz pruža početnu HTML strukturu, razmotrite ove strategije za bolji SEO u aplikacijama koje se uvelike oslanjaju na klijentsku stranu:

Razmatranja o internacionalizaciji (i18n)

Prilikom izrade klijentske aplikacije za globalnu publiku, internacionalizacija (i18n) je ključna. Evo nekoliko najboljih praksi:

Odabir pravog pristupa: Statički izvoz naspram renderiranja na strani poslužitelja

Odluka o tome hoćete li koristiti statički izvoz ili renderiranje na strani poslužitelja ovisi o specifičnim zahtjevima vaše aplikacije. Razmotrite sljedeće čimbenike:

Primjeri iz stvarnog svijeta

Ovdje su neki primjeri aplikacija iz stvarnog svijeta koje mogu imati koristi od Next.js statičkog izvoza:

Primjer: Web stranica međunarodne tvrtke

Zamislite tvrtku s uredima u New Yorku, Londonu i Tokiju. Žele web stranicu dostupnu na engleskom, francuskom i japanskom jeziku. Statički izvoz Next.js-a, u kombinaciji s headless CMS-om i i18n bibliotekama, mogao bi biti idealan. CMS bi pohranjivao prevedeni sadržaj, Next.js bi ga dohvaćao i renderirao na klijentskoj strani, a statička stranica bi se mogla globalno implementirati na CDN za brzi pristup.

Zaključak

Next.js statički izvoz pruža moćan način za izradu aplikacija koje se izvršavaju isključivo na klijentskoj strani uz prednosti Next.js radnog okvira. Razumijevanjem prednosti, ograničenja, procesa postavljanja i naprednih tehnika, možete stvoriti brza, sigurna i globalno dostupna web iskustva koja zadovoljavaju vaše specifične zahtjeve. Bilo da gradite jednostavnu odredišnu stranicu ili složeni SPA, statički izvoz može biti vrijedan alat u vašem arsenalu za web razvoj.