How can we export a single static page in Next.js ?
#Static export of a single page route
sturdy oyster
grim belfryBOT
Hi @sturdy oyster. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, you can export a single static page by using the next build command. This command generates an HTML file per route. If you want to export a single page, you need to have a single route in your application.
Here's how you can enable static export:
- Change the output mode inside
next.config.js:
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
output: 'export',
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
// trailingSlash: true,
// Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
// skipTrailingSlashRedirect: true,
// Optional: Change the output directory `out` -> `dist`
// distDir: 'dist',
}
module.exports = nextConfig
- Run
next build. Next.js will produce anoutfolder which contains the HTML/CSS/JS assets for your application.
Remember, you can utilize getStaticProps and getStaticPaths to generate an HTML file for each page in your pages directory (or more for dynamic routes).
Please note that Internationalized Routing does not integrate with output: 'export' as it does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use output: 'export' are fully supported.
Sources:
- Static Exports (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)
- Internationalization (i18n) Routing (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#how-does-this-work-with-static-generation)