Kompletny przewodnik Next.js 15

// app/blog/[slug]/page.tsx
type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);

  return <article>{post.content}</article>;
}

// Generuj statyczne parametry podczas budowania
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar /> {/* Współdzielony pasek boczny */}
      <main className="flex-1">
        {children} {/* Zawartość strony */}
      </main>
    </div>
  );
}

import Link from 'next/link';
import { useRouter } from 'next/navigation';

// Nawigacja deklaratywna
<Link href="/blog/nextjs-guide">Czytaj przewodnik</Link>

// Nawigacja programistyczna
function NavigateButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/dashboard')}>
      Przejdź do dashboardu
    </button>
  );
}

// Server Component - async domyślnie
async function UserProfile({ userId }: { userId: string }) {
  // Fetch jest automatycznie cachowany
  const user = await fetch(`https://api.example.com/users/${userId}`);

  // Lub pobierz bezpośrednio z bazy danych
  const posts = await db.post.findMany({
    where: { authorId: userId },
    orderBy: { createdAt: 'desc' },
  });

  return (
    <div>
      <h1>{user.name}</h1>
      <PostList posts={posts} />
    </div>
  );
}

// Pobieranie równoległe - zaczyna się w tym samym czasie
async function Dashboard() {
  const userPromise = getUser();
  const postsPromise = getPosts();
  const statsPromise = getStats();

  // Czekaj na wszystkie promise
  const [user, posts, stats] = await Promise.all([
    userPromise,
    postsPromise,
    statsPromise,
  ]);

  return <DashboardUI user={user} posts={posts} stats={stats} />;
}

// Pobieranie sekwencyjne - gdy dane zależą od poprzedniego wyniku
async function UserPosts({ userId }: { userId: string }) {
  const user = await getUser(userId);
  // Pobierz posty dopiero po otrzymaniu użytkownika
  const posts = await getPosts(user.region);

  return <PostsList posts={posts} />;
}

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header /> {/* Pokazuje się natychmiast */}

      <Suspense fallback={<Skeleton />}>
        <SlowComponent /> {/* Streamuje gdy gotowe */}
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <AnotherSlowComponent /> {/* Również streamuje niezależnie */}
      </Suspense>

      <Footer /> {/* Pokazuje się natychmiast */}
    </>
  );
}

// Rewalidacja czasowa
export const revalidate = 3600; // Rewaliduj co godzinę

// Rewalidacja na żądanie
import { revalidatePath, revalidateTag } from 'next/cache';

export async function updatePost(id: string) {
  await db.post.update({ where: { id }, data: { ... } });

  // Rewaliduj konkretną ścieżkę
  revalidatePath('/blog');

  // Lub rewaliduj po tagu cache
  revalidateTag('posts');
}

// Tagowany fetch dla precyzyjnej kontroli
const posts = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'], revalidate: 60 }
});

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const posts = await db.post.findMany();
  return NextResponse.json(posts);
}

export async function POST(request: Request) {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return NextResponse.json(post, { status: 201 });
}

// Trasa dynamiczna: app/api/posts/[id]/route.ts
export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const post = await db.post.findUnique({ where: { id } });

  if (!post) {
    return NextResponse.json({ error: 'Nie znaleziono' }, { status: 404 });
  }

  return NextResponse.json(post);
}

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  // Walidacja danych wejściowych
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  if (!title || !content) {
    return { error: 'Tytuł i treść są wymagane' };
  }

  // Utwórz post
  const post = await db.post.create({
    data: { title, content, authorId: '...' }
  });

  // Rewaliduj cache
  revalidatePath('/blog');

  // Przekieruj do nowego posta
  redirect(`/blog/${post.slug}`);
}

// Użycie w Client Component
'use client'

import { useFormStatus } from 'react-dom';
import { createPost } from './actions';

export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Tworzenie...' : 'Utwórz post'}
    </button>
  );
}

'use client'

import { useOptimistic } from 'react';
import { addTodo } from './actions';

export function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: string) => [
      ...state,
      { id: Date.now(), text: newTodo, pending: true }
    ]
  );

  async function formAction(formData: FormData) {
    const text = formData.get('todo') as string;
    addOptimisticTodo(text); // Aktualizuj UI natychmiast
    await addTodo(text); // Zapisz na serwerze
  }

  return (
    <>
      <form action={formAction}>
        <input name="todo" />
        <button type="submit">Dodaj</button>
      </form>

      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} className={todo.pending ? 'opacity-50' : ''}>
            {todo.text}
          </li>
        ))}
      </ul>
    </>
  );
}

import Image from 'next/image';

// Automatyczna optymalizacja i lazy loading
<Image
  src="/hero.jpg"
  alt="Obraz hero"
  width={1200}
  height={600}
  priority // Ładuj obrazy powyżej zagięcia natychmiast
  placeholder="blur" // Pokaż rozmyte tło podczas ładowania
/>

// Responsywne obrazy
<Image
  src="/product.jpg"
  alt="Produkt"
  fill // Wypełnij kontener rodzica
  sizes="(max-width: 768px) 100vw, 50vw"
  className="object-cover"
/>

import dynamic from 'next/dynamic';

// Ładuj komponent leniwie ze stanem ładowania
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // Tylko po stronie klienta
});

// Ładuj bibliotekę zewnętrzną tylko gdy potrzeba
const DynamicModal = dynamic(() => import('./Modal'));

export default function Dashboard() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>
        Otwórz modal
      </button>

      {/* Kod modala ładowany tylko gdy otwarty */}
      {showModal && <DynamicModal onClose={() => setShowModal(false)} />}
    </>
  );
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImage }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}