Common v0 Issues

Your Next.js middleware.ts file doesn't execute on certain routes, or protected route redirection fails. Users can access protected pages without authentication or middleware logic doesn't run.

Middleware fails to execute when the matcher configuration is incorrect, middleware isn't properly deployed, or there are conflicts with other routing mechanisms.

Your tRPC procedure throws 'undefined' or 'procedure not found' errors when called from the client. The procedure is defined on the backend but client-side calls fail.

tRPC procedures become inaccessible when the router isn't properly merged, procedures aren't exported correctly, or client initialization doesn't match server setup.

Your Next.js server action defined with 'use server' directive isn't callable from client components, or throws 'function not defined' errors. Forms and onClick handlers can't invoke server actions.

Server actions fail when not properly imported, 'use server' is misplaced, or there's a server-client boundary violation in how the action is used.

Your Next.js API route returns 404 when making POST, PUT, DELETE requests, even though the route file exists. GET requests might work but other methods don't.

API routes fail when the handler function doesn't export HTTP method handlers, file structure doesn't match App Router conventions, or HTTP method routing is incorrect.

Your Next.js fetch requests cache data too aggressively, serving stale information even after cache revalidation. Updated data doesn't appear, users see outdated content.

Fetch caching issues occur when cache options aren't set correctly, revalidate tags aren't applied, or browser cache conflicts with Next.js caching.

When creating or updating Stripe checkout sessions, the session returned has different data than what was sent, or retrieval shows stale data. Session configuration doesn't match expected values.

Checkout session mismatches occur when session parameters are modified by Stripe, caching isn't handled, or the wrong session is retrieved.

Your Stripe webhook handler fails to verify webhook signatures, rejecting legitimate webhook requests. Stripe events aren't processed, causing payment or subscription issues.

Webhook signature verification fails when the signing secret is incorrect, request body is modified, or verification code is wrong.

Your NextAuth.js application enters an infinite redirect loop when users attempt to authenticate. Users are redirected back to the login/callback page repeatedly, preventing successful authentication completion.

This typically occurs after the OAuth provider returns the authorization code, and NextAuth attempts to redirect the user to the callback URL specified in your configuration.

When integrating both Clerk and NextAuth.js in the same Next.js application, authentication fails due to conflicting middleware and session headers. Users may see authentication errors or be unable to access protected routes.

This conflict arises because both libraries attempt to manage authentication state and middleware routing, causing session validation to fail or user context to be undefined.

Your protected routes in Next.js 13+ App Router show 'undefined session' errors when accessed via server components. The getServerSession() function returns null even after successful authentication, preventing access to protected pages.

This occurs because session validation happens at the wrong layer or the request context isn't properly propagated through server components.

Your Clerk integration fails with 'Missing CLERK_SECRET_KEY' or 'Missing CLERK_PUBLISHABLE_KEY' errors. The application won't start or authentication features are unavailable.

Clerk requires both public and secret keys properly set in your environment variables for client and server-side operations.

NextAuth sessions don't persist after page refresh or browser restart. Users are logged out when they refresh, despite having valid tokens. Session data is lost.

Session persistence fails when session adapter isn't configured, JWT expires immediately, or cookie settings don't allow persistence.

Drizzle type generation fails with 'introspection failed' or 'unable to connect' errors when running drizzle-kit push or drizzle-kit generate. TypeScript errors appear because schema types aren't generated.

This happens when Drizzle cannot reach the database to introspect or generate types from your schema definition.

After modifying your Prisma schema, migrations fail with 'Migration conflict' or 'Schema divergence detected' errors. Your database schema doesn't match the generated migrations.

This typically occurs when multiple developers create conflicting migrations or the local migration history doesn't match the database state.

Supabase RLS policies deny access with 403 Forbidden errors even for authenticated users. Data queries fail due to row-level security policies, preventing legitimate data access.

RLS 403 errors happen when policies are too restrictive, don't account for user roles, or authentication context isn't passed to queries.

Your Supabase realtime subscription doesn't receive updates. Data changes in the database aren't reflected in real-time on connected clients. Subscription listeners don't fire when expected.

Realtime subscriptions fail when realtimeUrl isn't configured, subscriptions aren't properly cleaned up, or database changes bypass triggers (e.g., direct SQL without replication).

Your Prisma database queries timeout with 'Can't reach database server' or connection pool exhaustion errors. Application queries fail or hang indefinitely.

Connection timeouts happen when Prisma cannot establish a connection to the database within the configured time limit, typically due to network issues, database overload, or misconfigured connection parameters.

Your Neon database connections timeout in production with 'connection pool exhausted' or 'query timeout' errors. Queries that work in development fail under production load.

Neon's serverless architecture can cause connection issues under high concurrency or when connection pools aren't properly configured.

Your application cannot connect to Vercel Postgres because the connection string is missing, invalid, or not properly loaded from environment variables. Database operations fail immediately.

Vercel Postgres provides connection strings that must be correctly configured in your Next.js project to enable database access.

Your Vercel Edge function or middleware throws 'Cannot find module' or 'Unsupported module' errors in production, even though local development works. Edge runtime has restricted module access.

