[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"hub:tools-gatsby":3},{"path":4,"key":5,"title":6,"h1":7,"description":8,"crumbs":9,"blocks":17},"\u002Ftools\u002Fgatsby\u002F","tools-gatsby","Gatsby Guides: Migrating and Comparing","Gatsby","Guides for teams with Gatsby sites: comparisons with Astro and Next.js static export, replacing GraphQL queries, and migrating without losing traffic.",[10,13,16],[11,12],"Home","\u002F",[14,15],"Tools","\u002Ftools\u002F",[7,4],[18,21,23,26,52,54,56],{"k":19,"text":20},"p","Gatsby built a large share of the React content sites still running today, and most guides here are written for the teams who maintain one. The question they face is rarely which generator is best in general; it is whether to stay, and if not, where to go and how to get there without breaking URLs or losing search traffic.",{"k":19,"text":22},"Two comparisons measure the realistic destinations on real sites — Astro with React islands, and Next.js static export for teams that want React-first pages — on build time, JavaScript shipped, field Core Web Vitals and dependency health. The migration guides then cover the hard part, which is not the components but Gatsby's GraphQL data layer, and the SEO checks that keep a migration from costing rankings.",{"k":24,"html":25},"fig","\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 246\" role=\"img\" aria-labelledby=\"hub-gatsby-hero-title hub-gatsby-hero-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-gatsby-hero-title\">Destinations for an existing Gatsby site\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-gatsby-hero-desc\">The root asks what the site needs most. Mostly content goes to Astro with React islands. React-first pages go to Next.js static export. A site retiring soon stays on Gatsby with audited dependencies.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"246\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"221.1\" y=\"60.0\" width=\"317.8\" height=\"50.0\" rx=\"8\" fill=\"#6a4c93\" opacity=\"0.14\" stroke=\"#6a4c93\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M380.0 111.0 L380.0 132.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px\"\u002F>\n    \u003Cpath d=\"M134.0 132.0 L626.0 132.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px\"\u002F>\n    \u003Cpath d=\"M134.0 132.0 L134.0 150.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-gatsby-hero-arrow)\"\u002F>\n    \u003Crect x=\"20.0\" y=\"154.0\" width=\"228.0\" height=\"75.5\" rx=\"8\" fill=\"#8ac926\" opacity=\"0.2\" stroke=\"#5a8a16\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M380.0 132.0 L380.0 150.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-gatsby-hero-arrow)\"\u002F>\n    \u003Crect x=\"266.0\" y=\"154.0\" width=\"228.0\" height=\"75.5\" rx=\"8\" fill=\"#1982c4\" opacity=\"0.14\" stroke=\"#1982c4\" style=\"stroke-width:1.5px\"\u002F>\n    \u003Cpath d=\"M626.0 132.0 L626.0 150.0\" fill=\"none\" stroke=\"#556071\" style=\"stroke-width:2px;marker-end:url(#hub-gatsby-hero-arrow)\"\u002F>\n    \u003Crect x=\"512.0\" y=\"154.0\" width=\"228.0\" height=\"75.5\" rx=\"8\" fill=\"#f8fafc\" stroke=\"#d9e2ef\" 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 Gatsby sites usually go next\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"90.2\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">What does the Gatsby site need most?\u003C\u002Ftext>\n    \u003Ctext x=\"134.0\" y=\"170.0\" fill=\"#3f6410\" style=\"font-size:11px;text-anchor:middle;font-weight:700\">Mostly content\u003C\u002Ftext>\n    \u003Ctext x=\"134.0\" y=\"190.3\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Astro + islands\u003C\u002Ftext>\n    \u003Ctext x=\"134.0\" y=\"207.2\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">least JavaScript\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"170.0\" fill=\"#166a9e\" style=\"font-size:11px;text-anchor:middle;font-weight:700\">React-first pages\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"190.3\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Next.js export\u003C\u002Ftext>\n    \u003Ctext x=\"380.0\" y=\"207.2\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">components unchanged\u003C\u002Ftext>\n    \u003Ctext x=\"626.0\" y=\"170.0\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle;font-weight:700\">Retiring soon\u003C\u002Ftext>\n    \u003Ctext x=\"626.0\" y=\"190.3\" fill=\"#1f2937\" style=\"font-size:13px;text-anchor:middle;font-weight:700\">Stay for now\u003C\u002Ftext>\n    \u003Ctext x=\"626.0\" y=\"207.2\" fill=\"#556071\" style=\"font-size:11px;text-anchor:middle\">audit dependencies\u003C\u002Ftext>\n  \u003C\u002Fg>\n  \u003Cdefs>\n    \u003Cmarker id=\"hub-gatsby-hero-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\n      \u003Cpath d=\"M0 0 L10 5 L0 10 z\" fill=\"#556071\"\u002F>\n    \u003C\u002Fmarker>\n  \u003C\u002Fdefs>\n\u003C\u002Fsvg>\n\u003Cfigcaption>The comparisons below measure the first two branches on real sites.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":27,"h":28,"items":29},"group","Choosing the Right Static Site Generator for Production",[30,35,39,44,48],{"t":31,"u":32,"d":33,"y":34},"Gatsby vs Astro for Content Sites in 2026","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fgatsby-vs-astro-for-content-sites-in-2026\u002F","Gatsby and Astro compared for content sites today: build time, JavaScript shipped, Core Web Vitals, ecosystem health and the cost of moving.","Comparison",{"t":36,"u":37,"d":38,"y":34},"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":40,"u":41,"d":42,"y":43},"Migrating from Gatsby to Astro","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-gatsby-to-astro\u002F","Move a Gatsby content site to Astro: replace GraphQL queries with content collections, port React components as islands, and keep image quality and URLs.","How-to",{"t":45,"u":46,"d":47,"y":43},"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":49,"u":50,"d":51,"y":43},"Replacing Gatsby GraphQL Queries During a Migration","\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Freplacing-gatsby-graphql-queries-during-a-migration\u002F","Inventory every Gatsby GraphQL query, map each to plain data functions or content collections, and migrate page by page with output checks.",{"k":24,"html":53},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 295\" role=\"img\" aria-labelledby=\"hub-gatsby-kinds-title hub-gatsby-kinds-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-gatsby-kinds-title\">Number of Gatsby guides of each kind\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-gatsby-kinds-desc\">Vertical bars: How-tos 3, Fixes 0, Comparisons 2 and Concepts 0.\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=\"243.0\" width=\"90.0\" height=\"3.0\" rx=\"3\" fill=\"#ff595e\" opacity=\"0.3\" stroke=\"#d83b41\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"420.0\" y=\"132.7\" width=\"90.0\" height=\"113.3\" rx=\"3\" fill=\"#ffca3a\" opacity=\"0.45\" stroke=\"#a97b00\" style=\"stroke-width:1px\"\u002F>\n    \u003Crect x=\"590.0\" y=\"243.0\" width=\"90.0\" height=\"3.0\" 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\">Gatsby 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\">3\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=\"236.0\" fill=\"#b32b30\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">0\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=\"125.7\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">2\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=\"236.0\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:middle;font-weight:700\">0\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>5 guides use Gatsby in depth; each is listed below under the section it belongs to.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"k":24,"html":55},"\u003Cfigure>\n\u003Csvg viewBox=\"0 0 760 176\" role=\"img\" aria-labelledby=\"hub-gatsby-topics-title hub-gatsby-topics-desc\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n  \u003Ctitle id=\"hub-gatsby-topics-title\">Topics with the most Gatsby guides\u003C\u002Ftitle>\n  \u003Cdesc id=\"hub-gatsby-topics-desc\">Horizontal bars, largest first: Migrating Between Static Site Generators 2, Next.js Static Export for Content Sites 2 and SSG Framework Selection Matrix 1.\u003C\u002Fdesc>\n  \u003Crect x=\"0\" y=\"0\" width=\"760\" height=\"176\" fill=\"#ffffff\"\u002F>\n  \u003Cg style=\"font-family:system-ui, sans-serif;font-size:12px\">\n    \u003Crect x=\"350.0\" y=\"65.0\" width=\"365.6\" 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=\"365.6\" 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=\"182.8\" 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 158.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 Gatsby comes up\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"79.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Migrating Between Static Site Generators\u003C\u002Ftext>\n    \u003Ctext x=\"723.6\" y=\"79.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">2\u003C\u002Ftext>\n    \u003Ctext x=\"20.0\" y=\"113.2\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start\">Next.js Static Export for Content Sites\u003C\u002Ftext>\n    \u003Ctext x=\"723.6\" y=\"113.5\" fill=\"#1f2937\" style=\"font-size:12px;text-anchor:start;font-weight:700\">2\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=\"540.8\" y=\"147.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":27,"h":57,"items":58},"Often used with Gatsby",[59,64],{"t":60,"u":61,"d":62,"y":63},"Astro","\u002Ftools\u002Fastro\u002F","Islands, content collections, astro:assets and deployment.","2 shared guides",{"t":65,"u":66,"d":67,"y":63},"Next.js","\u002Ftools\u002Fnextjs\u002F","Static export for content sites, its limits and alternatives.",1790943190467]