Sources

## 7 Reasons Why Companies are Thinking of Moving Off Next.js! ### 1️⃣ Complexity with App Router and React Server Components The introduction of the App Router and React Server Components (RSC) in Next.js aimed to enhance performance and developer experience. However, these features have become **next.js vulnerabilities** because of their complexity, and some developers find them challenging.​ For instance, the App Router’s handling of server and client components can lead to confusion, especially when dealing with navigation and data fetching. Additionally, the mental model required to effectively use RSCs differs significantly from traditional React practices, leading to a steeper learning curve.​ ### 2️⃣ Performance Concerns Despite Next.js’s reputation for performance, some developers have reported **Next.js issues** with performance, particularly with development server speed and build times. The integration of new features like RSCs and the App Router has, in some cases, led to slower builds and increased memory usage.​ For example, developers have noted that the development server can become sluggish, requiring frequent restarts due to memory leaks. This hampers productivity and can be frustrating during development.​ **Did you know, ** as per **Github, Dynamic routes in App Router are reportedly ** **4x slower** to load than those in the older Pages Router ### 3️⃣ Limited Flexibility and Customization Next.js provides a set of conventions and built-in features that streamline development. However, these conventions can sometimes limit flexibility, making it challenging to implement custom configurations or workflows.​ For companies with unique requirements or those needing fine-grained control over their applications, this Next.js vulnerability can be a hindrance. Customizing aspects like routing, data fetching, or build processes may require workarounds or significant effort. ### 4️⃣ Vendor Lock-In Concerns Next.js is developed and maintained by Vercel, and while it’s open-source, some developers express problems with Next.js’s potential vendor lock-in. Features like Image Optimization and Middleware are tightly integrated with Vercel’s platform, which can make migrating to other hosting providers more complex.​ This tight coupling may deter companies seeking to maintain flexibility in their infrastructure choices.​ ### 5️⃣ Unstable Development Experience During Migration Companies that began adopting the new App Router and RSC model mid-project often report a **disjointed developer experience**. Many teams find themselves working with both the old **Pages Router** and the new **App Router** simultaneously, creating inconsistencies in routing logic, layout handling, and data-fetching methods. This next.js issue of hybrid state makes it harder to onboard new developers or maintain code consistency, especially in larger teams. ### 6️⃣ Increased Debugging and Tooling Challenges The abstraction and complexity introduced by RSCs and server/client boundaries also pose challenges for **debugging and observability**. Standard browser dev tools often fall short in offering meaningful stack traces or a clear separation of server vs. client components. Additionally, another problem with Next.js is that many popular monitoring and logging tools still lack deep integration with the latest Next.js features. This disconnect can slow down bug fixing and result in longer QA cycles, increasing the overall cost of development. ### 7️⃣ Over-Optimization for Specific Use Cases Next.js’s evolution seems increasingly aligned with **Vercel’s product vision**, which can be frustrating for companies with different infrastructure goals. For example: - Features like **Edge Middleware**, **Incremental Static Regeneration (ISR)**, and **Image Optimization** are tailored to Vercel’s edge network. - Running these on platforms like AWS, Netlify, or your own servers often leads to degraded performance or extra setup overhead.

