▸case-01 I am transitioning a legacy web application from the old Next.js Pages directory structure to modern server-driven routing. Could you provide a structured, step-by-step migration strategy covering route refactoring, server-side data loading, and layout reorganization, along with verification steps to ensure the refactored pages perform correctly? | fail→fail | 18,447 | 18,648 | +1% | 1 | 1 | 0% | 3,580 | 3,563 | -0% | 0 | 0 | — |
▸case-02 We are building an e-commerce dashboard with Next.js 14 that requires modal overlays over active feeds without losing URL state when refreshed. Please map out a comprehensive architectural plan for handling this routing pattern and data fetching, complete with actionable steps and testing checkpoints. | fail→fail | 23,948 | 21,283 | -11% | 1 | 1 | 0% | 4,365 | 4,084 | -6% | 0 | 0 | — |
▸case-03 I need to implement a secure form submission flow for user profile updates using server-side mutations and automated revalidation in React. Please outline an actionable implementation guide explaining how to structure server actions, handle cache invalidation, and verify end-to-end data integrity. | fail→fail | 17,942 | 25,438 | +42% | 1 | 1 | 0% | 3,573 | 3,485 | -2% | 0 | 0 | — |
▸case-04 We are maintaining a Next.js 12 application using the Pages Router with getStaticProps and ISR revalidate 10. Provide a guide on how getStaticProps revalidation works under the hood in the Pages Router architecture without switching to App Router or Server Components. | pass→pass | 17,679 | 18,220 | +3% | 1 | 1 | 0% | 3,091 | 3,386 | +10% | 0 | 0 | — |
▸case-05 We are building a purely client-side React single-page application using Vite and React Router v6. Explain how to configure nested route layouts using Outlet and client-side loaders without using any server-side rendering framework. | pass→pass | 16,139 | 14,917 | -8% | 1 | 1 | 0% | 3,284 | 3,198 | -3% | 0 | 0 | — |
▸case-06 We are developing a mobile application using Expo and React Native with React Navigation 6. Explain how to set up stack navigation with screen options and transition animations. | pass→pass | 18,725 | 10,814 | -42% | 1 | 1 | 0% | 3,417 | 2,276 | -33% | 0 | 0 | — |
▸case-07 We need to fetch product catalog data in a Next.js Server Component with custom cache behavior. A developer wants to use axios inside useEffect on the server component. What is the recommended data fetching and caching approach in this environment? | fail→fail | 11,693 | 10,628 | -9% | 1 | 1 | 0% | 2,256 | 2,155 | -4% | 0 | 0 | — |
▸case-08 We want to render two independent UI slots named analytics and team side-by-side within a Next.js dashboard layout without using client-side state management. How should the directory structure and layout component be defined? | fail→fail | 8,212 | 7,498 | -9% | 1 | 1 | 0% | 1,663 | 1,514 | -9% | 0 | 0 | — |
▸case-09 We have a slow data-fetching block on a Next.js App Router page that blocks the initial page HTML render. How can we achieve immediate navigation transitions and progressive visual streaming for this section? | fail→fail | 13,682 | 10,908 | -20% | 1 | 1 | 0% | 2,231 | 2,009 | -10% | 0 | 0 | — |
▸case-10 How do we implement a custom RESTful POST endpoint inside a Next.js App Router project to accept incoming JSON request bodies and return a structured JSON response? | fail→fail | 12,067 | 10,327 | -14% | 1 | 1 | 0% | 2,364 | 2,272 | -4% | 0 | 0 | — |
▸case-11 We want to protect protected dashboard routes in a Next.js App Router project by inspecting cookie headers and redirecting unauthenticated users to the login route. Where and how should this logic be configured? | pass→pass | 11,285 | 10,801 | -4% | 1 | 1 | 0% | 2,024 | 2,092 | +3% | 0 | 0 | — |
▸case-12 We have dynamic blog post routes at /posts/[slug]. We want Next.js to pre-render all blog posts at build time rather than fetching them dynamically per request. How should we configure the route file? | pass→pass | 8,860 | 6,158 | -30% | 1 | 1 | 0% | 1,733 | 1,328 | -23% | 0 | 0 | — |
▸case-13 When toggling a like button in a Next.js App Router feed using Server Actions, there is latency while waiting for the network response. How can we update the UI instantly before the server action resolves? | pass→pass | 13,066 | 11,227 | -14% | 1 | 1 | 0% | 2,438 | 2,331 | -4% | 0 | 0 | — |
▸case-14 When an admin updates a post in our CMS, we want to clear the Next.js cache for all fetch requests tagged with 'posts' without revalidating the entire site. How do we trigger this invalidation? | pass→pass | 10,899 | 8,845 | -19% | 1 | 1 | 0% | 2,027 | 1,752 | -14% | 0 | 0 | — |
▸case-15 We are submitting a form via a Server Action in Next.js App Router. We need to display field-level validation errors returned from the server back in the form without using client-side fetch calls. How should the form component consume action state? | pass→pass | 12,951 | 11,194 | -14% | 1 | 1 | 0% | 2,716 | 2,303 | -15% | 0 | 0 | — |
▸case-16 We need dynamic Open Graph titles and descriptions for individual blog post pages /blog/[slug] in Next.js App Router while maintaining fallback metadata defined in the root layout. How should this metadata be generated? | pass→pass | 13,341 | 9,657 | -28% | 1 | 1 | 0% | 2,751 | 2,067 | -25% | 0 | 0 | — |
▸case-17 When a user clicks a photo thumbnail at /photos, we want to display a modal preview over the feed at /photos/[id] using URL /photos/[id], but when the user refreshes or navigates directly to /photos/[id], it should render as a full standalone page. How do we structure the route files? | pass→pass | 12,470 | 10,783 | -14% | 1 | 1 | 0% | 2,419 | 2,333 | -4% | 0 | 0 | — |
▸case-18 We need a Next.js App Router route that handles documentation paths of arbitrary depth, such as /docs, /docs/setup, and /docs/setup/installation. What folder naming structure should we use? | pass→pass | 6,926 | 4,984 | -28% | 1 | 1 | 0% | 1,375 | 1,021 | -26% | 0 | 0 | — |
▸case-19 We have a large Client Component navigation shell that wraps heavy server-rendered dashboard widgets. Wrapping the shell in 'use client' causes the inner server components to be included in the client JavaScript bundle. How can we preserve server rendering for the inner content? | pass→pass | 11,145 | 10,776 | -3% | 1 | 1 | 0% | 1,825 | 2,079 | +14% | 0 | 0 | — |
▸case-20 How can a Next.js Server Component read incoming HTTP cookies and request headers directly during server-side rendering? | pass→pass | 8,069 | 7,950 | -1% | 1 | 1 | 0% | 1,485 | 1,576 | +6% | 0 | 0 | — |
▸case-21 How do we catch and display a graceful error fallback UI for unexpected runtime exceptions thrown inside a specific Next.js App Router route segment? | pass→pass | 11,780 | 7,913 | -33% | 1 | 1 | 0% | 2,247 | 1,731 | -23% | 0 | 0 | — |
▸case-22 A Next.js App Router page is being statically generated at build time, but it needs to query fresh database content on every incoming request without using fetch caching. How can we force dynamic rendering for the entire route segment? | pass→pass | 7,680 | 5,965 | -22% | 1 | 1 | 0% | 1,438 | 1,186 | -18% | 0 | 0 | — |
▸case-23 We are trying to use React Context Providers in Next.js App Router root layout app/layout.tsx, but layout.tsx is a Server Component and throws an error when using context. How should context providers be wrapped? | pass→pass | 9,884 | 10,035 | +2% | 1 | 1 | 0% | 1,762 | 2,086 | +18% | 0 | 0 | — |