Interview Questions
App Router is newer, uses app directory, supports React Server Components, nested layouts, and improved routing patterns. Pages Router uses pages directory, is simpler but lacks some modern features like server components.
In App Router, create routes by adding page.js files in app directory. In Pages Router, add files to pages directory. File names become URL paths. For example, app/about/page.js becomes /about route.
Dynamic routes use square brackets for variable segments. Example: [id]/page.js creates dynamic route. Parameters accessible via params prop in page components. Supports catch-all routes using [...slug].
Use Link component for client-side navigation. Example: <Link href='/about'>About</Link>. Provides automatic code-splitting and prefetching. Supports dynamic routes and parameters.
useRouter hook provides access to router object for programmatic navigation, route information, and parameters. Example: const router = useRouter(); router.push('/route'). Available in client components.
Create nested directories in app or pages folder. Each level can have its own page.js or layout.js. Supports nested layouts and shared UI. URLs reflect directory structure.
Route groups use (groupName) syntax in app directory. Don't affect URL structure. Share layouts within groups. Organize routes logically. Support multiple groups.
Create not-found.js in app directory or 404.js in pages directory. Automatically shown for non-existent routes. Can be customized with own content and styling.
Parallel routing allows simultaneous loading of multiple pages in same layout using @folder convention. Supports independent loading states and error handling for each route.
Access route parameters through params prop in page components or searchParams for query strings. Available in both server and client components. Support type safety with TypeScript.
Route interceptors use (.) convention in App Router. Intercept routes while preserving context. Handle overlays and modals. Support soft navigation.
Create loading.js files for automatic loading UI. Support Suspense boundaries. Handle streaming and progressive rendering. Implement custom loading indicators.
Create middleware.ts in project root. Handle route protection, redirects, headers. Support conditional execution. Implement custom middleware logic.
Implement custom transition effects using hooks and components. Handle loading states. Support animation libraries. Manage transition state.
Use middleware or page components for authentication checks. Handle redirects. Support role-based access. Implement protection strategies.
Control prefetching with prefetch prop on Link component. Implement custom prefetch logic. Handle data preloading. Support performance optimization.
Configure rewrites in next.config.js. Handle URL transformation. Support pattern matching. Implement rewrite conditions.
Configure redirects in next.config.js or use redirect helper. Handle permanent/temporary redirects. Support redirect conditions. Implement redirect chains.
Optimize route performance through code splitting, prefetching, caching. Handle route priorities. Implement optimization strategies.
Implement i18n routing using middleware and configuration. Handle language detection. Support URL patterns. Implement locale switching.
Create complex dynamic routes with optional catches, multiple parameters. Handle route constraints. Support pattern matching. Implement route validation.
Implement state persistence across route changes. Handle navigation state. Support history management. Implement state restoration.
Create custom caching for route data. Handle cache invalidation. Support dynamic caching. Implement cache strategies.
Implement nested and parallel layouts. Handle layout groups. Support template inheritance. Implement layout patterns.
Create error boundaries for route segments. Handle error recovery. Support fallback content. Implement error reporting.
Implement advanced code splitting strategies. Handle dynamic imports. Support chunk optimization. Implement loading priorities.
Track route navigation and performance metrics. Handle analytics integration. Support custom events. Implement tracking strategies.
Implement comprehensive route testing. Handle navigation testing. Support integration tests. Implement test utilities.
Create detailed route documentation. Generate API documentation. Support example usage. Implement documentation updates.