Deploy Next.js on WebStadia

WebStadia supports both static export and SSR (server-side rendering) for Next.js applications.

Static Export (CDN)

Best for blogs, portfolios, and marketing sites. No server needed.

1. Configure for static export

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

2. Build settings

Setting	Value
Build Command	npm run build
Publish Directory	out

3. Deploy

Connect your GitHub repository or upload a zip of your project. WebStadia detects output: 'export' and deploys to the CDN.

Limitations

• No API routes, middleware, or server-side rendering
• Image optimization requires images: { unoptimized: true }
• Dynamic routes need generateStaticParams()

Server-Side Rendering (Serverless)

For apps using getServerSideProps, API routes, App Router with server components, or middleware.

1. Configure for standalone

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
}

module.exports = nextConfig

If you don't set any output mode, WebStadia auto-detects Next.js and enables standalone mode for you.

2. Build settings

Setting	Value
Build Command	npm run build
Publish Directory	(leave empty - auto-detected)

3. Deploy

Upload your project zip or connect GitHub. WebStadia will:

1. Install dependencies and build your project
2. Package the standalone output for AWS Lambda
3. Upload static assets (.next/static/, public/) to the CDN
4. Deploy the server to a Lambda function
5. Route requests through the global CDN - static assets served from edge, dynamic pages rendered on Lambda

What works

• getServerSideProps and getStaticProps with revalidate
• API routes (/api/*)
• App Router with server components
• Middleware
• Dynamic routes (/blog/[slug])

What to know

• Cold starts are ~500ms-2s on first request, warm requests are fast
• next/image optimization runs on Lambda - works but adds latency
• ISR revalidation works but revalidated pages don't persist across cold starts

Using WebStadia Forms with Next.js

'use client'
import { useState } from 'react'

export default function ContactForm() {
  const [status, setStatus] = useState('idle')

  async function handleSubmit(e) {
    e.preventDefault()
    setStatus('submitting')

    const data = Object.fromEntries(new FormData(e.target))

    const res = await fetch('https://api.webstadia.com/v1/fm/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data })
    })

    setStatus(res.ok ? 'success' : 'error')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" />
      <button disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>
      {status === 'success' && <p>Thanks!</p>}
    </form>
  )
}

Using Data Tables with Next.js

async function getProducts() {
  const res = await fetch('https://api.webstadia.com/v1/dt/YOUR_TABLE_ID')
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <div>
      {products.map((product, i) => (
        <div key={i}>
          <h2>{product.Name}</h2>
          <p>${product.Price}</p>
        </div>
      ))}
    </div>
  )
}