Next.js preview describes two different jobs: previewing a build before merge and previewing unpublished content before publication.
Keep the concepts separate. A deployment preview validates code and integration changes in an isolated environment; Draft Mode tells a running Next.js app to fetch draft content for an authorised viewer.
Table of contents
- Use deployment previews for code changes
- Use Draft Mode for unpublished content
- Protect previews from leaks
- Test what production will run
- How this fits the rest of the stack
- FAQ
Use deployment previews for code changes
Create an isolated deployment from a branch or pull request using production-like build commands and environment structure. Give it a unique URL, run smoke tests, and remove or expire it when the change closes.
Preview environments need separate credentials and data boundaries. Do not casually point untrusted branch code at production databases or powerful API keys.
Use Draft Mode for unpublished content
In the App Router, a protected route can validate a secret and intended slug, enable Draft Mode, then redirect to the content page. The page fetches draft data only when the draft cookie is present.
import { draftMode } from 'next/headers'
export async function GET(request) {
const draft = await draftMode()
draft.enable()
return new Response(null, { status: 204 })
}The snippet shows the mechanism, not a complete secure endpoint. Validate a secret, restrict redirects, and integrate with the CMS according to current Next.js documentation.
Protect previews from leaks
- Use unguessable secrets and rotate them.
- Validate destination paths to prevent open redirects.
- Require identity when draft content is sensitive.
- Set noindex or access controls for non-public deployments.
- Keep preview credentials separate from production.
- Avoid exposing unpublished data through shared caches.
Test what production will run
A development server is not a preview of production behaviour. Run next build and the production start path, then test server rendering, static generation, image handling, environment variables, rewrites, headers, and API routes.
For self-hosting, confirm the platform supports the Next.js features in use and that persistent or shared state does not live on an ephemeral local filesystem.
How this fits the rest of the stack
Use branch previews for code and Draft Mode for content, with separate access controls for each. Model a Next.js service in the RunxBuild calculator and deploy the repository through the RunxBuild dashboard.
Useful related references:
- Deploy Previews: What They Are, How They Work, and the Gotchas
- Run React App: Local Preview, Production Build, and the Part People Skip
- Ephemeral Environment: The PR-Preview Pattern, the On-Demand Spin-Up, the Cost, and the One That Actually Saves You Money
- Next.js services on RunxBuild
FAQ
What does Next.js preview mean?
It can mean an isolated deployment for a code branch or Draft Mode for viewing unpublished CMS content.
Is Draft Mode the same as next dev?
No. Draft Mode changes content fetching in a running app; next dev is the local development server.
Should preview deployments use production data?
Prefer isolated or sanitised data and least-privilege credentials. Unreviewed branch code should not receive broad production access.
How do I keep a preview out of search results?
Use authentication where possible and add appropriate noindex controls, while remembering robots directives are not access control.