Next.js applications face distinct security challenges due to their hybrid nature. Unlike traditional single-page applications (SPAs) or server-rendered applications, Next.js combines: 1. **Server-Side Rendering (SSR)**: Code execution on the server before sending HTML to clients 2. **Static Site Generation (SSG)**: Pre-built pages that can expose build-time data 3. **API Routes**: Backend functionality within the same codebase 4. **Client-Side Navigation**: Dynamic routing that happens in the browser 5. **Edge Runtime**: Code running at the edge with different security contexts … #### 1. Cross-site scripting (XSS) attacks XSS remains one of the most dangerous vulnerabilities in web applications. In Next.js, XSS can occur through: - Improper use of … - Unvalidated user input in dynamic content - Third-party scripts and dependencies - Server-side rendering of malicious content #### 2. Cross-site request forgery (CSRF) CSRF attacks trick authenticated users into performing unwanted actions. Next.js doesn't include built-in CSRF protection, making applications vulnerable without proper implementation. #### 3. Authentication and authorization flaws Common authentication vulnerabilities in Next.js include: - Insecure session management - Weak token validation - Missing authorization checks on API routes - Client-side only authentication #### 4. API route security issues Next.js API routes can be vulnerable to: - Injection attacks (SQL, NoSQL, command injection) - Rate limiting bypass - Information disclosure through error messages - Missing input validation #### 5. Dependency vulnerabilities The JavaScript ecosystem's reliance on numerous packages creates supply chain risks through: - Outdated dependencies with known vulnerabilities - Malicious packages - Transitive dependency issues … ``` are sent to the browser. Everything else stays on the server (safe). Here's how to manage them securely: ## Database security with Next.js **Why database security matters:** Your database contains all your valuable information. If someone gains unauthorized access, they could steal or delete everything. **Common database vulnerabilities:** - SQL injection attacks (malicious code in queries) - Exposed connection strings - Unencrypted sensitive data - Too many database connections Here's how to secure your database properly: ## Security testing and monitoring **Why test security?** Even with all the security measures in place, you need to regularly check for vulnerabilities and monitor for attacks. **What to test:** - Authentication systems (can people break in?) - Input validation (do forms reject malicious data?) - API security (are endpoints properly protected?) - Dependencies (do any libraries have known vulnerabilities?) Here's how to implement security testing: ## Deployment security considerations ... **Use this comprehensive security checklist to systematically audit your Next.js application.** Each section provides actionable security measures organized by priority and implementation complexity. How to use this checklist? Review each section systematically. Start with **Essential** items for immediate security, then progress through **Important** and **Advanced** measures based on your application's needs and risk profile. ### Authentication Security Audit |Security Area|Priority|Implementation|Validation| |--|--|--|--| |JWT Security|Essential|32+ char secrets, secure storage, environment separation|``` echo $JWT_SECRET | wc -c ``` ≥ 32| |Session Management|Essential|HttpOnly cookies, Secure flag, SameSite=Strict, 15-30min timeout|Browser dev tools → Application → Cookies| |Password Policy|Essential|8+ chars, complexity, bcrypt cost ≥ 12, account lockout|Test weak passwords, verify hashing| |Multi-Factor Auth|Important|TOTP support, backup codes, recovery options|Test MFA flow end-to-end| |OAuth Integration|Important|PKCE implementation, state validation, scope limits|Verify OAuth flow security| |Role-Based Access|Advanced|RBAC system, server-side checks, least privilege|Test role escalation attempts| ### API Security Measures ### Input Validation **Essential**: All endpoints use Zod schemas - Request payload validation - Query parameter validation - File upload restrictions - Headers validation **Verification**: ```

