Add support for development only pages

[mmmulani]

We have a bunch of dev time only pages that we want to exclude from production builds. While there are some workarounds (like rendering an empty component in prod), I would rather have something that completely excludes the dev pages from the build completely.

From looking at the Next.js code, it looks like some code could be added in these two places to support such a use case:

next.js/packages/next/server/dev/next-dev-server.ts

Line 227 in 9343b67

for (const [fileName, { accuracy }] of knownFiles) {

next.js/packages/next/build/index.ts

Line 247 in 9343b67

.traceAsyncFn(() => collectPages(pagesDir, config.pageExtensions))

I was imagining something like a excludeFromProduction property on the next config, with the value being an array of regexes.

Is there any interest in accepting a change that does this? I'm happy to work on a PR.

[ederuiter]

I was tinkering with this a bit and found a solution that works with the current version of nextjs.
The only downside is that you need to use custom page extension for it to work (this requires you to rename all the pages including _app and _document to have a .page.(tsx/ts/jsx/js/md/mdx) extension) .

The idea is to have the pageExtensions config option in next.config.js depend on the environment. For production we set it to only page.tsx, page.ts, page.js etc .. and in development we will also add dev.tsx, dev.ts, dev.js etc

So a page named sandbox.dev.tsx will now only be available in development mode, while a page named docs.page.tsx will be available in both development and production environments.

I wrote a simple function withOnlyDev that allows you easily wrap your pageExtensions config. See my next.config.js below:

const withOnlyDev = (config) => {
    if (process.env.NODE_ENV !== "development") {
        return config
    }
    if (config instanceof RegExp) {
        return new RegExp(config.source.replace('page', '(page|dev)'))
    }

    let res = []
    config.forEach((item) => {
        res.push(item)
        res.push(item.replace('page', 'dev'))
    })

    return res
}

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    /* config options here */
    reactStrictMode: true,
    pageExtensions: withOnlyDev(['page.js', 'page.jsx', 'page.ts', 'page.tsx', 'page.md', 'page.mdx']),
}

const withMDX = require('@next/mdx')({
    extension: withOnlyDev(/\.page\.mdx?$/),
})

module.exports = withMDX(nextConfig)

[StasNemy]

There is another solution if you already have a very old project or if you didn't consider that such a thing might be needed during the implementation of the basic set of pages.

You can create custom pages in a separate folder and, under certain env conditions, redirect them to mock data using webpack.NormalModuleReplacementPlugin. This mock data can return { notFound: true }.

[kasperbb]

We have something similar in our project. My solution was to redirect to 404 in getStaticProps for pages, or just run the notFound function for app. While this can be pretty manual for pages, in app it's pretty simple if you just place it in the layout for the dev pages.

[pastelmind]

Would your solution still bundle those dev pages and their dependencies into the production build artifacts (if using static exports)? I don't want to include dev-only dependencies in our bundles.

[rimoslav]

@pastelmind All of those pages are bundled, users just see /_not-found page.

[luixo]

I made a poor man's patch for that to work in my project, you can find it in another issue.