Development-only pages

[sovetski]

Goals

1. Allow developers to create pages that exist only during local development (e.g. localhost:3000/admin) but are automatically excluded from the production build.

2. Simplify workflows where developers need admin-like tools or content management interfaces without exposing them in production.

3. Provide a clean, official way to separate dev-only routes from production routes.

Non-Goals

1. This feature is not meant to replace authentication or access control for production apps.

2. It does not aim to provide a full admin dashboard framework.

3. It is not intended to manage environment-specific feature toggles beyond hiding/removing dev-only pages from production builds.

Background

It’s a common need in real-world projects to have pages only useful in development, for example, an internal admin page to seed data, debug APIs, or manage local content.
Currently, developers either:

Manually delete or exclude these pages before building for production.

Use environment checks (if (process.env.NODE_ENV === "development")) to guard rendering logic.

Follow community hacks like this article.

However, there’s no first-class support in Next.js to cleanly declare “this page should only exist in dev mode.”

Having official support would prevent mistakes (like accidentally deploying admin/debug tools) and improve the developer experience.

Proposal

Introduce a mechanism to define pages as “development-only.” Possible approaches:

A special filename convention (e.g. *.dev.tsx or [page].dev.tsx).

A config option inside next.config.js or within the page file itself (e.g. export const devOnly = true).

Automatically excluding those pages during the production build process.

At runtime in development, these pages would behave like normal Next.js pages. During next build, they would be omitted from the output, ensuring they don’t exist in production.

I would be interested in contributing to this feature if there’s agreement on the design.

[akewin]

That's really useful.