[{"data":1,"prerenderedAt":124},["ShallowReactive",2],{"hub:tools-nextjs":3},{"path":4,"key":5,"title":6,"h1":7,"description":8,"crumbs":9,"blocks":18},"\u002Ftools\u002Fnextjs\u002F","tools-nextjs","Next.js Static Export: Guides and Limits","Next.js static export","Guides for content sites on Next.js output export: dynamic routes, trailingSlash, MDX, sitemaps and RSS, images, limits and moving to Astro.",[10,13,16],[11,12],"Home","\u002F",[14,15],"Tools","\u002Ftools\u002F",[17,4],"Next.js",[19,22,24,27,83,85,92,94],{"k":20,"text":21},"p","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.",{"k":20,"text":23},"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.",{"k":25,"html":26},"fig","\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 252\" role=\"img\" aria-labelledby=\"hub-nextjs-hero-title hub-nextjs-hero-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-nextjs-hero-title\">Next.js features in static export mode\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-nextjs-hero-desc\">A matrix. Static pages and generateStaticParams work. MDX and metadata routes such as sitemap.ts work. The image optimization service does not work without a loader. Rewrites, middleware and ISR do not work. The React runtime ships to every page.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"252\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Cpath d=\"M20.0 86.0 L740.0 86.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Crect x=\"214.0\" y=\"90.0\" width=\"257.0\" height=\"25.6\" rx=\"5\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M20.0 119.6 L740.0 119.6\" fill=\"none\" stroke=\"#d9e2ef\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"214.0\" y=\"123.6\" width=\"257.0\" height=\"25.6\" rx=\"5\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M20.0 153.2 L740.0 153.2\" fill=\"none\" stroke=\"#d9e2ef\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"214.0\" y=\"157.2\" width=\"257.0\" height=\"25.6\" rx=\"5\" fill=\"#ff595e\" opacity=\"0.12\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M20.0 186.8 L740.0 186.8\" fill=\"none\" stroke=\"#d9e2ef\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"214.0\" y=\"190.8\" width=\"257.0\" height=\"41.2\" rx=\"5\" fill=\"#ff595e\" opacity=\"0.12\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M20.0 236.0 L740.0 236.0\" fill=\"none\" stroke=\"#d9e2ef\" style=\"stroke-width:1px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">What static export keeps and loses\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"75.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">Feature\u003C\u002Ftext>\n    \u003Ctext x=\"342.5\" y=\"75.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">In static export\u003C\u002Ftext>\n    \u003Ctext x=\"607.5\" y=\"75.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">Guide approach\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"106.4\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">Static pages, params\u003C\u002Ftext>\n    \u003Ctext x=\"342.5\" y=\"106.2\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">works\u003C\u002Ftext>\n    \u003Ctext x=\"607.5\" y=\"106.2\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">generateStaticParams\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"140.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">Sitemaps, feeds, MDX\u003C\u002Ftext>\n    \u003Ctext x=\"342.5\" y=\"139.8\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">works\u003C\u002Ftext>\n    \u003Ctext x=\"607.5\" y=\"139.8\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">metadata routes\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"173.6\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">Image optimization\u003C\u002Ftext>\n    \u003Ctext x=\"342.5\" y=\"173.4\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">needs a loader\u003C\u002Ftext>\n    \u003Ctext x=\"607.5\" y=\"173.4\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">build-time or CDN\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"207.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">Rewrites, middleware,\u003C\u002Ftext>\n    \u003Ctext x=\"30.0\" y=\"222.8\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">ISR\u003C\u002Ftext>\n    \u003Ctext x=\"342.5\" y=\"214.8\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">not available\u003C\u002Ftext>\n    \u003Ctext x=\"607.5\" y=\"214.8\" fill=\"#1f2937\" style=\"font-size:11.5px;text-anchor:middle\">host rules or rebuilds\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>The red rows are why several guides below exist.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":28,"h":29,"items":30},"group","Choosing the Right Static Site Generator for Production",[31,36,40,45,49,54,58,62,66,70,74,78],{"t":32,"u":33,"d":34,"y":35},"Next.js Static Export vs Astro for Marketing","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-static-export-vs-astro-for-marketing-sites\u002F","A 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.","Comparison",{"t":37,"u":38,"d":39,"y":35},"Next.js Static Export vs Gatsby for Existing React Sites","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-static-export-vs-gatsby-for-existing-react-sites\u002F","For 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.",{"t":41,"u":42,"d":43,"y":44},"Next.js App Router Static Export Limitations","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-app-router-static-export-limitations\u002F","Which App Router features work with output export — route handlers, middleware, ISR, dynamic params, headers, images — and the static workaround for each.","Concept",{"t":46,"u":47,"d":48,"y":44},"Total Cost of Ownership for Static Site Generators","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Ftotal-cost-of-ownership-for-static-site-generators\u002F","Estimate 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.",{"t":50,"u":51,"d":52,"y":53},"Generating Sitemaps and RSS in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fgenerating-sitemaps-and-rss-in-nextjs-static-export\u002F","Produce 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.","How-to",{"t":55,"u":56,"d":57,"y":53},"Handling Dynamic Routes in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fhandling-dynamic-routes-in-nextjs-static-export\u002F","generateStaticParams, catch-all segments, trailing slashes and the 404 problem: how to make dynamic routes work under output export without a server.",{"t":59,"u":60,"d":61,"y":53},"Migrating from Gatsby to Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fmigrating-from-gatsby-to-nextjs-static-export\u002F","A 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.",{"t":63,"u":64,"d":65,"y":53},"Migrating from Next.js Pages Router to Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-nextjs-pages-router-to-astro\u002F","Move a content-heavy Next.js Pages Router site with getStaticProps to Astro: routes, data fetching, MDX, React islands, images, redirects and the measured result.",{"t":67,"u":68,"d":69,"y":53},"Optimizing Images in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Foptimizing-images-in-nextjs-static-export\u002F","next\u002Fimage cannot optimise at request time in a static export. Three ways to get responsive, modern-format images back — build-time, loader and CDN — measured.",{"t":71,"u":72,"d":73,"y":53},"Trailing Slash and basePath in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Ftrailing-slash-and-basepath-in-nextjs-static-export\u002F","Configure trailingSlash, basePath and assetPrefix in a Next.js static export so links, assets, canonicals and host URL handling agree on every static host.",{"t":75,"u":76,"d":77,"y":53},"Using MDX in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fusing-mdx-in-nextjs-static-export\u002F","Render MDX content in a Next.js App Router static export: @next\u002Fmdx vs next-mdx-remote, frontmatter, remark and rehype plugins, components and build cost.",{"t":79,"u":80,"d":81,"y":82},"Fixing 404s on Refresh in Next.js Static Export","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Ffixing-404s-on-refresh-in-nextjs-static-export\u002F","Fix 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.","Fix",{"k":25,"html":84},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 295\" role=\"img\" aria-labelledby=\"hub-nextjs-kinds-title hub-nextjs-kinds-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-nextjs-kinds-title\">Number of Next.js guides of each kind\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-nextjs-kinds-desc\">Vertical bars: How-tos 7, Fixes 1, Comparisons 3 and Concepts 2.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"295\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"80.0\" y=\"76.0\" width=\"90.0\" height=\"170.0\" rx=\"3\" fill=\"#1982c4\" opacity=\"0.3\" stroke=\"#1982c4\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"250.0\" y=\"221.7\" width=\"90.0\" height=\"24.3\" rx=\"3\" fill=\"#ff595e\" opacity=\"0.3\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"420.0\" y=\"173.1\" width=\"90.0\" height=\"72.9\" rx=\"3\" fill=\"#ffca3a\" opacity=\"0.45\" stroke=\"#a97b00\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"590.0\" y=\"197.4\" width=\"90.0\" height=\"48.6\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M30.0 246.0 L730.0 246.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Next.js guides by kind\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"69.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">7\u003C\u002Ftext>\n    \u003Ctext x=\"125.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">How-tos\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"214.7\" fill=\"#b32b30\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"295.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Fixes\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"166.1\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">3\u003C\u002Ftext>\n    \u003Ctext x=\"465.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Comparisons\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"190.4\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">2\u003C\u002Ftext>\n    \u003Ctext x=\"635.0\" y=\"264.0\" fill=\"#556071\" style=\"font-size:11.5px;text-anchor:middle\">Concepts\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>13 guides use Next.js in depth; each is listed below under the section it belongs to.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":28,"h":86,"items":87},"Production-Ready Deployment & CI\u002FCD for SSGs",[88],{"t":89,"u":90,"d":91,"y":35},"Vercel ISR vs Static Generation for SSGs","\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fvercel-isr-vs-static-generation-for-ssgs\u002F","ISR rebuilds pages on demand; static generation builds everything upfront. Astro, Eleventy, Hugo, and Jekyll have no ISR — they rebuild and purge at the CDN.",{"k":25,"html":93},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 210\" role=\"img\" aria-labelledby=\"hub-nextjs-topics-title hub-nextjs-topics-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-nextjs-topics-title\">Topics with the most Next.js guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-nextjs-topics-desc\">Horizontal bars, largest first: Next.js Static Export for Content Sites 10, Migrating Between Static Site Generators 1, SSG Framework Selection Matrix 1 and Netlify vs Vercel Deployment Strategies 1.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"210\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"350.0\" y=\"65.0\" width=\"357.2\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"99.0\" width=\"35.7\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"133.0\" width=\"35.7\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"350.0\" y=\"167.0\" width=\"35.7\" height=\"20.0\" rx=\"3\" fill=\"#6a4c93\" opacity=\"0.3\" stroke=\"#6a4c93\" style=\"stroke-width:1px\"\u002F>\n    \u003Cpath d=\"M350.0 60.0 L350.0 192.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Ctext x=\"380.0\" y=\"30.0\" fill=\"#1f2937\" style=\"font-size:16px;text-anchor:middle;font-weight:700\">Where Next.js comes up\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"79.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Next.js Static Export for Content Sites\u003C\u002Ftext>\n    \u003Ctext x=\"715.2\" y=\"79.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">10\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"113.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Migrating Between Static Site Generators\u003C\u002Ftext>\n    \u003Ctext x=\"393.7\" y=\"113.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"147.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">SSG Framework Selection Matrix\u003C\u002Ftext>\n    \u003Ctext x=\"393.7\" y=\"147.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"181.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Netlify vs Vercel Deployment Strategies\u003C\u002Ftext>\n    \u003Ctext x=\"393.7\" y=\"181.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">1\u003C\u002Ftext>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n\u003Cfigcaption>Topic pages give the wider context for each group; the numbers count only guides that use this tool in depth.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":28,"h":95,"items":96},"Often used with Next.js",[97,102,107,111,115,120],{"t":98,"u":99,"d":100,"y":101},"Astro","\u002Ftools\u002Fastro\u002F","Islands, content collections, astro:assets and deployment.","4 shared guides",{"t":103,"u":104,"d":105,"y":106},"Gatsby","\u002Ftools\u002Fgatsby\u002F","Maintaining and migrating existing Gatsby sites.","2 shared guides",{"t":108,"u":109,"d":110,"y":106},"Eleventy","\u002Ftools\u002Feleventy\u002F","Incremental builds, image pipelines and the data cascade.",{"t":112,"u":113,"d":114,"y":106},"Hugo","\u002Ftools\u002Fhugo\u002F","Build time at scale, image caches, modules and multilingual sites.",{"t":116,"u":117,"d":118,"y":119},"AWS (S3 and CloudFront)","\u002Ftools\u002Faws\u002F","S3 and CloudFront: clean URLs, cache policies and deploys.","1 shared guides",{"t":121,"u":122,"d":123,"y":119},"Starlight","\u002Ftools\u002Fstarlight\u002F","Astro-based docs: overrides, translation and migration in.",1790943190467]