Host a Next.js site as a static export

Next.js can generate a fully static version of your site. If your pages don’t need request-time server features, a static export is faster to serve and simpler to host.

1. Enable static export

// next.config.ts
import type { NextConfig } from "next";
 
const config: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};
 
export default config;

• output: "export" writes HTML for every route to out/.
• trailingSlash: true produces about/index.html, which maps neatly to /about/.
• images.unoptimized is required because the default image optimizer needs a server.

2. Make dynamic routes static

Routes like app/blog/[slug]/page.tsx need generateStaticParams so Next.js knows which pages to build:

export function generateStaticParams() {
  return posts.map((p) => ({ slug: p.slug }));
}

3. Replace server-only features

These need a running server and won’t work in a static export:

• Server Actions and route handlers that read the request
• Proxy (middleware)
• ISR and on-demand revalidation
• cookies() / headers() at request time

The most common one is a contact form using a Server Action. Replace it with a plain form:

<form action="/_forms/contact" method="POST">
  <input name="email" type="email" required />
  <textarea name="message" />
  <button>Send</button>
</form>

4. Build and upload

npx next build

Upload the out/ folder to your StaticHero site. Done.