Pytania rekrutacyjne Next.js z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Next.js · Junior

1. Czym jest kolokacja (colocation) w App Router?

   Poprawna odpowiedź: Trzymaniem komponentów i narzędzi obok tras wewnątrz app/

   Pliki w app/ stają się publiczne tylko przez page lub route. Dlatego komponenty, hooki, style i testy trasy można bezpiecznie trzymać obok jej page.tsx. Dla przejrzystości używa się prywatnych folderów _components lub trzyma wspólny kod w src/ poza app.

2. Czym jest Next.js?

   Poprawna odpowiedź: Frameworkiem React z routingiem, renderowaniem serwerowym i optymalizacjami

   Next.js jest zbudowany na React i dodaje to, czego brakuje bibliotece: routing oparty na plikach, renderowanie serwerowe i statyczne, Server Components i Server Functions, optymalizację obrazków i fontów, budowanie i wdrażanie. Komponenty pisze się w zwykłym React.

3. Jak utworzyć stronę pod adresem /about w App Router?

   Poprawna odpowiedź: Utworzyć app/about/page.tsx z komponentem eksportowanym domyślnie

   Trasę wyznacza folder, a plik page.tsx (lub .js) czyni ją publiczną stroną. Bez page folder jest niedostępny pod adresem URL - można w nim trzymać komponenty (kolokacja). W next.config nie ma konfiguracji tras. Plik pages/about.tsx to konwencja starego Pages Router.

4. Czym layout.tsx różni się od page.tsx?

   Poprawna odpowiedź: Layout opakowuje strony i zachowuje stan podczas nawigacji

   Layout dostaje children i zawiera UI wspólny dla zagnieżdżonych tras (nagłówek, sidebar). Przy przejściach między stronami potomnymi layout nie montuje się ponownie: jego stan i DOM są zachowane, a renderuje się tylko zmieniona część. Zarówno layout, jak i strona to domyślnie Server Components.

Next.js · Middle

1. Czym jest Server Function (Server Action) w Next.js?

   Poprawna odpowiedź: Funkcją async oznaczoną 'use server', którą można wywołać z klienta

   Dyrektywa 'use server' zamienia funkcję w serwerową, a Next.js tworzy dla niej endpoint. Można ją przekazać do <form action> lub wywołać z klienckiego handlera. Wywołanie to żądanie POST. Server Actions to Server Functions używane do mutacji, często z późniejszą rewalidacją cache.

2. Co daje <form action={createPost}> z Server Action w porównaniu z onSubmit + fetch?

   Poprawna odpowiedź: Formularz działa nawet przed załadowaniem JS (progressive enhancement), bez trasy API

   Server Action dostaje FormData bezpośrednio, więc nie potrzebujesz Route Handlera ani klienckiego fetch. Jeśli formularz renderuje komponent serwerowy, wysyła się nawet przed hydratacją. Walidację nadal piszesz sam (np. przez Zod). Stan wysyłania pokazuje się przez useActionState lub useFormStatus.

3. Co robi revalidatePath('/blog') po mutacji?

   Poprawna odpowiedź: Oznacza zcache'owane dane i UI trasy /blog jako nieaktualne

   Następne żądanie do /blog dostanie świeże dane. Przy wywołaniu w Server Action zaktualizowany UI wraca od razu w odpowiedzi akcji. Do punktowego unieważniania danych używanych na wielu stronach wygodniejsze są tagi (cacheTag + revalidateTag/updateTag).

4. Czym updateTag różni się od revalidateTag w Next.js 16?

   Poprawna odpowiedź: updateTag od razu unieważnia cache (read-your-writes), revalidateTag to stale-while-revalidate

   updateTag jest dostępny tylko w Server Actions: użytkownik, który zmienił dane, od razu widzi zmiany. revalidateTag(tag, 'max') oznacza dane jako nieaktualne: odwiedzający widzą starą wersję, a nowa jest przygotowywana w tle - dobre dla blogów i katalogów. W Next.js 16 revalidateTag wymaga drugiego argumentu - profilu cacheLife.

Next.js · Senior

1. Czym jest RSC payload?

   Poprawna odpowiedź: Zserializowanym wynikiem renderu Server Components z referencjami do klienckich

   Payload zawiera wyrenderowane drzewo komponentów serwerowych, miejsca na komponenty klienckie z referencjami do ich chunków JS oraz ich propsy. Przy pierwszym ładowaniu jest osadzony w HTML (dla hydratacji); przy nawigacji po stronie klienta pobiera się go osobno. Kod komponentów serwerowych nigdy nie trafia do przeglądarki.

2. Co dzieje się przy nawigacji po stronie klienta przez <Link> w App Router?

   Poprawna odpowiedź: Ładowany jest RSC payload nowego segmentu, a React aktualizuje tylko zmienione części

   Router pobiera payload (lub bierze wcześniej załadowany z klienckiego cache) i uzgadnia go z bieżącym drzewem: wspólne layouty są zachowane, a stan kliencki nie przepada. Jeśli segment wciąż się ładuje, pokazywany jest loading.tsx. Nie ma pełnego przeładowania dokumentu.

3. Przy cacheComponents: true dev overlay pokazuje „blocking route”. Co to oznacza?

   Poprawna odpowiedź: Niezcache'owane dane są czytane poza <Suspense> i blokują statyczną powłokę

   Przy Cache Components każda asynchroniczna praca musi być albo zcache'owana przez 'use cache' (trafia do powłoki), albo opakowana w <Suspense> (strumieniuje się w czasie żądania). Inaczej cała strona czekałaby na dane. Ta zasada jest sprawdzana w trybie deweloperskim i podczas budowania.

4. Czym 'use cache: remote' różni się od 'use cache'?

   Poprawna odpowiedź: Przechowuje wynik w zdalnym handlerze wspólnym dla wszystkich instancji, kosztem opóźnienia sieci

   Zwykłe 'use cache' domyślnie przechowuje wpisy w pamięci procesu (LRU), więc w serverless i przy wielu instancjach cache jest krótkotrwały i niewspółdzielony. remote używa handlera z cacheHandlers (Redis, KV platformy) - pewniej, ale drożej. Dostęp do danych żądania daje 'use cache: private', a nie remote.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.