Next.js — Technologie

Czym jest Next.js?

Next.js to full-stack framework React stworzony przez Vercel. Łączy frontend i backend w jednym projekcie. Oferuje Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) i React Server Components.

Next.js to standard branży dla web apps. Używają go Vercel, Netflix, TikTok, Notion, Hulu i tysiące startupów. App Router + Server Actions = pełny backend bez osobnego serwera.

Przykłady kodu

Server Component + data fetching

              Next.js App Router
              // app/products/page.tsx
import { db } from '@/lib/db';

export default async function ProductsPage() {
  const products = await db.product.findMany({
    where: { isActive: true },
    orderBy: { createdAt: 'desc' },
  });

  return (
    <main className="container py-12">
      <h1 className="text-3xl font-bold">Produkty</h1>
      <ProductGrid products={products} />
    </main>
  );
}
            

Server Actions

              Next.js Server Action
              'use server';

export async function createOrder(formData: FormData) {
  const session = await getSession();
  if (!session) throw new Error('Unauthorized');

  const order = await db.order.create({
    data: {
      userId: session.user.id,
      items: JSON.parse(formData.get('items') as string),
      total: parseFloat(formData.get('total') as string),
    },
  });

  revalidatePath('/orders');
  redirect(`/orders/${order.id}`);
}
            

Middleware

              middleware.ts
              import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('session');

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

  return NextResponse.next();
}
            

Ocena kompetencji

Full-stack

98%

SEO

97%

Wydajność

92%

DX

90%

Ekosystem

96%

Łatwość nauki

70%

Co potrafi Next.js

SSR / SSG / ISR

Server rendering, static generation, incremental regeneration. Najlepsza wydajność i SEO.

Server Components

Renderuj na serwerze, zero JS na kliencie. Mniejszy bundle, szybszy load.

Server Actions

Mutacje danych bez API routes. Formularz → baza danych w jednym pliku.

API Routes

REST / GraphQL endpoints w tym samym projekcie. Edge Functions, middleware.

Image / Font Optimization

Automatyczna optymalizacja obrazów, lazy loading, font subsetting.

Deploy (Vercel)

Git push → deploy. Preview deployments, analytics, edge network.

Kiedy wybrać Next.js?

Idealny gdy: budujesz web app z SEO (marketing site, e-commerce, blog), potrzebujesz full-stack w jednym repo, chcesz SSR + API + auth w jednym frameworku.

Nie najlepszy gdy: budujesz prostą SPA bez SEO (lepiej Vite + React), budujesz mobile app (lepiej Flutter), potrzebujesz tylko statycznej strony (lepiej Astro).