# Next.js Fundamentals (React / Next.js)

> App Router, Server Components, Client Components, bestandsgebaseerde routing, layouts, pagina's

- 25 gespreksvragen
- Mid-Level
- [Gespreksvragen: React / Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen.md)

## 1. Wat is de App Router in Next.js?

**Antwoord**

De App Router is het nieuwe routingsysteem in Next.js 13+ gebaseerd op de app/-directory. Het vervangt de Pages Router en introduceert standaard Server Components, gedeelde layouts en een flexibeler routingmodel met bestandsconventies zoals page.tsx, layout.tsx en loading.tsx.

## 2. Hoe maak je een /about-route aan in de App Router?

**Antwoord**

In de App Router vertegenwoordigt elke map een routesegment. Om /about te maken, maak app/about/page.tsx aan. Het bestand page.tsx is vereist om een route openbaar toegankelijk te maken. Zonder dit bestand is de map slechts een padsegment zonder weergegeven pagina.

## 3. Wat is het standaardgedrag van componenten in de App Router?

**Antwoord**

In de App Router zijn alle componenten standaard Server Components. Ze worden alleen op de server uitgevoerd en sturen geen JavaScript naar de client, wat de prestaties verbetert. Om clientfuncties (hooks, events) te gebruiken, moet de 'use client'-richtlijn bovenaan het bestand worden toegevoegd.

## Nog 22 vragen beschikbaar

- Hoe maak je een dynamische route /posts/[id] aan in de App Router?
- Waarvoor dient het bestand layout.tsx in de App Router?

Meld je gratis aan: https://sharpskill.dev/nl/login

## Andere React / Next.js-sollicitatieonderwerpen

- [JavaScript-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/javascript-essentials.md): 25 vragen, Junior
- [React-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-fundamentals.md): 20 vragen, Junior
- [React Hooks](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-hooks.md): 22 vragen, Junior
- [Componentlevenscyclus](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/component-lifecycle.md): 18 vragen, Junior
- [React Router](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-router.md): 20 vragen, Junior
- [Statusbeheer met Context](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/state-management-context.md): 18 vragen, Junior
- [Formulieren & Controlled Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/forms-controlled-components.md): 20 vragen, Mid-Level
- [Gegevens ophalen & API](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/fetching-data-api.md): 20 vragen, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-query-tanstack.md): 20 vragen, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/styling-css-in-js.md): 18 vragen, Mid-Level
- [TypeScript met React](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/typescript-react.md): 20 vragen, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-data-fetching.md): 24 vragen, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-server-actions.md): 20 vragen, Mid-Level
- [Routing & Navigatie in Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-routing-navigation.md): 22 vragen, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-api-routes.md): 20 vragen, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-metadata-seo.md): 18 vragen, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-middleware-auth.md): 22 vragen, Mid-Level
- [React Testen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-testing.md): 20 vragen, Mid-Level
- [Zustand State Management](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/zustand-state-management.md): 18 vragen, Mid-Level
- [React Performance-optimalisatie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-performance-optimization.md): 22 vragen, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-error-boundaries.md): 18 vragen, Senior
- [Advanced React Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/advanced-react-patterns.md): 20 vragen, Senior
- [Geavanceerde Next.js-functies](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-advanced-features.md): 24 vragen, Senior
- [Next.js Deployment & Productie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-deployment-production.md): 20 vragen, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-architecture-patterns.md): 22 vragen, Senior
- [React Server Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-server-components.md): 26 vragen, Senior
- [Next.js Internationalisering](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-internationalization.md): 20 vragen, Senior
- [React Beveiliging & Best Practices](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-security-best-practices.md): 22 vragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-fundamentals