What is the App Router in Next.js?
A newer, React Server Components–first routing model with nested layouts and server-first rendering
It coexists with the legacy Pages Router model.
What does File-Based Routing entail in Next.js?
Routes are created by folder/file structure; e.g., /app/dashboard/page.tsx becomes /dashboard
In App Router, route segments are folders, and page.tsx is the entry point for that segment.
What are Layouts in Next.js?
Wrap pages and persist across navigation; server components by default
Central to shared UI and data loading patterns.
What is the purpose of Route Groups in Next.js?
Organize routes without affecting the URL path
Helps share layouts or group related routes while keeping clean URLs.
What do Dynamic Routes use in their structure?
Bracket segments (e.g., /app/posts/[id]/page.tsx) to capture path params
Enables server-side data fetching per request or cached entry.
What is the difference between Catch-All and Optional Catch-All routes?
- Catch-All: Captures multiple segments
- Optional Catch-All: Matches parent route with no segments
Routing resolution is server-side and happens before rendering.
In the App Router, what is the default model for components?
Server components by default
They render on the server and can access server-only resources.
What does ‘use client’ indicate in a Next.js file?
The file runs in the browser and can use hooks like useState and useEffect
Client components create a boundary for client-bundled imports.
What are Server Actions in Next.js?
Let you call server-side functions from forms or client components without creating an API route
Execution occurs on the server, handling serialization and request wiring.
How does fetch() work in server components?
Can be automatically memoized and cached based on request and cache directives
This reduces client bundle size and improves performance.
What is the purpose of Caching and Revalidation in Next.js?
Caches fetched data and rendered output; allows for revalidation windows or on-demand invalidation
Primarily a server concern affecting response recomputation frequency.
What is the function of revalidatePath / revalidateTag?
Invalidate cached routes or tagged fetches after mutations
Enables patterns for updating content and refreshing cached views.
What does Streaming and Suspense improve in server rendering?
Improves time-to-first-byte and perceived performance by streaming HTML chunks
Suspense boundaries define what can stream early vs what waits for data.
What is the role of loading.tsx in Next.js?
Provides a Suspense fallback during navigation or server rendering
Rendered while the server produces the segment’s payload.
What does error.tsx handle?
Acts as a client component error boundary for a route segment
Displays recoverable UI when rendering fails, often with server-side logs.
What does not-found.tsx render?
Renders when notFound() is invoked or a route can’t be resolved
The decision is typically server-side.
What do route.ts files define?
HTTP endpoints (GET/POST/etc.) within the App Router
They run on the server or edge, replacing traditional API routes.
What is the function of middleware.ts?
Runs before a request is completed; can rewrite, redirect, set headers, or enforce auth
Ideal for lightweight request-level logic.
What does next/navigation provide?
Handles navigation in App Router with useRouter, usePathname, and redirect()
Hook-based navigation is client-side; redirect() can be server-side.
What does the <link></link> component enable?
Client-side navigation and prefetching route data in the background
Rendering occurs client-side on interaction.
What does the Metadata API generate?
<title>, Open Graph tags, and other head metadata per route
## Footnote
This is server-side computation integrated into the rendering pipeline.
</title>
What does next/image do?
Serves responsive images, lazy loads by default, and optimizes formats and sizes
Optimization happens server-side or via an external loader.
What is the purpose of next/font?
Loads and subsets fonts with automatic CSS injection and improved performance
Reduces layout shift and is largely build/server-managed.
What is the distinction between server-only and public-prefixed Environment Variables?
Variables without a public prefix are server-only; public-prefixed variables are exposed to the client bundle
This boundary keeps secrets out of the browser.
