Richard Mendes
December 17, 2025 • 10 minsHow static export works in Next.js 16, with examples and deployment tips
Static export in Next.js 16 allows you to generate a fully static HTML version of your app that can be deployed on any static or shared hosting provider.
Step 1: Open the next.config.ts file in your project root
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: 'export',
/* config options here */
};
export default nextConfig;
Step 2: Build the Next.js App for Static Export
Next.js creates two folders:
- .next → internal build files
- out → contains your static HTML files ready for deployment
If there are any errors, they will be displayed in the command line or Git Bash.
npm run build
Step 4: Deploy the out folder to your hosting provider
After running npm run build, you’ll find an out folder in your project root.
This folder contains all your static HTML, CSS, JS, and asset files.
- Open your hosting file manager (e.g., Hostinger, Netlify, Vercel, or any static hosting).
- Navigate to the root folder for your site (public_html on Hostinger).
- Upload all files and folders inside the out folder.
Step 5: View Your Static Next.js 16 Website Live
After uploading your out folder, your website is now live on the subdomain. You can visit the link below to see the fully static Next.js 16 site running in a browser. This confirms that the static export and deployment were successful.
Live Demo: https://next-web-app.getmakedigital.com/
