Labels: frontend setup providers
Area: frontend/app/providers.tsx, frontend/app/layout.tsx
Difficulty: Intermediate
Description
TanStack Query requires a QueryClientProvider wrapping the app. Since Next.js 14 App Router server components cannot use React context directly, the provider must be a client component. The root layout.tsx also sets up global fonts, metadata, and the provider tree.
Acceptance Criteria
Technical Notes
- Creating
QueryClient inside useState (not at module level) prevents state sharing across requests in SSR
ReactQueryDevtools must be conditional on process.env.NODE_ENV === "development" to keep the production bundle lean
Labels:
frontendsetupprovidersArea:
frontend/app/providers.tsx,frontend/app/layout.tsxDifficulty: Intermediate
Description
TanStack Query requires a
QueryClientProviderwrapping the app. Since Next.js 14 App Router server components cannot use React context directly, the provider must be a client component. The rootlayout.tsxalso sets up global fonts, metadata, and the provider tree.Acceptance Criteria
frontend/app/providers.tsxas a"use client"component:QueryClientwithdefaultOptions: { queries: { staleTime: 60 * 1000, retry: 1 } }childrenin<QueryClientProvider client={queryClient}>and<ReactQueryDevtools initialIsOpen={false} />(dev only)useStateto ensureQueryClientis created once per component lifetimefrontend/app/layout.tsxas a server component:<html lang="en">with Geist Sans and Geist Mono variable fonts fromnext/font/googlemetadata: Metadatareading fromDEFAULT_SEOin@/lib/constants— setstitle,description,keywords,openGraph,twittercard meta<Providers>{children}</Providers>inside<body>suppressHydrationWarningon<body>anyTechnical Notes
QueryClientinsideuseState(not at module level) prevents state sharing across requests in SSRReactQueryDevtoolsmust be conditional onprocess.env.NODE_ENV === "development"to keep the production bundle lean