## Common Next.js Mistakes That Affects CWV ## Mistake 1: CSS-in-JS Runtime Overhead Let’s start with one of the most simple and widespread common Nextjs mistakes. CSS-in-JS libraries like Styled Components run JavaScript on the client to hash class names and inject styles into the DOM. Each injection causes browser style recalculation for the entire page, significantly hurting **LCP, FCP, and INP**. CSS-in-JS libraries introduce significant client-side overhead: - JavaScript runs in the browser. - Class names are hashed at runtime. - Styles are injected into the HTML dynamically. - Each injection triggers style recalculations. All of this happens during runtime and directly affects INP and FCP. Utility-first approaches like Tailwind avoid this problem by compiling a single CSS file at build time, with no runtime JavaScript and no client-side style recalculations. ### Mistake 2: CSS Modules with Lazy-Loaded Components Even without CSS-in-JS, performance issues can appear when combining: - CSS Modules. - Lazy-loaded components. When a lazily loaded component is mounted, its styles are injected dynamically. If this happens during a user interaction (click, input, form submission), the browser must recalculate styles at a critical moment. This often leads to increased input delay and worse INP. This matters, because: - When a dynamically imported component imports CSS Modules, styles are injected on demand. - Each injection triggers expensive full-page style recalculation. - If this happens during user interaction (button click, typing), it increases **INP** significantly. … ### Mistake 3: Missing Dynamic Imports (next/dynamic) A common mistake is shipping too much JavaScript in the initial bundle. next/dynamic allows components to be loaded only when they are actually needed, which: - Reduces the initial bundle size. - Improves LCP, FCP, and INP. - Improves perceived performance. A typical example is modal dialogs. They are rarely visible on initial page load, yet often end up in the main bundle if dynamic imports are not used. … ### Mistake 4: Using Third-Party Font CDNs Web fonts loaded from third-party CDNs introduce a costly request chain: 1. DNS lookup. 2. Request for CSS with @font-face. 3. Request for the font files. Even on fast networks, these extra round trips add latency. **Key optimization recommendations: ** … ### Mistake 5: Not Using next/image Using regular <img> tags in Next.js means losing built-in image optimizations for the web. next/image provides: - Lazy loading by default. - Automatic image optimization. - Preloading for LCP images. - Responsive image sizes via srcset and sizes. Without proper sizes, the browser may download large desktop images even on mobile devices, which directly hurts LCP. … ### Mistake 6: Unoptimized Third-Party Scripts Many websites are bloated with third-party scripts, and the problem is rarely the scripts themselves, but **when and how they are loaded**. By default, the browser treats all JavaScript as equally important, which can easily block the main thread during critical rendering phases. To avoid this, Next.js provides fine-grained control over script execution timing. … next/script allows precise control over when scripts are loaded: - beforeInteractive – critical scripts - afterInteractive – analytics and widgets - lazyOnload – non-critical scripts - worker – heavy logic off the main thread Using the wrong strategy can severely impact INP and Total Blocking Time. … ### Mistake 8: Sending Too Much Data to the Client Any data passed to a client component is sent to the browser and parsed there. **Real-world example**: a page returning a 7 MB payload from getStaticProps, most of which was never used by the UI but still had to be transferred and parsed by the browser. **Rule: ** do as much filtering, mapping, and transformation as possible on the server. Send only what the component actually needs. … ### Mistake 9: Too Much Client-Side JavaScript Logic Excessive client-side logic such as filtering and sorting: - Slows down FCP and LCP. - Increases memory usage. - Forces repeated JavaScript execution. Even with React Compiler, memoization itself has a cost. If logic does not depend on browser APIs or direct user interaction, it should live on the server. ### Mistake 10: Heavy Middleware Logic Middleware runs on every request. Problems arise when middleware includes: - Large libraries. - Heavy imports. - Poorly tree-shaken dependencies. This increases TTFB, which directly affects both FCP and LCP. Middleware should do as little work as possible and import only what is strictly necessary.

You've invested time learning Next.js, built projects with it, and enjoyed its server-side rendering capabilities. But lately, development feels like wading through mud. Your build times are painfully slow, server functions don't work in parallel, and you find yourself mixing different techniques just to get things working. When you make a simple server-side change, you're forced to wait for the entire frontend to rebuild. … Next.js starts simple but gradually introduces complexity that becomes difficult to manage. As one developer put it: "The usual pain points, fundamental reason behind it being complexity of RSC and unmodular architecture with 'God level' build process that has to know every detail of entire app to work." This "God level" build process creates a system where changes in one area necessitate rebuilding large portions of your application. The React Server Components (RSC) implementation, while powerful, adds layers of complexity that can be challenging to debug and optimize. **Development Speed That Tests Your Patience** Perhaps the most common complaint revolves around development speed. The painfully slow development experience drives many developers away from Next.js: "The painfully slow development experience was what caused me to move away." When you're in a productive flow state, waiting for rebuilds after minor changes can be incredibly frustrating. This slowdown is particularly noticeable when making server-side changes, as one developer explains: … These limitations often manifest when trying to build complex backend functionality or when integrating with specific libraries. One developer shared their frustration with Next.js and Three.js compatibility: "After ruining a perfect weekend with Next/ThreeJs incompatibility, I'm over edge as well." **The Vercel Dependency Concern** Next.js is developed by Vercel, and while it's technically open-source, there's a growing concern about the tight coupling between the framework and Vercel's platform: "The way Vercel tightly couples NextJS with its own architecture is disappointing." This vendor lock-in concern makes some developers hesitant about building large-scale projects on Next.js, especially if they prefer flexibility in deployment options or are working in environments where Vercel isn't the optimal hosting solution. **Internationalization Headaches** If your application needs to support multiple languages, Next.js might present additional challenges: … This leads to an inconsistent approach where you might use Next.js server functions for some tasks but need to implement alternatives like tRPC for others. The result is often a fragmented codebase with multiple paradigms for handling server-side logic. Once you start using libraries like TanStack Query (formerly React Query) alongside Next.js, you're essentially maintaining parallel caching systems, which further adds to the complexity:

