Next.js static export
Next.js with output export produces a folder of static files, which makes it a reasonable choice for React teams building marketing sites, blogs and documentation. It also inherits constraints the server-rendered version does not have: no image optimization service, no request-time rendering, no rewrites, and a React runtime shipped to every page whether it needs one or not.
The guides below cover working well inside those constraints — routes, URLs, MDX, feeds and images — and, for sites where the constraints cost too much, the measured case for moving to Astro, including a full migration from the Pages Router.
Choosing the Right Static Site Generator for Production
- Next.js Static Export vs Astro for MarketingComparisonA measured head-to-head of Next.js static export and Astro for marketing sites — JavaScript shipped, LCP and INP, developer experience, and build speed on the same pages.
- Next.js Static Export vs Gatsby for Existing React SitesComparisonFor a React team on Gatsby, compare staying with Gatsby against moving to Next.js static export: build time, page weight, ecosystem health and migration effort.
- Next.js App Router Static Export LimitationsConceptWhich App Router features work with output export — route handlers, middleware, ISR, dynamic params, headers, images — and the static workaround for each.
- Total Cost of Ownership for Static Site GeneratorsConceptEstimate the three-year cost of running a static site on Hugo, Eleventy, Astro, Next.js export or a docs framework: people time, builds, hosting, upgrades.
- Generating Sitemaps and RSS in Next.js Static ExportHow-toProduce sitemap.xml, robots.txt and an RSS feed from a Next.js App Router site with output export, using metadata routes and static route handlers.
- Handling Dynamic Routes in Next.js Static ExportHow-togenerateStaticParams, catch-all segments, trailing slashes and the 404 problem: how to make dynamic routes work under output export without a server.
- Migrating from Gatsby to Next.js Static ExportHow-toA concrete recipe for moving a Gatsby content site to a Next.js static export — GraphQL data layer to file reads, plugins to libraries, with measured build and bundle deltas.
- Migrating from Next.js Pages Router to AstroHow-toMove a content-heavy Next.js Pages Router site with getStaticProps to Astro: routes, data fetching, MDX, React islands, images, redirects and the measured result.
- Optimizing Images in Next.js Static ExportHow-tonext/image cannot optimise at request time in a static export. Three ways to get responsive, modern-format images back — build-time, loader and CDN — measured.
- Trailing Slash and basePath in Next.js Static ExportHow-toConfigure trailingSlash, basePath and assetPrefix in a Next.js static export so links, assets, canonicals and host URL handling agree on every static host.
- Using MDX in Next.js Static ExportHow-toRender MDX content in a Next.js App Router static export: @next/mdx vs next-mdx-remote, frontmatter, remark and rehype plugins, components and build cost.
- Fixing 404s on Refresh in Next.js Static ExportFixFix pages that work when navigated to but 404 on refresh or direct load in a Next.js static export, by matching file layout, trailing slashes and host rules.
Production-Ready Deployment & CI/CD for SSGs
- Vercel ISR vs Static Generation for SSGsComparisonISR rebuilds pages on demand; static generation builds everything upfront. Astro, Eleventy, Hugo, and Jekyll have no ISR — they rebuild and purge at the CDN.
Often used with Next.js
- Astro4 shared guidesIslands, content collections, astro:assets and deployment.
- Gatsby2 shared guidesMaintaining and migrating existing Gatsby sites.
- Eleventy2 shared guidesIncremental builds, image pipelines and the data cascade.
- Hugo2 shared guidesBuild time at scale, image caches, modules and multilingual sites.
- AWS (S3 and CloudFront)1 shared guidesS3 and CloudFront: clean URLs, cache policies and deploys.
- Starlight1 shared guidesAstro-based docs: overrides, translation and migration in.