Početak rada s Next.js: Kompletni vodič za 2026.

Next.js se etablirao kao vodeći React framework za izradu produkcijskih web aplikacija. Bilo da kreirate marketing stranicu, SaaS dashboard ili e-commerce platformu, Next.js pruža alate za brzu, SEO-optimiziranu i skalabilnu isporuku — bez borbe sa složenim konfiguracijama.

U ovom sveobuhvatnom vodiču proći ćemo kroz sve što trebate znati za početak rada s Next.js — od inicijalnog postavljanja projekta do deploymenta.

# Zašto odabrati Next.js?#

Prije nego zaronimo u kod, razumijmo što Next.js čini posebnim u odnosu na druge React frameworke i zašto ga tisuće kompanija — od startupa do enterprise tvrtki — koriste u produkciji.

Server-Side Rendering i Static Generation#

Tradicionalne single-page aplikacije (SPA) izrađene s čistim Reactom šalju praznu HTML ljusku pregledniku, a zatim JavaScript preuzima kontrolu i renderira sve na klijentskoj strani. Ovaj pristup ima dva značajna problema:

1. 1
   Loš SEO — Tražilice dobivaju prazan HTML bez sadržaja za indeksiranje
2. 2
   Sporo inicijalno učitavanje — Korisnici gledaju prazan ekran dok se JavaScript preuzima i izvršava

Next.js rješava oba problema s više strategija renderiranja:

• Static Site Generation (SSG) — Stranice se pre-renderiraju u vrijeme builda, što rezultira munjevito brzim učitavanjem i savršenim SEO-om. Idealno za blogove, landing stranice i dokumentaciju.
• Server-Side Rendering (SSR) — Stranice se renderiraju na svaki zahtjev, osiguravajući svježe podatke uz isporuku punog HTML-a tražilicama i korisnicima.
• Incremental Static Regeneration (ISR) — Kombinira brzinu statičkih stranica sa svježinom serverskog renderiranja kroz revalidaciju cached stranica u pozadini.

Rutiranje bazirano na datotečnom sustavu#

Umjesto konfiguriranja router biblioteke i ručnog definiranja ruta, Next.js koristi strukturu vašeg datotečnog sustava. Kreirate datoteku na app/about/page.js i automatski imate /about rutu. Ovaj pristup konvencija-umjesto-konfiguracije eliminira boilerplate i čini strukturu vaše aplikacije odmah razumljivom.

Ugrađene API rute#

Trebate backend endpoint? Kreirajte datoteku u app/api/ i exportirajte HTTP method handlere. Nema potrebe za zasebnim serverom. Ovo je savršeno za obradu formi, webhookove, autentifikacijske endpointe i lagane API-je.

React Server Components#

Next.js u potpunosti prihvaća React Server Components (RSC), omogućujući vam da renderirate komponente na serveru bez slanja njihovog JavaScripta klijentu. To znači manje veličine bundlea, brže učitavanje stranica i mogućnost direktnog pristupa bazama podataka i datotečnom sustavu iz vaših komponenti.

⚠️ Upozorenje: RSC mijenja način na koji razmišljate o upravljanju stanjem. Ne možete koristiti hookove poput useState ili useEffect u Server Komponentama. Te mogućnosti funkcioniraju samo u Client Komponentama (označene s 'use client'). Ova krivulja učenja može iznenaditi razvojitelje koji dolaze iz tradicionalnog Reacta, zato planirajte obuku svog tima.

Optimizacija slika i fontova#

Ugrađena next/image komponenta automatski optimizira slike s lazy loadingom, responzivnim dimenzijama i modernim formatima (WebP, AVIF). Slično, next/font upravlja učitavanjem fontova bez layout shifta.

# Postavljanje prvog projekta#

Kreirajmo novu Next.js aplikaciju. Trebat će vam Node.js 18.17 ili noviji instaliran na vašem računalu.

Kreiranje projekta#

Otvorite terminal i pokrenite:

npx create-next-app@latest my-app

CLI će vam postaviti nekoliko pitanja:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? Yes
Would you like to use Turbopack for `next dev`? Yes
Would you like to customize the import alias? No

