Czym jest Next.js? Prosty przewodnik dla twórców aplikacji

Next.js to framework do budowania stron i aplikacji webowych z React. React daje Ci elementy budulcowe interfejsu — przyciski, formularze, listy. Next.js dodaje resztę strony internetowej wokół nich: strony i adresy URL, renderowanie stron na serwerze, tak by dotarły gotowe do odczytu, ładowanie danych oraz uruchamianie kodu backendu w tym samym projekcie. To oprogramowanie open source, tworzone przez firmę Vercel, i jeden z najczęściej używanych sposobów budowania stron w React.

Dlaczego Next.js ma znaczenie, gdy budujesz z AI

Kiedy opisujesz aplikację narzędziu do budowania z AI, musi ono wybrać techniczne podstawy. Ten wybór wpływa na rzeczy, na których Ci zależy później:

• Widoczność w wyszukiwarkach. Publiczna strona, która ma być widoczna w Google, korzysta na wysyłaniu prawdziwego HTML, co Next.js robi dobrze.
• Gdzie działa backend. Next.js pozwala trzymać strony frontendu i kod serwera (np. „zapisz ten formularz” albo „wywołaj API płatności”) w jednym projekcie.
• Hosting. Aplikacja Next.js z funkcjami serwerowymi potrzebuje serwera, na którym działa, podczas gdy zwykła aplikacja Vite może być serwowana jako pliki statyczne.

Mythex zaczyna nowe projekty domyślnie od Vite + React + TypeScript + Tailwind, a Next.js używa, gdy o to poprosisz — wystarczy „Use Next.js” w pierwszym poleceniu (jak wybierana jest technologia). Warto więc wiedzieć, kiedy to się opłaca.

Codzienna analogia

Jeśli React to pudełko wysokiej jakości klocków Lego, Next.js to zestaw Lego z już dołączoną instrukcją, płytą bazową i elementami drzwi oraz instalacji.

Ten sam dom mógłbyś zbudować z luźnych klocków — musiałbyś tylko sam zdecydować, jak połączyć pokoje, gdzie są drzwi wejściowe i jak doprowadzić wodę. Next.js podejmuje te decyzje za Ciebie w standardowy sposób, więc każdy projekt Next.js jest ułożony podobnie i nowy programista (albo AI) szybko się w nim odnajdzie.

Co Next.js dodaje do React

Next.js ma dwa sposoby organizacji stron. App Router (folder app/) jest nowszy i obsługuje Server Components. Pages Router (folder pages/) jest pierwotny i nadal wspierany. Nowe projekty zwykle używają App Router. Jeśli kod od narzędzia AI lub poradnik wyglądają obco, to często dlatego.

Przykład: publiczny katalog kawiarni w mieście

Wyobraź sobie stronę z listą kawiarni w Twoim mieście, z podstroną dla każdej, która ma pojawiać się w wynikach wyszukiwania.

Strona Next.js dla jednej kawiarni mogłaby wyglądać mniej więcej tak:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Co się dzieje, gdy ktoś (lub Google) odwiedza /cafes/blue-door:

1. Next.js dopasowuje adres URL do tego pliku. Folder [slug] oznacza „dowolna kawiarnia”.
2. Komponent działa na serwerze, odczytuje kawiarnię z bazy danych i buduje HTML.
3. Przeglądarka dostaje kompletną stronę z nazwą i adresem kawiarni już w środku — bez czekania, aż JavaScript pobierze dane.

W zwykłej aplikacji React po stronie klienta przeglądarka najpierw dostałaby prawie pustą stronę, potem pobrałaby JavaScript, następnie dane kawiarni, i dopiero wtedy by je pokazała. Wyszukiwarki często sobie z tym radzą, ale w pełni wygenerowana strona jest pewniejsza. Zobacz SEO dla stron zbudowanych z AI.

Porównaj to z panelem tylko dla personelu, za logowaniem: wyszukiwarki i tak go nie zobaczą, więc renderowanie na serwerze daje mniej korzyści, a prostsza aplikacja Vite jest często lepszym wyborem.

Kluczowe pojęcia

Typowe nieporozumienia

• „Next.js zastępuje React”. Nie. Używa React. Twoje komponenty to nadal komponenty React.
• „Next.js zawsze jest lepszym wyborem”. Jest bardziej zaawansowany, ale też wymaga więcej zrozumienia. Renderowanie na serwerze, cache i różnica między kodem serwera a klienta to częste źródła mylących błędów. Dla aplikacji, która jest głównie za logowaniem, zwykła aplikacja React bywa prostsza.
• „Next.js działa tylko na Vercel”. Jest open source i może działać na dowolnym serwerze Node.js lub w kontenerze Docker. Pełny eksport statyczny jest możliwy, jeśli nie używasz funkcji serwerowych.
• „Użycie Next.js gwarantuje dobre SEO”. Ułatwia odczytywanie stron. Pozycje w wynikach nadal zależą od tytułów, treści, szybkości i linków.
• „Kod serwera w Next.js jest automatycznie prywatny”. Kod przeznaczony dla klienta trafia do przeglądarki. Sekrety muszą pozostać w kodzie działającym tylko na serwerze i w zmiennych środowiskowych.

O co poprosić narzędzie do budowania z AI

• „Użyj Next.js z App Router” — w pierwszym poleceniu, jeśli tego chcesz.
• „Które strony są renderowane na serwerze, które są statyczne, a które działają w przeglądarce — i dlaczego?”
• „Publiczne strony marketingowe i katalogowe ustaw jako renderowane na serwerze lub statyczne, z poprawnymi tytułami i opisami.”
• „Trzymaj klucze API w kodzie działającym tylko na serwerze i w zmiennych środowiskowych. Pokaż mi, gdzie każdy z nich jest odczytywany.”
• „Czy ta aplikacja potrzebuje Next.js, czy dla tego, co budujemy, prostsza będzie aplikacja Vite + React?”

Next.js w Mythex

Mythex używa domyślnie Vite + React + TypeScript + Tailwind i przechodzi na Next.js, gdy o to poprosisz w poleceniu; wskazanie tego od razu oszczędza kredyty w porównaniu ze zmianą później. Aplikację widzisz w żywym podglądzie (Preview), a Publish wdraża ją pod żywy adres URL bez konfigurowania hostingu samodzielnie. Dokumentacja Mythex zwraca uwagę, że aplikacje single-page renderowane po stronie klienta mają słabsze SEO niż strony renderowane na serwerze lub statyczne, więc przy stronie marketingowej, na której zależy na wyszukiwarce, warto powiedzieć o tym od razu (SEO dla Twojej aplikacji).

Pytania