Deploy Next.js on WebStadia

WebStadia supports deploying Next.js applications with static export.

Setup

1. Configure Next.js for static export

Add output: 'export' to your next.config.js:

/** @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 the built out directory.

Notes

• Static export does not support API routes, middleware, or server-side rendering
• Image optimization with next/image requires a loader (use unoptimized: true or a custom loader)
• Dynamic routes need generateStaticParams() to be pre-rendered

// next.config.js for static export with images
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
}

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>
  )
}