# Purpose of the Pages Directory in Open SEO: Route Structure Explained > Open SEO omits a pages directory, storing route components in src/routes/ and managing them via src/router.tsx and src/routeTree.gen.ts for efficient routing. - Repository: [Every App/open-seo](https://github.com/every-app/open-seo) - Tags: internals - Published: 2026-08-16 --- **Open SEO does not use a `pages` directory; instead, route components are stored in `src/routes/` and orchestrated by [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) alongside the generated [`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/src/routes/verify-email.tsx)** – Handles the email verification UI flow ([source](https://github.com/every-app/open-seo/blob/main/src/routes/verify-email.tsx)) - **[`src/routes/reset-password.tsx`](https://github.com/every-app/open-seo/blob/main/src/routes/reset-password.tsx)** – Renders the password reset interface ([source](https://github.com/every-app/open-seo/blob/main/src/routes/reset-password.tsx)) - **[`src/routes/forgot-password.tsx`](https://github.com/every-app/open-seo/blob/main/src/routes/forgot-password.tsx)** – Contains the "forgot password" page logic ([source](https://github.com/every-app/open-seo/blob/main/src/routes/forgot-password.tsx)) 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`](https://github.com/every-app/open-seo/blob/main/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](https://github.com/every-app/open-seo/blob/main/src/router.tsx)). ### Generated Route Tree Supporting type-safe navigation, **[`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/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](https://github.com/every-app/open-seo/blob/main/src/routeTree.gen.ts)). ## 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`](https://github.com/every-app/open-seo/blob/main/verify-email.tsx) defining individual routes. - **Centralized routing logic** is handled by [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx), which assembles the route table. - **Type-safe navigation** is enforced via the generated [`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/verify-email.tsx), [`reset-password.tsx`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) correctly imports the new component if not auto-generated. ### Is [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) manually maintained or auto-generated? [`src/router.tsx`](https://github.com/every-app/open-seo/blob/main/src/router.tsx) appears to be a central assembly file that imports route components, while **[`src/routeTree.gen.ts`](https://github.com/every-app/open-seo/blob/main/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/`.