Deploying Next.js applications

2 min read Updated 18 hours ago

Next.js on Ploi Cloud

Next.js applications can be deployed on Ploi Cloud in two different modes: static export for maximum performance and server-side rendering for dynamic content.

Choosing between static export and SSR

Static export (recommended for most sites)

Best for sites that can be pre-generated at build time:

  • Marketing websites and blogs
  • Documentation sites
  • E-commerce product catalogs
  • Portfolio websites
  • Content that doesn't change per-user

Server-side rendering (SSR)

Required for applications with:

  • User authentication and personalized content
  • Real-time data that changes frequently
  • Server-side API routes
  • Dynamic meta tags for SEO
  • ISR (Incremental Static Regeneration)

Static export configuration

To deploy a static Next.js site:

  1. Update next.config.js:
module.exports = {
  output: 'export',
  // Optional: Configure base path if not serving from root
  // basePath: '/docs',
}
  1. Application settings:
  • Start command: Leave empty
  • Build commands:
npm ci
npm run build
  1. Package.json scripts:
{
  "scripts": {
    "build": "next build",
    "start": "next start"
  }
}

Your static files will be served via Nginx for optimal performance.

Server-side rendering configuration

For applications requiring Next.js server features:

  1. Application settings:
  • Start command: npm run start
  • Build commands:
npm ci
npm run build
  1. Environment variables:
NODE_ENV=production
NEXT_PUBLIC_API_URL=https://api.example.com

Environment variables

Next.js uses two types of environment variables:

  • Server-side only: Regular environment variables
  • Client-side: Prefixed with NEXT_PUBLIC_

Example:

DATABASE_URL=postgres://...          # Server only
NEXT_PUBLIC_API_URL=https://api...  # Available in browser

API routes

When using SSR mode, Next.js API routes work seamlessly:

// pages/api/hello.js or app/api/hello/route.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Ploi Cloud!' })
}