# How to Use Dynamic Route Handlers in 9router: Implementation Guide

> Learn how to implement dynamic route handlers in 9router using Nextjs API routes. Force fresh server-side code execution and avoid static prerendering for dynamic content.

- Repository: [decolua/9router](https://github.com/decolua/9router)
- Tags: how-to-guide
- Published: 2026-05-08

---

**Yes, 9router fully supports dynamic route handlers through Next.js API routes that export `dynamic = "force-dynamic"`, forcing every request to execute fresh server-side code without static prerendering.**

9router is an open-source AI routing layer built on Next.js that leverages dynamic route handlers to ensure real-time provider management and configuration updates. By utilizing Next.js 13+ App Router conventions, the codebase implements forced dynamic execution across all API endpoints, allowing the system to respond to authentication tokens, database changes, and external provider updates instantly.

## How Dynamic Route Handlers Work in 9router

In 9router, every server-side API endpoint declares dynamic behavior through a static export at the top of the route file. According to the 9router source code, this pattern appears consistently across the codebase:

```js
export const dynamic = "force-dynamic";

```

This directive instructs Next.js to bypass static site generation (SSG) and treat the route as server-rendered on every request. As implemented in [`src/app/api/providers/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/providers/route.js), this enables the handler to read request bodies at runtime, query databases or external services on each call, and respect per-request headers such as authentication tokens.

The architecture works correctly in both the Vercel Edge Runtime and local Node.js servers, ensuring consistent behavior across deployment environments.

## Creating a Dynamic API Route in 9router

You can add custom dynamic endpoints to 9router by following the same pattern used by the core APIs:

1. **Create a file** under `src/app/api/[your-endpoint]/route.js` (or `.ts` for TypeScript).
2. **Export the dynamic constant** at the top of the file.
3. **Implement the handler** using `NextResponse` from `next/server`.

Here is a minimal implementation:

```js
// src/app/api/hello/route.js
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET(req) {
  const now = new Date().toISOString();
  return NextResponse.json({ message: "Hello from 9router!", time: now });
}

```

When you access `/api/hello`, the endpoint returns the current timestamp on every request because the route is forced to run dynamically.

## Real-World Examples from the 9router Source Code

The 9router repository demonstrates several production-grade dynamic route implementations:

### Provider Management Endpoint

The providers API at [`src/app/api/providers/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/providers/route.js) showcases a full-featured dynamic route that creates and lists AI provider connections. Because it exports `force-dynamic`, new provider configurations are immediately available without requiring a rebuild.

### Streaming Usage Data

The usage stream endpoint in [`src/app/api/usage/stream/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/usage/stream/route.js) demonstrates how dynamic routes handle streaming responses. This pattern ensures that real-time usage statistics flow to the client without caching or static generation delays.

### Combo Definitions API

Located at [`src/app/api/combos/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/combos/route.js), this endpoint handles CRUD operations for model combinations while maintaining dynamic execution. The `dynamic = "force-dynamic"` export ensures that combo definitions reflect the latest database state on every request.

### Disabled Models Handler

The [`src/app/api/models/disabled/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/models/disabled/route.js) file provides another example of dynamic route handlers in 9router, managing disabled model states with immediate consistency across requests.

## Advanced Dynamic Route Patterns

Beyond basic API routes, 9router implements advanced patterns for handling runtime data and client-side optimization.

### Processing Request Bodies at Runtime

Dynamic routes can parse incoming JSON bodies on each call. This example shows how to handle POST data:

```js
// src/app/api/echo/route.js
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function POST(req) {
  const { payload } = await req.json();
  return NextResponse.json({ received: payload });
}

```

Because the route executes dynamically, it can echo any JSON payload sent by the client without caching previous request states.

### Client-Side Dynamic Imports

While API routes use `force-dynamic`, 9router also leverages Next.js dynamic imports for client-side components. The translator dashboard at `src/app/(dashboard)/dashboard/translator/page.js` implements this pattern:

```js
import dynamic from "next/dynamic";

const Editor = dynamic(() => import("@monaco-editor/react"), { ssr: false });

export default function TranslatorPage() {
  return <Editor height="60vh" theme="vs-dark" />;
}

```

This approach lazy-loads the Monaco editor only on the client, keeping the server bundle lightweight while maintaining dynamic functionality.

## Summary

- **9router** is built on Next.js and uses `export const dynamic = "force-dynamic"` in every API route to ensure server-side execution.
- Core endpoints like [`src/app/api/providers/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/providers/route.js) and [`src/app/api/usage/stream/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/usage/stream/route.js) demonstrate production patterns for real-time data handling.
- You can create custom dynamic routes by placing files under `src/app/api/` and exporting the dynamic constant.
- Dynamic routes support runtime request body parsing, database queries, and streaming responses without static prerendering.
- Client-side dynamic imports via `next/dynamic` complement the API patterns for optimized bundle sizes.

## Frequently Asked Questions

### Does 9router support static generation for API routes?

No, 9router explicitly disables static generation for API routes by exporting `dynamic = "force-dynamic"` in every endpoint. This ensures that authentication checks, database queries, and provider configurations are always current without requiring a rebuild.

### Can I use TypeScript for dynamic route handlers in 9router?

Yes, you can create TypeScript route files (`.ts` or `.tsx`) under `src/app/api/`. The `dynamic` export and `NextResponse` imports work identically in TypeScript, providing full type safety for request and response objects.

### How do dynamic route handlers affect performance in 9router?

Dynamic route handlers execute on every request, which introduces slight latency compared to static generation but ensures real-time accuracy. For high-traffic endpoints, 9router mitigates this through efficient database queries and optional edge runtime deployment.

### Where should I place custom dynamic API routes in 9router?

Place custom routes under `src/app/api/[endpoint-name]/route.js` following the App Router convention. For example, [`src/app/api/custom-models/route.js`](https://github.com/decolua/9router/blob/main/src/app/api/custom-models/route.js) would create an endpoint at `/api/custom-models` that automatically inherits the dynamic execution behavior.