# Next.js static export hosting

Host a Next.js site built with output: "export": next build writes out/, and npx lobsite deploys it with HTTPS, forms and a preview URL for every deploy.

On the web at https://lobsite.com/hosting/nextjs

```sh
npm run build && npx lobsite
```

With output: "export" in next.config, next build writes out/, which is what gets deployed.

Next.js can build a site that needs no server: set `output: "export"` and `next build` writes every page as HTML into `out/`. Lobsite hosts that folder. Run `npm run build`, then `npx lobsite`, and the site is live at a `*.lobsite.app` address with HTTPS. To be clear from the start: this page is about static exports. Server rendering, API routes and middleware need a Node.js host such as Vercel.

## How it works

1. **Turn on static export** in `next.config.js` with `output: "export"` (see below), then run `npm run build`. The site lands in `out/`.
2. **Run `npx lobsite`** in the project. It deploys `out/`, not `public/` or `.next/`. The first deploy needs no account and lasts 6 hours.
3. **Keep it** with the claim link, in a free account. After that, each `npm run build && npx lobsite` updates the same address.

## next.config.js for a static export

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;
```

- **`output: "export"`** makes `next build` write `out/`. The old `next export` command is gone since Next.js 14; this setting replaced it.
- **`images: { unoptimized: true }`** is needed if you use `next/image`: the default loader resizes images on a server per request. With it, images are served as they are; resize them before the build, or use a custom loader.
- **`trailingSlash`** can stay off. Pages are written as `about.html`, and Lobsite serves them at `/about`.

## What a static export can't do

The Next.js docs list the features that need a server. The ones people hit most:

- **API routes and Route Handlers** other than static `GET` ones. Send forms to `/_lobsite/forms/contact` instead; see [forms](https://lobsite.com/features/forms).
- **`redirects`, `rewrites` and `headers` in next.config.** Move redirects and headers to `lobsite.toml`, where they apply to every request; the [Redirect Generator](https://lobsite.com/tools/redirect-generator) writes the rules.
- **Middleware, Server Actions, ISR, and `cookies()` or `headers()`** in pages.
- **Dynamic routes without `generateStaticParams`**: every page has to be known at build time.

If your app relies on these, it isn't a static site, and a host that runs Next.js on a server is the right choice.

## Next.js hosts compared

| | Lobsite | Vercel | Netlify | GitHub Pages |
|---|---|---|---|---|
| Static export (`output: "export"`) | Yes | Yes | Yes | Yes |
| Server rendering, API routes, middleware | No | Yes | Yes | No |
| Builds on the server | No: you deploy `out/` | Yes | Yes | In GitHub Actions |
| Account before the first deploy | No: live 6 hours, then keep it free | Yes | Yes | Yes, and a repository |
| Forms without a backend | Yes, once the site is in an account | No | Yes | No |
| Custom domain | Yes, free | Yes | Yes | Yes |

Vercel makes Next.js and runs all of it. For a marketing site, a blog or docs built as a static export, Lobsite is the simpler host: one command, only changed files uploaded, a preview URL for every deploy.

## Frequently asked questions

### Can I host a Next.js app with server-side rendering here?

No. Lobsite serves files, so only a static export works. If pages use `getServerSideProps`, Server Actions or dynamic rendering, host it where Next.js runs on a server.

### Why are my next/image images broken after export?

The default image loader needs a server. Add `images: { unoptimized: true }` to `next.config.js`, or set a custom loader that points at an image CDN, and build again.

### Does my Next.js 404 page work?

Yes. `next build` writes `404.html` from your `not-found` page (App Router) or `pages/404` (Pages Router), and Lobsite serves it for any address that doesn't exist.

### Can I use the App Router with a static export?

Yes. Server Components render at build time; client components run in the browser as usual. Only features that need a request at runtime are off limits.