But then two things hit me: 1. **The content wasn’t showing up immediately on slower connections.** - Users saw a blank screen for a moment before the data appeared. 2. **Google couldn’t crawl my blog posts properly.** - The SEO was practically nonexistent. My blog wasn’t showing up anywhere.

For one, self-hosting Next.js in a traditional enterprise deployment pipeline is a pain. The framework doesn't lend itself to the common build-once-deploy-anywhere pattern. Because it tightly binds the output to environment variables and runtime settings, you often need a separate build per environment—a frustrating constraint for anyone used to promoting artifacts from staging to production with confidence. Then there's the middleware story. Middleware runs in a weird hybrid runtime that supports some Web APIs and a restricted subset of Node.js. This awkward middle ground feels more like an internal tool built to fit Vercel's infrastructure than a broadly useful feature. In fact, much of Next.js seems increasingly shaped by Vercel's hosting model—which is great if you're all-in on their platform, but less so if you're not. From a developer experience standpoint, things aren't much better. The documentation is sprawling, inconsistent, and full of "old vs new" decisions that beginners have to internalize. Should you use the App Router or Pages Router? getServerSideProps or a server component with fetch? When do you use the use client directive? How does caching even work? The answer, often, is "it depends," followed by hours of documentation spelunking. All of this results in a framework that feels overengineered and unnecessarily complex. For newcomers, the learning curve is steep. You don't just learn React—you also have to learn Next.js's routing model, its rendering modes, its proprietary caching behavior, its deployment quirks, and its middleware runtime.

Conducted by Traefik Labs, a provider of application networking software for microservices, the survey also finds 60% of respondents are running two or more Kubernetes clusters. ... A total of 44% of respondents also note cost management causes friction as they scale and expand their Kubernetes clusters. Other issues include securing applications and integrating third-party tracing systems tied at 33% each. Not surprisingly, the top pain point cited by respondents (43%) is setup and configuration, followed by maintenance and having too many platforms at 28% each. Half of respondents (50%) also said they still log in directly into their clusters to review logs manually when issues arise. The most widely employed management tools are Grafana and Prometheus at 74% and 68%, respectively. Finally, 60% of respondents note they are also employing multiple ingress controllers.

- **Frequent breaking changes between versions **— Every major release seemed to bring a new thing. This isn’t unique to Next.js — we see it across frameworks — but it becomes a problem when you’re forced to rewrite a chunk of your application every year - **Documentation that requires constant reference **— When working with Next.js, the last thing you need far from you is the documentation. The docs went from being a quick reference to something you needed to keep open in a browser tab … |Requirement|Next.js solution|Complexity level|Pain points| |--|--|--|--| |**Routing**|File-based routing (Pages) + App Router|🟡 Medium|Two different systems, migration confusion| |**SSR/SSG**|Built-in with multiple strategies|🔴 High|Hydration mismatches, debugging nightmares| |**Build tooling**|Zero-config Webpack/Turbopack|🟢 Low|Works great until you need customization| |**Code splitting**|Automatic|🟢 Low|Generally solid| |**API routes**|Built-in serverless functions|🟡 Medium|Limited scalability, middleware complexity| |**Authentication**|Third-party (NextAuth/Auth.js)|🔴 High|Session management issues, random logouts| |**Data fetching**|Multiple patterns (`getServerSideProps`, Server Components, etc.)|🟡 Medium|Too many ways to do the same thing| |**Deployment**|Optimized for Vercel|🟡 Medium|Self-hosting complications| |**Developer experience**|Hot reloading, TypeScript support|🟡 Medium|Slow build times, cryptic error messages| |**Error handling**|Built-in error boundaries|🟡 Medium|Debugging leads to framework internals| |**Performance**|Automatic optimizations|🟡 Medium|Good results, but opaque process| |**Styling**|CSS Modules, Styled JSX|🟢 Low|Flexible but not opinionated|

