Next.js App Router Ignores 1,200 Generated Pages: A Developer's Pitfall

The Problem: Missing Pages

Building a tool like factorcalculator.org involved creating both manually crafted pages and a large volume of dynamically generated content. The goal was to provide calculators for numbers 1 through 1200, resulting in URLs like /factors-of-1/, /factors-of-2/, and so on, up to /factors-of-1200/. After deploying a Next.js 16 application using the App Router, static export, and Tailwind CSS to Cloudflare Pages, a critical issue emerged: the vast majority of these 1,200 generated pages were simply ignored by the router, leading to 404 errors instead of serving the expected content.

The developer spent roughly a week building the site, which includes six hand-built calculator pages and the 1,200 generated ones. While most of the development process proceeded smoothly, two significant bugs surfaced that were particularly insidious. These weren't outright crashes, but rather situations where the application appeared to function correctly until the precise moment it failed, leaving the developer to debug a seemingly working system.

Understanding App Router's Dynamic Segment Limitations

The core of the problem lay in a misunderstanding of how Next.js App Router handles dynamic route segments. The developer initially attempted to create dynamic routes using a pattern that would generate URLs for a wide range of numbers. However, the App Router does not support partial dynamic segments in the way the developer expected. A partial dynamic segment, denoted by `[slug]` within a directory structure, is designed to catch a single segment of a URL. When attempting to create a route like /factors-of-[number]/, the App Router, by default, treats this as a single segment match. This means it couldn't recursively or iteratively match numbers beyond a certain point without explicit configuration or a different approach.

The expectation was that Next.js would infer the need to generate pages for all numbers within the specified range. Instead, the router treated each generated URL as a separate entity to be matched. Without a mechanism to inform the router about the full scope of these dynamically generated routes, it effectively ignored any URL that didn't align with a pre-defined static route or a more specific dynamic route pattern. This resulted in the 1,200 pages being invisible to the router, leading to the 404 errors.

The Impact of Static Export and Route Generation

The decision to use Next.js static export for deployment meant that all pages needed to be generated at build time. This process relies on Next.js's routing system to discover all possible pages. If the router doesn't recognize a route pattern or doesn't have a way to generate all instances of that pattern during the build, those pages will not be included in the static export. This is precisely what happened with the 1,200 factor pages.

The developer's approach to generating these pages involved programmatically creating files or routes that they assumed the App Router would pick up. However, the App Router's routing logic, particularly concerning dynamic segments, requires explicit definition or a clear pattern that the build process can traverse. Simply creating a large number of files in a directory structure that mimics the desired URL pattern is insufficient if the router's internal matching logic doesn't account for it. The static export process, therefore, only included the pages that the App Router had successfully identified and processed, leaving the vast majority absent.

The Real-World Traffic: An Honest Postscript

Beyond the technical hurdle of getting the pages to render, the developer also shared an important postscript about the actual traffic these pages received. Many discussions around programmatic SEO focus heavily on the technical implementation and the potential for generating thousands of pages. However, the real-world impact—how users discover and interact with these pages—is often overlooked. In this case, despite the effort to generate 1,200 factor pages, the traffic they received was minimal. This highlights a crucial point for developers and founders: simply generating a large number of pages does not guarantee visibility or user engagement.

The lack of significant traffic suggests that factors beyond URL structure play a vital role in SEO and user acquisition. Content quality, relevance, user intent, and effective promotion are paramount. The 1,200 pages, while technically an impressive feat of generation, did not resonate enough with search engines or users to drive substantial traffic. This outcome serves as a valuable lesson: while programmatic SEO can be a powerful tool, it must be paired with a strong understanding of content strategy and user needs to be truly effective.

Lessons Learned and Future Approaches

The experience with factorcalculator.org and Next.js App Router provided several key takeaways. Firstly, a deep understanding of Next.js's routing capabilities, especially with dynamic and partial dynamic segments, is essential. Developers must consult the documentation carefully to ensure their routing strategy aligns with the framework's capabilities. For instance, using generateStaticParams within dynamic route segments is the correct mechanism in the App Router to inform Next.js about the specific parameters it should pre-render at build time for static generation.

Secondly, the efficacy of programmatic SEO is not solely about quantity. The success of generating thousands of pages hinges on their inherent value and discoverability. A more robust strategy might involve focusing on fewer, higher-quality pages, or employing more sophisticated SEO techniques to ensure the generated content ranks and attracts users. The developer's honest reflection on the minimal traffic underscores that technical implementation is only one part of the equation. The ultimate success of such a strategy depends on whether the generated content meets a genuine user need and is discoverable through effective search engine optimization and promotion.

The incident with the 1,200 ignored pages serves as a cautionary tale. It demonstrates that even with a seemingly straightforward application structure, subtle misinterpretations of framework features can lead to significant problems. For anyone looking to leverage programmatic SEO with Next.js, especially within the App Router paradigm, meticulous attention to route definition, parameter generation, and the actual value proposition of the generated content is non-negotiable.