Next.js-Interviews drehen sich um Rendering-Strategien, den App Router, Server Components und Caching — die Teile, die Next von reinem React unterscheiden. Unten findest du die häufigsten Fragen mit Musterantworten. Junior: Grundlagentheorie, Definitionen und einfache Praxisfälle.
Server Components rendern auf dem Server, schicken ihren Code nie an den Browser und können eine Datenbank direkt lesen. Client Components laufen im Browser und sind das, was du für State, Effects und Event-Handler brauchst. Alles ist eine Server Component, bis du 'use client' schreibst, und diese Direktive markiert eine Grenze — alles, was darunter importiert wird, wird ebenfalls Client-Code.
Es markiert die Grenze zwischen Server- und Client-Code, nicht eine einzelne Datei. Setzt du es an den Anfang einer Komponente, wird diese Komponente und alles, was sie importiert, für den Browser gebündelt. Deshalb gehört es so tief wie möglich in den Baum — ein 'use client' in einem Layout zieht das gesamte Teilbaum-Bundle mit hinein.
Der Pages Router legt eine Route als Datei an und lädt Daten mit getServerSideProps oder getStaticProps. Der App Router nutzt Ordner mit page.tsx, unterstützt verschachtelte Layouts, die bei Navigation nicht neu rendern, und lädt Daten mit async Components. Neue Projekte nutzen den App Router; Pages existiert weiter, weil Migrationen Zeit brauchen.
page.tsx ist der eigentliche Inhalt der Route. layout.tsx umschließt ihn und alles darunter Verschachtelte und rendert entscheidenderweise nicht neu, wenn man zwischen seinen Kindern navigiert — deshalb gehören Navigation und Sidebars dorthin. State in einem Layout übersteht die Navigation, State in einer Page nicht.
Mach die Server Component async und awaite die Daten direkt darin — kein Hook, kein Effect, kein Loading-State in der Komponente selbst. Next rendert sie, sobald sich das Promise auflöst. Eine loading.tsx neben der Page liefert währenddessen den Fallback.
Link navigiert client-seitig, hält das Layout gemountet und prefetcht die Route, sobald sie in den Viewport kommt. Ein einfaches <a> lädt die Seite komplett neu und wirft den React-Baum samt State weg. Einen Anchor für interne Navigation zu nutzen ist der schnellste Weg, eine schnelle App langsam wirken zu lassen.
Im echten Interview sprichst du unter Druck. Cam stellt genau diese Fragen, bewertet jede Antwort und zeigt dir genau, was du verbessern musst.
Junior Next.js-Interview üben →