## Executive Summary We looked at 57,793 GitHub issues from Next.js to find out what developers really struggle with. Instead of relying on survey answers, we focused on the problems that actually lead people to file issues. **Key Findings:** - Server-side rendering complexity: 19,277 issues (33% of total) - Configuration and integration pain: 14,450 issues (25% of total) - Resolution rate: Only 29% of issues get resolved; 52% of discussed issues remain unresolved - Build performance concerns: 8,511 issues (15% of total) despite being a core promise … ## The Three Big Pain Points ### 1. Server-Side Rendering (19,277 issues) SSR is here to stay, but it’s tough to get right in production. Developers face challenges like error handling, server components, hydration bugs, and the ongoing struggle to manage server and client boundaries. Here’s what your workflow tools miss: Your sprint velocity might look fine, but if developers spend hours debugging hydration issues that never become tickets, they aren’t building new features. Instead, they’re dealing with architectural debt. ### 2. Configuration Hell (14,450 issues) React version conflicts, webpack configs, and TypeScript integration issues. When your framework touches the entire ecosystem, every version bump is a potential minefield. There’s a hidden cost: Developers often solve problems on their own without creating tickets. Your Jira board shows closed stories, but it doesn’t show the 40 hours spent last quarter fixing webpack configurations. ### 3. Build Performance (8,511 issues) Turbopack, babel, webpack, optimization – the word cloud screams it. Developers are obsessed with build speed, but they’re also frustrated by experimental features that break existing setups. Here’s the problem: Slow builds affect every feature delivery. Your CI metrics show longer build times, and your sprint board shows completed points, but neither tells you the true cost. … **What they don’t show:** ... **The planning problem:** You can’t account for what you can’t measure. When engineering says “this will take longer than expected,” is it because they’re being conservative, there’s legitimate technical complexity, or framework debt is compounding? Without visibility into where complexity accumulates, every planning conversation becomes a negotiation instead of a data-driven discussion.

EDIT: Gave it another try and more issues appear, within seconds of using. The left side has a rendering bug where the selected areas are cut off sometimes, ctrl+zoom does not zoom the page as it does on all normal websites. I can still zoom via menu. Middle mouse open link in new tab doesn't work. Z layer bugs everywhere. I expect more the longer I'd look. … blinkbat 6 months ago ... After a week of futzing with it I just threw up my hands and said 'no can do'. I couldn't untangle the spaghetti JS and piles of libraries. 'Compiling' would complete and if you looked at the output it was clearly missing tons of bits but never threw an error. Just tons of weirdness from the toolchain to the deployment platform. … Framework-defined infrastructure is a seriously cool and interesting idea, but nowadays Next feels more like an Infrastructure-defined framework; the Vercel platform's architecture and design are why things in Next are the way they are. It was supposed to be "Vercel adapts to Next", but instead we got four different kinds of subtly different function runtimes. My usage dashboard says my two most-used things are "Fluid Active CPU" and "ISR Writes". I just pay them $20/mo and pray none of those usages go over 100% because I wouldn't have the first clue why I'm going over if it does.

