Host a Next.js static export - Fluid

A Next.js app built as a static export is a site. Server Components work, because they run during next build. An app that renders on each request, or uses server actions, middleware or route handlers that run on each request, needs a server: make it a Mist app instead. See Site or App?.

Configure the export

next.config.mjs

export default {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

output: "export" writes plain files to out.
trailingSlash: true writes each page as about/index.html, which the site serves at /about.
images.unoptimized is needed because there is no image server.

Use the SDK

The SDK runs in the browser. Use it in a client component:

app/hello.tsx

"use client";
import { useEffect, useState } from "react";
import { fluid } from "@fluid-app/sites";

export function Hello() {
  const [name, setName] = useState<string | null>(null);
  useEffect(() => {
    fluid.auth.me().then((me) => setName(me.viewer?.name ?? null));
  }, []);
  return <p>{name ? `Hi, ${name}` : "Hi there"}</p>;
}

Deploy

fluid deploy

fluid deploy sees output: "export" in next.config and publishes out. Without it, fluid deploy treats the app as one that needs a server, explains why and publishes nothing. To publish an export by hand, run fluid sites publish --dir out.