Tutorial: Host a Next.js Static Export on Filebase

Export the Site Statically

Filebase Sites serves static files, so a Next.js project needs to be exported ahead of time. That means turning on output: 'export'and working from the generated out/ directory instead of the full project.

Enable Static Export

If your app depends on server-side features like API routes or runtime rendering, you will need to remove or replace those pieces before deploying to Filebase. Static export works when every route can be generated at build time.

In next.config.js or next.config.mjs, add:

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

module.exports = nextConfig;

If you use ESM, export the config with export defaultinstead. After that, next build will generate a static export in out/.

Build the Project

From your project root:

npm run build

Next.js will generate the static site into out/, includingindex.html at the root and route folders for exported pages.

Upload the Contents of out/

In Filebase, create a bucket and upload the contents of out/. The bucket root should contain index.htmland your route folders directly.

Do not upload the out folder itself. If the exported files are nested one level too deep, the site will resolve to the wrong path.

Keep only the exported site files in that bucket. After the upload, copy the bucket CID from the bucket storing those files. You will use that CID when you create the site.

Create the Site

Open Sites in the dashboard and create a new site, then paste in the bucket CID you copied from the bucket storing the exported files. Filebase will use that CID as the site’s content source.

Other Frameworks

We also have framework-specific guides for Vite, Remix, Gatsby, Astro, and Docusaurus.