### 🚀 Executive Summary **TL;DR:** Upgrading to Next.js 16 can introduce challenges like increased build times, hydration mismatches, and deployment failures. This guide provides actionable solutions to optimize performance, modernize CI/CD pipelines, and effectively leverage Server Components and data fetching patterns. … **Unexpected Increase in Build Times and Bundle Sizes:**Projects that previously built swiftly might now take significantly longer, consuming more CI/CD resources. Output bundle sizes could bloat, leading to slower initial page loads and poorer Core Web Vitals scores. **Runtime Instability and Hydration Mismatches:**Applications might exhibit inconsistent behavior after initial load, often manifesting as hydration errors (React’s client-side reconciliation not matching server-rendered HTML), leading to flicker, broken interactivity, or console warnings. This is particularly prevalent with new Server Component paradigms. **Deployment Failures and Environment Discrepancies:**Existing CI/CD pipelines, finely tuned for previous Next.js versions, may unexpectedly fail. Differences between local development environments and production servers can lead to “works on my machine” scenarios, making debugging challenging. … ### 🤖 Frequently Asked Questions #### ❓ What are the primary issues users face when adopting Next.js 16? Users commonly experience unexpected increases in build times and bundle sizes, runtime instability often manifesting as hydration mismatches, and deployment failures due to environmental discrepancies or outdated CI/CD practices. … #### ❓ What is a common pitfall with Next.js 16 Server Components and how can it be addressed? A common pitfall is hydration mismatches caused by incorrect usage of Server and Client Components. This can be addressed by explicitly marking interactive components with `’use client’`, ensuring static content and data fetching logic remain in Server Components, and passing only serializable props between them. ## Leave a Reply

### 1. Poor performance Next.js loves to talk about how fast it is. Yet it’s painfully slow at scale. Here’s what we saw: - Basic page renders were taking **200-400ms**. - Large pages, especially ones with dynamic content, could spike well beyond **700ms**. - If a Google crawler or our Ahrefs SEO monitoring tool hit multiple pages at once, the site would start crashing **multiple times per week**. - Next.js’s built-in caching was **unpredictable and inefficient** across multiple replicas. Performance isn’t just a "nice to have." Or at least, not for us. It’s everything. In a world where milliseconds determine conversion rates, Next.js forces businesses into a suboptimal reality where every interaction carries unnecessary latency. > **Google doesn’t wait. Users don’t wait. Next.js makes them wait.** … #### Landing page performance: - **First Contentful Paint:** Improved from **2.1s → 0.5s** (**4x faster**) - **Largest Contentful Paint:** Improved from **5.1s → 0.8s** (**6x faster**) - **Speed Index:** Improved from **8.4s → 1.7s** (**5x faster**) Even if you have a CDN in front, it doesn’t solve Next.js's deeper inefficiencies. Performance bottlenecks persisted regardless of CDN usage. Additionally, if you are seeking to enhance your landing page, you may find these tips beneficial. ... - **First Contentful Paint:** Improved from **2.0s → 0.5s** (**4x faster**) - **Largest Contentful Paint:** Improved from **3.6s → 0.8s** (**4.5x faster**) - **Total Blocking Time:** Improved from **2,810ms → 870ms** (**3x improvement**) … ### 2. SEO took a hit Next.js is supposed to be good for SEO because of SSR and SSG. Except when your page takes forever to render, search engines don’t care how "static" it is. We saw this firsthand: - Our **SEO performance halved in December**. - We **lost valuable rankings** because of **slow server-side rendering and JSON bloat**. - **Google was actively penalizing us** for slow speeds. - Customers noticed and **reported issues** with our slow-loading documentation pages. … ### 3. It was a black box - When Next.js crashed, we didn’t get **useful errors**. - When things slowed down, we couldn’t **pinpoint why**. - Instead of control, we got **a black box** with unpredictable performance issues. There were **no good ways to debug slow renders**. At some point, we stopped asking, *"How do we fix this?"* and started asking, *"Why are we using this?"* … ## The real cost of Next.js and Vercel One of the biggest issues with Next.js is how **tightly it’s coupled with Vercel**. - Next.js features often **work best (or only) on Vercel**. - **Vercel locks you in** with expensive hosting. - **Scaling Next.js is a headache** because of bad cache invalidation across replicas.