Deployment

This page covers building for production, configuring hosting platforms, ISR revalidation, robots.txt, sitemaps, and a pre-deployment checklist.

Building for Production

Run the standard Next.js build:

npm run build

During the build, Next.js will:

1. Call generateStaticParams() to get all page paths across all locales
2. Pre-render every page by fetching content from the Brease API
3. Fetch and configure redirects from next.config.ts
4. Generate static HTML, CSS, and JS bundles

Then start the production server:

npm start

Incremental Static Regeneration (ISR)

Pages are revalidated on a timer controlled by the BREASE_REVALIDATION_TIME environment variable (in seconds). The default is 30.

When a page is requested after the revalidation window, Next.js serves the cached version immediately and regenerates the page in the background. The next request receives the updated content.

Environment Variables

All hosting platforms need these environment variables:

Deploying to Vercel

Vercel is the recommended hosting platform for Next.js projects.

1. Set environment variables

In your Vercel project dashboard, go to Settings > Environment Variables and add:

• BREASE_TOKEN
• BREASE_ENV
• BREASE_DEFAULT_LOCALE
• BREASE_REVALIDATION_TIME (optional)

Set them for Production, Preview, and Development environments as needed.

2. Deploy

Push to your git repository. Vercel automatically builds and deploys:

git push origin main

Vercel handles the Node.js runtime, ISR, and edge caching automatically.

Deploying to Other Platforms

For platforms like Railway, Render, AWS, or self-hosted servers:

Requirements

• Node.js 18+ runtime
• Environment variables set in the platform's configuration
• Ability to run npm run build and npm start

Deploy steps

# Install dependencies
npm ci

# Build the application
npm run build

# Start the production server
npm start

The production server defaults to port 3000. Configure the PORT environment variable if your platform requires a different port.

Robots.txt

Use generateBreaseRobots to create a robots.txt route based on your site configuration:

// src/app/robots.ts
import { generateBreaseRobots } from 'brease-next/server'
import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return generateBreaseRobots('https://example.com')
}

generateBreaseRobots accepts a site URL and an optional options object:

const robots = generateBreaseRobots('https://example.com', {
  // Additional options can be passed here
})

Sitemap

Use generateSitemap to create a dynamic sitemap from all published pages:

// src/app/sitemap.ts
import { generateSitemap } from 'brease-next/server'
import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const result = await generateSitemap()

  if (!result.success) {
    return []
  }

  return result.data
}

generateSitemap returns a BreaseResponse<MetadataRoute.Sitemap> containing URLs for all published pages across all locales.

CORS and Preview Mode

If you use Brease's live preview feature (where the CMS editor iframes your site), configure Content Security Policy headers to allow framing from the CMS domain:

// next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "frame-ancestors 'self' https://app.brease.io",
          },
        ],
      },
    ]
  },
  // ... other config
}

Redirects

Redirects are fetched from the Brease API at build time and configured in next.config.ts:

// next.config.ts
import { fetchRedirects } from 'brease-next/server'

const nextConfig = {
  async redirects() {
    const result = await fetchRedirects()

    if (!result.success) {
      console.error('Failed to fetch redirects:', result.error)
      return []
    }

    return result.data.map((redirect) => ({
      source: redirect.source,
      destination: redirect.destination,
      permanent: redirect.type === '301' || redirect.type === '308',
    }))
  },
}

Redirects are baked into the build output. To update redirects after changing them in the CMS, trigger a new build or redeploy.

Deployment Checklist

Before going live, verify each item:

Environment

• [ ] BREASE_TOKEN is set on the hosting platform
• [ ] BREASE_ENV is set and points to the production environment
• [ ] BREASE_DEFAULT_LOCALE is set to the correct default locale
• [ ] BREASE_REVALIDATION_TIME is set (or using the default of 30s)

Configuration

• [ ] next.config.ts has remotePatterns for the Brease media CDN
• [ ] next.config.ts has the redirects() function using fetchRedirects
• [ ] robots.ts is configured with generateBreaseRobots
• [ ] sitemap.ts is configured with generateSitemap

CMS

• [ ] Preview domain is set in the Brease CMS settings (if using live preview)
• [ ] All pages are published in the target environment
• [ ] Structured data is configured for key pages (homepage, about, etc.)

Build

• [ ] npm run build completes without errors
• [ ] All expected pages are pre-rendered (check build output)
• [ ] No missing section key warnings in the build log
• [ ] Images load correctly from the CDN

Verification

• [ ] Homepage renders correctly
• [ ] Navigation links work (internal and external)
• [ ] Multi-locale pages load the correct translations
• [ ] Redirects work as configured in the CMS
• [ ] Meta tags and Open Graph data appear in page source
• [ ] Structured data validates in Google's Rich Results Test
• [ ] 404 pages return the correct status code

Next Steps

• Project Setup Guide — review your initial configuration
• Structured Data & Custom Code — verify SEO output
• Multi-Locale Sites — ensure all locales deploy correctly