Purpose of the Pages Directory in Open SEO: Route Structure Explained

Open SEO does not use a pages directory; instead, route components are stored in src/routes/ and orchestrated by src/router.tsx alongside the generated src/routeTree.gen.ts file.

The every-app/open-seo repository implements a modern React-based routing architecture that diverges from conventional framework conventions. While developers often expect a pages/ folder when working with Next.js or similar meta-frameworks, this codebase organizes its UI layer differently to support type-safe, file-based routing without the legacy directory structure.

Why the Pages Directory Is Absent

Many React applications rely on a pages/ directory to automatically map file paths to URL routes. However, in the open-seo codebase, this pattern is intentionally omitted. The repository uses a centralized routing system where individual page components are decoupled from the URL mapping logic. This separation allows for explicit route configuration while maintaining type safety across the application.

The absence of a pages/** glob pattern in the root directory confirms that navigation logic is handled elsewhere, specifically within the src/ directory structure.

Route Organization in src/routes/

Rather than scattering page components across a flat pages folder, Open SEO collates all route-specific UI components under src/routes/. Each TypeScript React file in this directory represents a distinct URL endpoint.

Key route component files include:

• src/routes/verify-email.tsx – Handles the email verification UI flow (source)
• src/routes/reset-password.tsx – Renders the password reset interface (source)
• src/routes/forgot-password.tsx – Contains the "forgot password" page logic (source)

This structure keeps page components isolated in a dedicated namespace while allowing the router to import and register them programmatically.

Router Configuration Files

The mapping between URLs and the components in src/routes/ is managed by two critical files:

Central Router Assembly

The src/router.tsx file serves as the application’s routing entry point. This module imports the route components from src/routes/ and constructs the final routing table that the application uses to render the correct page based on the current URL (source).

Generated Route Tree

Supporting type-safe navigation, src/routeTree.gen.ts is an auto-generated file that provides the type definitions and route tree structure consumed by the router. This generation step ensures that link references and route parameters are statically checked at build time, preventing broken internal links (source).

Server Logic Separation

Server-side functionality—such as API endpoints and background jobs—is not co-located with the UI routes. Instead, these reside in src/serverFunctions/, keeping the src/routes/ directory strictly for presentational page components. This clear boundary between client-facing pages and server logic mirrors the architectural freedom gained by abandoning the monolithic pages directory pattern.

Summary

• No pages directory exists in the repository root; the conventional folder is replaced by a modular structure.
• Page components live in src/routes/*.tsx, with specific files like verify-email.tsx defining individual routes.
• Centralized routing logic is handled by src/router.tsx, which assembles the route table.
• Type-safe navigation is enforced via the generated src/routeTree.gen.ts file.
• Server-side code is isolated in src/serverFunctions/, separate from the UI routing layer.

Frequently Asked Questions

Does Open SEO use a pages directory like Next.js?

No. Unlike Next.js, which relies on a pages/ directory for file-system routing, Open SEO stores page components in src/routes/ and manages routing explicitly through src/router.tsx and generated type definitions.

Where are page components stored if not in a pages directory?

Page components are stored in src/routes/ as individual .tsx files (e.g., verify-email.tsx, reset-password.tsx). The router imports these files to build the application’s route map.

How do I add a new route to Open SEO?

Create a new TypeScript React component file inside src/routes/ (e.g., src/routes/new-feature.tsx). The build process or router generator will typically detect the new file and update the route tree, though you may need to verify that src/router.tsx correctly imports the new component if not auto-generated.

Is src/router.tsx manually maintained or auto-generated?

src/router.tsx appears to be a central assembly file that imports route components, while src/routeTree.gen.ts is explicitly generated to provide type-safe route definitions. The repository likely uses a code-generation tool to keep the route tree in sync with the files in src/routes/.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}