Preporučujemo odgovoriti Yes na sva pitanja za najbolje razvojno iskustvo.

💡 Savjet: TypeScript hvata greške prije nego što stignu u produkciju. Iako je opcionalan, preporučuje se za sve profesionalne Next.js projekte. Inicijalna postavka se isplati kroz bolju podršku IDE-a, sigurnost pri refaktoringu i ranom hvataanju tipskih grešaka.

Struktura projekta#

Nakon kreiranja, struktura vašeg projekta izgleda ovako:

my-app/
├── src/
│   ├── app/
│   │   ├── layout.js      # Root layout (obuhvaća sve stranice)
│   │   ├── page.js         # Početna stranica (/)
│   │   └── globals.css     # Globalni stilovi
│   └── ...
├── public/                  # Statički resursi
├── next.config.js           # Next.js konfiguracija
├── tailwind.config.js       # Tailwind CSS konfiguracija
├── tsconfig.json            # TypeScript konfiguracija
└── package.json

Pokretanje razvojnog servera#

Navigirajte do direktorija projekta i pokrenite razvojni server:

cd my-app
npm run dev

Otvorite http://localhost:3000 u pregledniku. Trebali biste vidjeti Next.js stranicu dobrodošlice. Razvojni server ima hot module replacement (HMR), tako da će se svaka promjena koju spremite odmah prikazati u pregledniku.

# Razumijevanje App Routera#

App Router, uveden u Next.js 13 i sada zadani u Next.js 16, predstavlja paradigmatski pomak u načinu na koji gradite React aplikacije. Izgrađen je na temelju React Server Components i uvodi nekoliko moćnih koncepata.

Stranice i layouti#

Svaka ruta treba page.js datoteku koja exportira React komponentu:

// src/app/page.js — Početna stranica
export default function Home() {
  return (
    <main>
      <h1>Dobrodošli u Moju Aplikaciju</h1>
      <p>Ovo je početna stranica.</p>
    </main>
  );
}

Layouti obuhvaćaju stranice i održavaju se tijekom navigacija, što ih čini savršenima za dijeljeni UI poput navigacijskih traka i footera:

// src/app/layout.js — Root layout
export default function RootLayout({ children }) {
  return (
    <html lang="hr">
      <body>
        <nav>Moja Aplikacija</nav>
        {children}
        <footer>© 2026</footer>
      </body>
    </html>
  );
}

Ugniježđene rute#

Kreirajte mape za izgradnju ugniježđenih ruta. Na primjer:

src/app/
├── page.js              → /
├── about/
│   └── page.js          → /about
├── blog/
│   ├── page.js          → /blog
│   └── [slug]/
│       └── page.js      → /blog/my-post
└── dashboard/
    ├── layout.js         → Dijeljeni dashboard layout
    ├── page.js           → /dashboard
    └── settings/
        └── page.js       → /dashboard/settings

Dinamičke rute#

Koristite uglate zagrade za dinamičke segmente:

// src/app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const { slug } = await params;

  // Dohvati podatke posta koristeći slug
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

Stanja učitavanja i grešaka#

Next.js pruža posebne datoteke za upravljanje stanjima učitavanja i grešaka:

// src/app/blog/loading.js — Prikazuje se dok se podaci učitavaju
export default function Loading() {
  return <div>Učitavanje blog postova...</div>;
}

// src/app/blog/error.js — Prikazuje se pri grešci
'use client';
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Nešto je pošlo po krivu!</h2>
      <button onClick={() => reset()}>Pokušaj ponovo</button>
    </div>
  );
}

# Dohvaćanje podataka u Next.js#

Dohvaćanje podataka u Next.js je jednostavno jer Server Components mogu biti asinkrone funkcije. To znači da možete koristiti await direktno u vašim komponentama — bez useEffect hookova, bez upravljanja stanjima učitavanja, bez klijentskih biblioteka za dohvaćanje podataka za inicijalne podatke.

Dohvaćanje podataka u Server Components#

