Next.js

Common vulnerabilities include insecure session management, weak token validation, missing authorization checks on API routes, and client-side only authentication without server-side validation.

Next.js exhibits slow page rendering performance in production: basic pages take 200-400ms, large dynamic pages exceed 700ms, and crawlers hitting multiple pages simultaneously cause site crashes. Caching is unpredictable across replicas.

XSS attacks can occur in Next.js through improper use of dangerouslySetInnerHTML, unvalidated user input in dynamic content, third-party scripts, and server-side rendering of malicious content.

Critical security vulnerabilities like React2Shell (CVE-2025-55182, CVSS 10.0) in Next.js RSC serialization revealed that full-stack JavaScript and TypeScript lack secure serialization models. These runtime CVEs forced developers to reassess security assumptions in TypeScript/React stacks.

Next.js API routes are vulnerable to injection attacks (SQL, NoSQL, command injection), rate limiting bypass, information disclosure through error messages, and missing input validation.

Next.js does not include built-in Cross-Site Request Forgery protection, requiring developers to implement their own protection mechanisms or applications remain vulnerable to CSRF attacks.

Developers frequently fetch all list items then make separate database calls for each item's related data, resulting in exponential query multiplication (e.g., 21 queries instead of 2 for 20 blog posts with author data). This becomes catastrophic in production with large datasets.

Analytics, chat widgets, ads, and social media embeds loaded synchronously in the document head block entire page rendering, causing blank screens for users. Slow analytics scripts add 2-3 seconds to load time; problematic chat widgets have caused apps to become unusable with 8-second load times.

Common mistakes include missing database indexes on frequently queried columns, fetching entire tables instead of specific rows, and not using connection pooling. Queries that work fine in development with 100 rows can take 3+ seconds in production with 50,000 rows and no indexes instead of 30 milliseconds.

Features work seamlessly on Vercel but become problematic when deployed elsewhere, creating tight coupling to Vercel's infrastructure. Some developers have inherited projects so tightly coupled to Vercel that migrating to other hosting providers like AWS proved nearly impossible, sometimes requiring complete rewrites.

Existing CI/CD pipelines tuned for previous Next.js versions unexpectedly fail after upgrading to Next.js 16. Local development environments diverge from production servers, creating 'works on my machine' scenarios that are difficult to debug.

The build toolchain completes compilation while silently omitting code without throwing errors. Developers see 'successful' builds that are actually missing critical bits, making debugging extremely difficult and leading to runtime failures.

Third-party authentication solutions (NextAuth.js, Auth.js) integrated with Next.js experience session management problems and unexpected logouts, particularly due to Edge Runtime limitations lacking necessary Node.js APIs.

Exposing dynamic request/response objects in the App Router affects the entire route and limits the framework's ability to implement caching, streaming, and future Partial Prerendering optimizations.

Next.js middleware executes in a hybrid runtime that supports only a restricted subset of Web APIs and Node.js, preventing direct database connections, file system access, and session management. This awkward middle ground doesn't align with common development patterns.

Developers ship applications with hero images that load immediately on page open, including images below the fold that users may never see. This results in 8-second load times on mobile connections, as developers often only test on fast office Wi-Fi rather than realistic network conditions.

Fetching data in useEffect causes a waterfall effect where component renders trigger data fetches, and nested child components wait for parents before making their own requests. This creates 3+ steps before data even starts moving, resulting in users seeing loading spinners for 3-5 seconds instead of immediate content.

Turbopack, Next.js's replacement bundler, complains about valid TypeScript code and struggles to understand `:global` in CSS modules. Despite these issues, it remains unstable and not production-ready.

Next.js 16 introduces hydration errors where client-side reconciliation doesn't match server-rendered HTML, causing flicker, broken interactivity, and console warnings. This issue is particularly prevalent with the new Server Component paradigm.

Build performance remains a major concern with 8,511 GitHub issues. Despite being a core Next.js promise, developers struggle with Turbopack, Babel, and webpack optimization. Experimental features often break existing setups, and slow builds cascade to affect all feature delivery timelines.

Next.js dev mode is slow and painful; developers must wait for route compilation when checking multiple routes. The development server consumes several gigabytes of RAM, creating frustrating workflow interruptions.

Upgrading to Next.js 16 causes significant, unexpected increases in build times and output bundle sizes. Projects that previously built quickly now consume more CI/CD resources and produce larger bundles, harming Core Web Vitals.

Integrating Three.js with Next.js creates compatibility issues that are difficult to resolve, breaking expected library functionality and causing significant frustration during development.

CSS-in-JS libraries like Styled Components run JavaScript in the browser to hash class names and inject styles dynamically, causing style recalculations on every injection. This significantly degrades LCP, FCP, and INP metrics.

Large data passed to client components (e.g., 7 MB from getStaticProps) must be transferred and parsed by the browser even if unused by the UI, slowing down FCP and LCP.

