The 10 Most Common
Next.js Mistakes

1. Client Components That Should Be Server Components

AI tools default to client components for everything. But most pages and components do not need 'use client'. Server Components are faster, more secure, and scale better.

Fix: Remove 'use client' from any component that does not use useState, useEffect, or browser APIs. Move data fetching to Server Components.

2. Environment Variables in Client Code

Secrets and server-only variables are sometimes exposed to the client. Environment variables prefixed with NEXT_PUBLIC_ are public — everything else is server-only.

Fix: Never use non-NEXT_PUBLIC_ environment variables in client-side code. If you need a secret on the client, fetch it from an API route.

3. Missing Error Boundaries

React errors crash the entire page without error boundaries. Users see a white screen instead of a helpful error message.

Fix: Wrap critical sections in error boundaries. Next.js 13+ has built-in error.js conventions — use them.

4. Not Handling Loading States

Pages and components load without loading states. Users see broken layouts or blank screens while data fetches.

Fix: Add loading.js files for route segments. Use Suspense for component-level loading states.

5. Fetching Data in Client Components

useEffect is used for data fetching, causing waterfalls, race conditions, and unnecessary re-renders.

Fix: Fetch data in Server Components. Use React Query or SWR only when you need client-side caching or real-time updates.

6. Missing Metadata

Pages load without title, description, or Open Graph tags. This hurts SEO and social sharing.

Fix: Add export const metadata to every page with title, description, and relevant keywords.

7. Improper API Route Error Handling

API routes throw raw errors or return 200 for errors. Clients receive confusing responses.

Fix: Always return appropriate HTTP status codes. Return JSON error responses: return NextResponse.json with status: 400.

8. Not Using Suspense Boundaries

Streaming is enabled by default in Next.js App Router, but components are not wrapped in Suspense. The result is no streaming benefits.

Fix: Wrap slow components in Suspense with fallback content. This enables true streaming.

9. Ignoring Zod or Validation

Form data and API inputs are not validated. Bad data causes crashes and security vulnerabilities.

Fix: Use Zod to validate all inputs. Validate on the client with react-hook-form and on the server with Zod schemas.

10. Missing CORS Configuration

API routes do not set CORS headers. Requests from different origins are blocked.

Fix: Set CORS headers on API routes. For Next.js App Router, add headers in next.config.js or create a middleware for CORS handling.

Getting Help

If your Next.js app has these issues, we can fix them. Most apps are production-ready within 48 hours.