Skip to main content

One-Click Deploy

Deploy FlatWP to production in minutes with one-click deployment buttons.

Deployment Options​

PlatformBest ForFree TierCustom DomainAuto Deploy
VercelNext.js apps✅ Yes✅ Yes✅ Yes
NetlifyStatic sites✅ Yes✅ Yes✅ Yes
RailwayFull-stack❌ Credit required✅ Yes✅ Yes

Deploy to Vercel (Recommended)​

Vercel is the company behind Next.js and provides the best Next.js hosting experience.

1. Click Deploy Button​

Deploy with Vercel

2. Connect GitHub Account​

  1. Sign in to Vercel (or create account)
  2. Connect your GitHub account
  3. Choose repository name
  4. Click Create

3. Configure Environment Variables​

Add these required environment variables:

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress.com/graphql
REVALIDATION_SECRET=your-secure-secret-here
PREVIEW_SECRET=another-secure-secret
Generate Secrets
# Generate secure random strings
openssl rand -base64 32

4. Deploy​

Click Deploy and wait for the build to complete (~2 minutes).

5. Configure WordPress Plugin​

  1. Go to your WordPress admin
  2. Navigate to Settings → FlatWP
  3. Enter your deployment URL: 
    Next.js Site URL: https://your-site.vercel.app
    Revalidation Secret: [same as REVALIDATION_SECRET]
  4. Click Save Settings

6. Test Connection​

  1. Make a change in WordPress
  2. Publish or update
  3. Visit your Vercel site - changes should appear within seconds

Deploy to Netlify​

Netlify offers great static site hosting with automatic deployments.

1. Click Deploy Button​

Deploy to Netlify

2. Connect Repository​

  1. Sign in to Netlify
  2. Connect GitHub account
  3. Authorize Netlify

3. Configure Site​

Build Settings:

Build command: npm run build
Publish directory: .next

Environment Variables:

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress.com/graphql
REVALIDATION_SECRET=your-secure-secret
PREVIEW_SECRET=your-preview-secret

4. Deploy Site​

Click Deploy Site and wait for build completion.

5. Configure Custom Domain (Optional)​

  1. Go to Site Settings → Domain Management
  2. Click Add Custom Domain
  3. Follow DNS setup instructions

Deploy to Railway​

Railway provides full-stack hosting with database support.

1. Click Deploy Button​

Deploy on Railway

2. Connect GitHub​

  1. Sign in to Railway
  2. Connect GitHub account
  3. Select repository

3. Configure Environment​

Railway will prompt for environment variables:

NEXT_PUBLIC_WORDPRESS_API_URL=
REVALIDATION_SECRET=
PREVIEW_SECRET=

4. Deploy​

Railway will automatically deploy your application.

5. Get Deployment URL​

  1. Go to your Railway project
  2. Find Deployments tab
  3. Copy the deployment URL

Post-Deployment Configuration​

Update WordPress Plugin Settings​

After deploying to any platform:

  1. WordPress Admin → Settings → FlatWP
  2. Update Next.js Site URL with your deployment URL:
    • Vercel: https://your-site.vercel.app
    • Netlify: https://your-site.netlify.app
    • Railway: https://your-site.up.railway.app
  3. Verify Revalidation Secret matches
  4. Click Save Settings
  5. Look for green "Connected" status

Test Webhook Connection​

  1. Create or update a post in WordPress
  2. Publish the changes
  3. Check your deployed site - changes should appear immediately

Custom Domain Setup​

Vercel Custom Domain​

  1. Go to Project Settings → Domains
  2. Click Add Domain
  3. Enter your domain name
  4. Follow DNS configuration instructions: 
    Type: A
    Name: @
    Value: 76.76.21.21
    Type: CNAME
    Name: www
    Value: cname.vercel-dns.com
  5. Wait for DNS propagation (5-60 minutes)

Netlify Custom Domain​

  1. Go to Site Settings → Domain Management
  2. Click Add Custom Domain
  3. Configure DNS: 
    Type: A
    Name: @
    Value: 75.2.60.5
    Type: CNAME
    Name: www
    Value: your-site.netlify.app

Railway Custom Domain​

  1. Go to Settings → Domains
  2. Click Custom Domain
  3. Enter domain and follow DNS instructions

Automatic Deployments​

All platforms support automatic deployments on git push:

How It Works​

  1. Make changes to your code locally
  2. Commit changes: git add . && git commit -m "Update"
  3. Push to GitHub: git push
  4. Platform automatically detects push
  5. Builds and deploys new version
  6. Updates live site