Next.js middleware sometimes fails to execute as expected, occasionally requiring a hard page refresh to function correctly. This unpredictable behavior creates debugging challenges and unreliable application behavior.

Developers commonly import entire libraries when only needing single functions, pulling in 70+ kilobytes of unused code (e.g., lodash). Combined with full icon libraries, moment.js for dates, and analytics packages with unwanted dependencies, this significantly increases bundle size and degrades performance.

Next.js documentation has evolved from a quick reference to a sprawling, inconsistent guide that developers must keep open constantly. The docs present many 'old vs new' decisions (App Router vs Pages Router, getServerSideProps vs server components) without clear guidance, requiring extensive time to understand framework decisions.

Without using next/dynamic, components that aren't needed on initial page load (like modals) get shipped in the main bundle, increasing bundle size and harming LCP, FCP, and INP.

Using regular <img> tags instead of next/image loses built-in optimizations like lazy loading and responsive sizing. Without proper sizes attribute, browsers may download large desktop images on mobile devices, hurting LCP.

Limitations of Next.js server functions force developers to use alternatives like tRPC for some backend tasks, resulting in inconsistent architectural patterns and parallel caching systems. This fragmentation increases complexity.

React Server Components (RSC) create confusion about client-server boundaries, increase development complexity, and introduce latency. Simple applications feel overengineered due to RSC requirements, creating a steep learning curve and performance concerns with cold starts on serverless platforms.

Middleware that runs on every request with large libraries or poor tree-shaking increases TTFB, which directly affects FCP and LCP metrics.

Next.js middleware and production logging present unique challenges due to the framework's complex execution model. Developers spend hours implementing basic logging functionality that works across edge functions, server-side rendering, and client-side code, with confusion about where logs appear and how to maintain consistency.

Next.js extends the standard Web fetch() API with proprietary caching and revalidation semantics, introducing memory leaks and compatibility issues. These monkey-patched modifications can conflict with libraries and cause unexpected behavior.

Server-rendered content fails to display immediately on slower network connections, showing users a blank screen before data appears. This negatively impacts perceived performance and user experience.

Google and other search engines struggle to properly crawl server-rendered blog posts and content in Next.js applications, resulting in poor SEO performance and low search visibility.

Next.js server functions cannot execute in parallel, limiting scalability and forcing sequential execution of operations. This architectural limitation impacts performance and requires workarounds.

Next.js 14 implemented aggressive default caching that led to stale data being served to users. While Next.js 15 disabled caching by default, this created a pendulum effect with new issues emerging in some cases.

Next.js API routes offer limited scalability for building complex backend functionality. Middleware in API routes adds complexity without providing sufficient power for enterprise-level backend operations.

Error handling and debugging in Next.js often leads developers into opaque framework internals, making it difficult to understand and resolve issues. The 'black box' nature of the framework complicates troubleshooting.

Learning Next.js requires mastering not just React, but also its routing model, rendering modes, proprietary caching behavior, deployment quirks, and middleware runtime. This multi-layered complexity creates a steep onboarding barrier for newcomers.

Next.js's conventions and built-in features, while streamlining development, limit flexibility for custom configurations or workflows. Companies with unique requirements struggle with routing, data fetching, or build process customization.

Next.js has introduced 15 major versions in 8 years, each potentially containing backwards-incompatible changes. This creates significant maintenance burdens for long-term projects and makes it difficult for teams to keep applications updated.

The requirement that each page must have a page.tsx file can be confusing and may inadvertently lead to server-only code being bundled into client bundles, creating security and performance issues.

Only 29% of Next.js GitHub issues get resolved; 52% of discussed issues remain unresolved. Many developers solve problems independently without creating tickets, making it impossible to measure framework debt accumulation. This visibility gap prevents data-driven planning and cost estimation.

Many developers perceive Next.js as overengineered, adding unnecessary complexity without proportional benefits. The framework's architectural decisions and accumulated features create bloat that doesn't serve most use cases.

The transition from the Pages Router to the App Router has been controversial. Many developers found the Pages Router intuitive and straightforward, but the newer App Router introduces additional complexity that some argue is unnecessary for most applications.

Next.js middleware has significant limitations, including a single middleware file requirement and complex chaining patterns that make routing and request handling difficult compared to traditional frameworks.

The cookies() API allows type-checked usage like cookies().set() anywhere, but fails at runtime in certain contexts. This unexpected behavior differs from traditional request object access and creates developer footguns.

Next.js lacks comprehensive built-in internationalization support, making multi-language applications challenging to implement. Developers must rely on third-party solutions or complex workarounds.

Vercel's usage dashboard shows metrics like 'Fluid Active CPU' and 'ISR Writes' without clear documentation on how they impact costs or how to optimize them. Developers pay subscription fees but lack visibility into what drives spending, making budgeting impossible.

Web fonts from third-party CDNs require multiple round-trip requests (DNS lookup, CSS request, font file request), adding significant latency even on fast networks and degrading FCP.