// Ova komponenta se izvršava na serveru
export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // Revalidacija svaki sat
  }).then(res => res.json());

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name} — {product.price}€</li>
      ))}
    </ul>
  );
}

Statičko vs. dinamičko renderiranje#

Po defaultu, Next.js statički renderira rute u vrijeme builda. Ako vaša stranica dohvaća podatke s cache: 'no-store' ili koristi dinamičke funkcije poput cookies() ili headers(), automatski prelazi na dinamičko renderiranje.

// Statičko: Renderirano u vrijeme builda, revalidirano svaki sat
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 },
});

// Dinamičko: Renderirano na svaki zahtjev
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store',
});

ℹ️ Napomena: Next.js inteligentno cachira zahtjeve fetch. Ako ne navedete cache opcije, Next.js tretira zahtjev kao statičan po defaultu. To znači da se vaši API podaci cachiraju čak i ako niste to eksplicitno tražili. Uvijek budite eksplicitni o svojoj strategiji cachiranja kako biste izbjegли zastarjele podatke.

Server Actions#

Server Actions omogućuju definiranje serverskih funkcija koje se mogu pozivati direktno iz klijentskih komponenti. Savršeni su za slanje formi i mutacije podataka:

// src/app/contact/page.js
export default function ContactPage() {
  async function submitForm(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');

    await saveToDatabase({ name, email, message });
    await sendNotificationEmail({ name, email, message });
  }

  return (
    <form action={submitForm}>
      <input name="name" placeholder="Vaše ime" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Poruka" required />
      <button type="submit">Pošalji</button>
    </form>
  );
}

# Stiliziranje aplikacije#

Next.js podržava više pristupa stiliziranju iz kutije.

Tailwind CSS#

Tailwind CSS je preporučeno rješenje za stiliziranje i dolazi predkonfigurirano kada ga odaberete tijekom postavljanja projekta:

export default function Card({ title, description }) {
  return (
    <div className="rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow">
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

CSS Modules#

Za CSS ograničen na komponentu bez runtime overheada:

/* Button.module.css */
.button {
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.primary {
  background: #0070f3;
  color: white;
}

import styles from './Button.module.css';

export default function Button({ children, variant = 'primary' }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}

# SEO i metapodaci#

Next.js pruža moćan Metadata API za upravljanje SEO tagovima. Exportirajte metadata objekt ili generateMetadata funkciju iz bilo koje stranice:

// Statički metapodaci
export const metadata = {
  title: 'O nama | Moja Aplikacija',
  description: 'Saznajte više o našem timu i misiji.',
  openGraph: {
    title: 'O nama | Moja Aplikacija',
    description: 'Saznajte više o našem timu i misiji.',
    images: ['/og-about.png'],
  },
};

// Dinamički metapodaci
export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.coverImage],
    },
  };
}

Strukturirani podaci (JSON-LD)#

Za bogate rezultate pretraživanja, dodajte strukturirane podatke na vaše stranice:

export default function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.date,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* Sadržaj posta */}</article>
    </>
  );
}

# Optimizacija performansi#

Next.js uključuje mnoge optimizacije performansi iz kutije, ali evo dodatnih tehnika za maksimiziranje vaših rezultata.

Optimizacija slika#

Uvijek koristite next/image komponentu umjesto običnog <img> taga:

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero banner koji prikazuje naš proizvod"
      width={1200}
      height={630}
      priority // Preload za slike iznad pregiba
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

next/image komponenta automatski:

• Servira slike u WebP/AVIF formatu kada preglednik to podržava
• Lazy loada slike ispod pregiba
• Generira responzivni srcset za različite veličine ekrana
• Sprječava Cumulative Layout Shift (CLS)

Optimizacija fontova#

Koristite next/font za self-hosting fontova bez layout shifta:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="hr" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Dinamički importi#

Smanjite inicijalnu veličinu bundlea dinamičkim importiranjem teških komponenti:

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('@/components/Chart'), {
  loading: () => <p>Učitavanje grafikona...</p>,
  ssr: false, // Preskoči server-side rendering za client-only komponente
});