Branch Deployments​

Vercel:

  • main branch → Production
  • Other branches → Preview deployments

Netlify:

  • main branch → Production
  • Pull requests → Deploy previews

Railway:

  • Configured branch → Production

Environment Management​

Production vs Preview​

Production Environment:

NEXT_PUBLIC_WORDPRESS_API_URL=https://production-wp.com/graphql

Preview Environment:

NEXT_PUBLIC_WORDPRESS_API_URL=https://staging-wp.com/graphql

Managing Secrets​

Vercel​

  1. Project Settings → Environment Variables
  2. Add variables per environment:
    • Production: Live site
    • Preview: Feature branches
    • Development: Local development

Netlify​

  1. Site Settings → Environment Variables
  2. Add variables (apply to all deploys by default)
  3. Use context for branch-specific variables: 
    [context.production.environment]
      NEXT_PUBLIC_WORDPRESS_API_URL = "https://production.com/graphql"

    [context.deploy-preview.environment]
      NEXT_PUBLIC_WORDPRESS_API_URL = "https://staging.com/graphql"

Railway​

  1. Go to Variables tab
  2. Add environment variables
  3. Redeploy to apply changes

Performance Optimization​

Enable Edge Caching​

All platforms enable edge caching automatically for optimal performance.

Benefits:

  • Fast global delivery
  • Reduced server load
  • Better user experience

Image Optimization​

Vercel: Automatic with next/image Netlify: Use Netlify Image CDN Railway: Configure image proxy

Analytics Setup​

Vercel Analytics​

  1. Install package:

    pnpm add @vercel/analytics

  2. Add to app/layout.tsx:

    import { Analytics } from '@vercel/analytics/react';

    export default function RootLayout() {
      return (
        <html>
          <body>
            {children}
            <Analytics />
          </body>
        </html>
      );
    }

  3. Enable in Vercel dashboard

Troubleshooting​

Build Fails​

Error: "Build failed with exit code 1"

Solutions:

  1. Check build logs for specific errors
  2. Verify environment variables are set
  3. Test build locally: pnpm build
  4. Check Node.js version matches requirements (20+)

Environment Variables Not Working​

Problem: Variables showing as undefined

Solutions:

  1. Verify variable names match exactly
  2. Ensure NEXT_PUBLIC_ prefix for client-side variables
  3. Redeploy after adding variables
  4. Check for typos in variable names

Webhook Not Working​

Problem: WordPress changes don't trigger revalidation

Solutions:

  1. Verify REVALIDATION_SECRET matches in both places
  2. Check Next.js Site URL is correct in WordPress
  3. Test endpoint manually: 
    curl -X POST https://your-site.com/api/revalidate \
      -H "Content-Type: application/json" \
      -d '{"secret":"your-secret","paths":["/"]}'

Slow Build Times​

Problem: Builds taking >10 minutes

Solutions:

  1. Limit generateStaticParams() for development: 
    const limit = process.env.NODE_ENV === 'production' ? 1000 : 10;
  2. Use incremental builds if available
  3. Optimize dependencies

Out of Memory​

Problem: "JavaScript heap out of memory"

Solution: Increase memory limit in build command:

{
  "scripts": {
    "build": "NODE_OPTIONS='--max-old-space-size=4096' next build"
  }
}

Best Practices​

1. Use Environment-Specific WordPress Instances​

# Production
NEXT_PUBLIC_WORDPRESS_API_URL=https://cms.mysite.com/graphql

# Staging
NEXT_PUBLIC_WORDPRESS_API_URL=https://staging-cms.mysite.com/graphql

2. Enable HTTPS Everywhere​

All platforms provide free SSL certificates. Always use HTTPS.

3. Set Up Monitoring​

  • Enable platform analytics
  • Configure error tracking (e.g., Sentry)
  • Monitor Core Web Vitals

4. Implement Staging Environment​

Create staging branch for testing before production:

  1. Create staging branch
  2. Deploy to preview environment
  3. Test thoroughly
  4. Merge to main for production

5. Use Custom Domains​

Custom domains provide:

  • Better branding
  • Improved SEO
  • Professional appearance

Next Steps​

After successful deployment:

  1. Configure SEO - Optimize for search engines
  2. Set Up Analytics - Track visitor metrics
  3. Custom Domain - Use your own domain
  4. Performance Optimization - Fine-tune performance

See Also​