Static export option in NextJS

Introduction

The static export option lets you turn your Next.js app into simple HTML files. This means your site can load very fast and work without a server.

You want to make a blog or portfolio site that rarely changes.

You want to host your site on a simple web server or CDN without Node.js.

You want faster page loads because pages are pre-built.

You want your site to work offline or with slow internet.

You want to avoid server costs by serving only static files.

Syntax

NextJS

next export

Run next export after next build to create static HTML files.

Your pages must use getStaticProps or no data fetching to work with static export.

Examples

This builds your Next.js app and then exports it as static HTML files in the out folder.

NextJS

npm run build
npm run export

Run both commands in one line to build and export your app quickly.

NextJS

next build && next export

Sample Program

This simple Next.js page uses getStaticProps to provide data at build time. When you run next export, it creates a static HTML file with the message.

NextJS

import React from 'react';

export default function Home({ message }) {
  return <main><h1>{message}</h1></main>;
}

export async function getStaticProps() {
  return {
    props: { message: 'Hello from static export!' }
  };
}

Important Notes

Dynamic routes need special handling with getStaticPaths to work with static export.

API routes do not work with static export because there is no server.

Summary

Static export creates fast, server-free HTML files from your Next.js app.

Use next export after building your app to generate static files.

Works best for sites with mostly fixed content and no server-side code.