Edge runtime module failures occur when using Node.js-only modules (fs, path, crypto) or packages incompatible with edge environments (database drivers, heavy dependencies).

Your Vercel deployment fails with 'Static generation failed' or 'unable to generate static page' errors during build. Pages with dynamic content can't be statically generated, blocking deployment.

Static generation failures occur when pages have dynamic content but aren't configured for On-Demand ISR or dynamic rendering, or when data fetching errors during build prevent page generation.

Your application builds successfully but environment variables aren't available at runtime in Vercel. Features depending on env vars fail in production, though they work in local development.

Environment variables don't load in Vercel when they're not properly configured in project settings, use incorrect naming conventions, or are set for wrong deployment environments.

Your Vercel serverless functions timeout before completing (504 Gateway Timeout), cutting off long-running operations like data processing, report generation, or large data fetches.

Timeouts occur when functions exceed Vercel's limits (10 seconds for Hobby, 60 seconds for Pro), or when operations are inherently slow.

Next.js Image component caching isn't working properly. Updated images still show old versions, or image optimization isn't triggered when source images change. Users see stale content.

Image caching issues occur when cache headers aren't properly configured, image paths change unexpectedly, or Vercel's Image Optimization API cache isn't invalidated.

Your application loads slowly because the database receives hundreds of queries for what should be done in a few. The N+1 query problem: fetching a list of items, then one query per item to fetch related data.

N+1 queries happen when data fetching doesn't use joins or batch queries, instead fetching parent items then querying for each child.

Your application uses CSS-in-JS libraries that create runtime overhead, increasing JavaScript bundle size and slowing page renders. First Contentful Paint (FCP) is delayed.

CSS-in-JS libraries (styled-components, Emotion) inject styles at runtime, adding JavaScript execution overhead during page load.

Your Next.js application has excessive JavaScript bundle size, causing slow page loads, poor Core Web Vitals scores, and potential Vercel function timeout issues. Build analysis shows bloated chunks.

Bundle size grows from unused dependencies, large libraries, lack of code splitting, or importing entire libraries instead of specific utilities.

Your page load times are slow because server components take too long to render and return HTML to the browser. Time to First Byte (TTFB) is high, causing users to see blank screens for extended periods.

Server component slowness usually stems from synchronous data fetching, N+1 query patterns, or waiting for external APIs during page rendering.

shadcn/ui components render with incorrect or no styling. Components appear unstyled or Tailwind utilities don't apply properly. CSS conflicts between component-scoped styles and global Tailwind.

This happens when Tailwind configuration isn't properly set up for shadcn/ui components, or CSS precedence issues cause styles to not apply.

Your Next.js Image component doesn't optimize images properly. Original large images load unchanged, or the Image component shows errors and falls back to regular img tags.

Image optimization fails when the Image component isn't configured correctly, external images aren't whitelisted, or the image URL format is invalid.

Your client component doesn't render in the Next.js 13+ App Router, or renders blank with no errors. The component markup doesn't appear in the browser or page layout.

This occurs when server/client boundaries aren't properly configured, 'use client' directives are missing or misplaced, or component imports cross server-client boundaries incorrectly.

Your Next.js app shows 'Hydration failed because the initial UI does not match what was rendered on the server' warning. The error originates from date or timestamp fields that render differently on server vs client.

This classic hydration mismatch occurs because JavaScript Date objects or timezone-aware formatting produces different output on server (UTC) vs browser (local timezone).

Routes in your Next.js App Router aren't working as expected. Links navigate to wrong pages, URL paths don't match folder structure, or dynamic routes catch unexpected paths.

App Router routing confusion arises from misunderstanding folder conventions, segment routing, and dynamic route matching patterns.

Your form validation differs between client-side (JavaScript/React) and server-side (Next.js server action), allowing invalid data through or rejecting valid data. User experience is poor with inconsistent feedback.

Validation mismatch happens when client validation and server validation use different rules, or validation is skipped on one side.

React Hook Form fields don't register properly, values don't update, or form state doesn't sync with inputs. Form submission doesn't include the field data.

Field registration fails when register() isn't called, watched values aren't properly accessed, or component structure conflicts with form context.

Enabling TypeScript strict mode (strict: true in tsconfig.json) causes numerous type errors in your Next.js project, preventing compilation. Variables are typed as potentially null/undefined, breaking existing code.

Strict mode catches real issues but requires code updates. Proper null checks, type assertions, and more specific typing prevent errors.

Your React component throws 'missing dependency' warnings from ESLint, or useEffect runs infinitely despite specifying dependencies. Effects trigger too frequently, causing performance issues.

useEffect dependency issues occur when dependencies array is missing, incomplete, or contains objects that are recreated on every render.

Your Tailwind responsive classes (md:, lg:, sm:) don't apply correctly on mobile devices. Layout breaks on specific screen sizes or doesn't adapt to viewport changes.

Responsive breakpoints fail when viewport meta tag is missing, Tailwind configuration is incomplete, or browser caching prevents style updates.