5 exercises on advanced Next.js App Router features — server actions, loading.tsx, and route patterns.
0 / 5 completed
1 / 5
What are Server Actions in the Next.js App Router?
Server Actions: you define an async function with "use server" at the top. Next.js wires it to an endpoint automatically. Forms can post directly to them and React Server Components can call them without any manual API route setup.
2 / 5
What is the purpose of a loading.tsx file in the App Router?
loading.tsx: placing this file in a route segment automatically wraps the page in <Suspense>. During navigation to that route, Next.js streams the loading UI instantly while the server fetches data and renders the full page.
3 / 5
What are parallel routes in the Next.js App Router?
Parallel routes: you create folders like @modal or @sidebar inside a layout. The layout receives them as props and renders them simultaneously, enabling independent loading states and conditional rendering for dashboards or modals.
4 / 5
What do intercepting routes enable in the App Router?
Intercepting routes: clicking a photo shows it in a modal overlay without leaving the gallery (intercepted route), but opening the URL directly shows the full photo page. The (..) convention matches routes at different levels.
5 / 5
What do route groups (parenthesised folders like (marketing)) do?
Route groups:(marketing) and (shop) can each have their own layout.tsx but the folder name is omitted from the URL. Useful for organising routes into sections with different layouts without affecting URL structure.