Next.js Routing & Navigation
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
1What is the syntax to create a dynamic route in Next.js App Router?
What is the syntax to create a dynamic route in Next.js App Router?
Answer
Dynamic routes in Next.js App Router use square brackets to define variable URL segments. For example, [id] creates a route that captures any value at that position in the URL. This value is then accessible via the page parameters. This convention allows creating generic pages that adapt to different content without creating separate files for each variation.
2What is the primary role of the Link component in Next.js?
What is the primary role of the Link component in Next.js?
Answer
The Link component is the recommended navigation element in Next.js. It automatically prefetches visible routes in the viewport and enables client-side navigation without full page reloads. Unlike a standard a tag, Link maintains application state and provides smooth transitions between pages, significantly improving user experience and performance.
3How to access dynamic route parameters in a Server Component?
How to access dynamic route parameters in a Server Component?
Answer
In Next.js App Router, Server Components automatically receive a params object containing the dynamic URL segments. This object is passed as a prop to the component function. For example, for a [id] route, params.id will contain the captured value. This approach simplifies parameter access without needing client-side hooks.
What is the main advantage of route groups in Next.js?
What is the difference between useRouter and usePathname?
+19 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free