# Deployment#

Next.js aplikacije mogu se deployati bilo gdje s podrškom za Node.js, ali najglatkije iskustvo je s Vercelom (tvrtka koja stoji iza Next.js-a).

Deployment na Vercel#

1. 1
   Pushajte vaš kod na GitHub, GitLab ili Bitbucket
2. 2
   Idite na vercel.com i importirajte vaš repozitorij
3. 3
   Vercel automatski detektira Next.js i konfigurira build
4. 4
   Svaki push na main granu pokreće produkcijski deployment
5. 5
   Pull requestovi dobivaju preview deploymente s jedinstvenim URL-ovima

Self-Hosting#

Za self-hosting, buildajte i pokrenite vašu aplikaciju:

npm run build
npm run start

Ili koristite Docker:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

Omogućite standalone output u vašem next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

export default nextConfig;

# Česti uzorci i najbolje prakse#

Autentifikacija#

Koristite middleware za zaštitu ruta:

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('auth-token');

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/dashboard/:path*',
};

Internacionalizacija (i18n)#

Za višejezične stranice, koristite biblioteku poput next-intl s App Routerom:

src/app/
└── [locale]/
    ├── layout.js
    ├── page.js
    └── about/
        └── page.js

Ovo stvara rute poput /en, /en/about, /hr, /hr/about — svaka servira sadržaj na odgovarajućem jeziku.

Error Boundaries#

Kreirajte error.js datoteke na svakom segmentu rute za hvatanje i upravljanje greškama. Ovo sprječava da jedna komponenta koja pada ruši cijelu aplikaciju.

# Što je novo u Next.js 16#

Next.js 16 donosi nekoliko poboljšanja:

• Turbopack stabilan — Bundler baziran na Rustu sada je default za next dev, nudeći značajno brži hot module replacement
• React 19 podrška — Potpuna integracija s najnovijim React mogućnostima uključujući poboljšane Server Components i Actions
• Poboljšano cachiranje — Predvidljivije ponašanje cachiranja s eksplicitnim opt-in strategijama
• Partial Prerendering — Kombinirajte statičke ljuske s dinamičkim sadržajem za najbolje od oba svijeta

# Ključni zaključci#

• Više strategija renderiranja: Static Site Generation (SSG), Server-Side Rendering (SSR) i Incremental Static Regeneration (ISR) daju vam fleksibilnost da optimizirate performanse i svježinu po stranici.
• Prednosti App Routera: Rutiranje temeljeno na datotekama s Server Komponentama, layoutima i ugniježđenim rutama čini izgradnju skalabilnih aplikacija jednostavnom i intuitivnom.
• Utjecaj Server Components: RSC eliminiše potrebu za klijentskim bibliotekama za dohvaćanje podataka i smanjuje veličinu JavaScript bundlea, ali zahtijeva promjenu mentalnog modela od tradicionalnih React uzoraka.
• Ugrađene optimizacije: Optimizacija slika, učitavanje fontova, dinamički importi i inteligentno cachiranje dolaze automatski, pružajući bolje performanse bez dodatne konfiguracije.
• Više opcija deploymenta: Bilo da odaberete Vercel, self-hosting s Dockerom ili bilo koju Node.js okolinu, Next.js se prilagođava vašim potrebama infrastrukture.

# Zaključak#

Next.js pruža sve što vam je potrebno za izradu modernih web aplikacija — od rutiranja i dohvaćanja podataka do SEO optimizacije i deploymenta. Njegov pristup konvencija-umjesto-konfiguracije znači manje boilerplatea i više vremena za izradu značajki koje su važne vašim korisnicima.

Fokus frameworka na performanse (kroz Server Components, statičku generaciju i ugrađene optimizacije) osigurava da su vaše aplikacije brze po defaultu, dok njegova fleksibilnost omogućuje odabir prave strategije renderiranja za svaku stranicu.

Spremni za pokretanje Next.js projekta? Kontaktirajte nas i razgovarajmo o tome kako vam možemo pomoći izgraditi brzu, skalabilnu web aplikaciju.