Migrate Your Squarespace Site to Next.js

Squarespace is a content platform. It excels at blogs, portfolios, and brochure sites where every visitor sees the same thing. But some sites need more: user accounts, dynamic data, real-time features, complex forms, e-commerce beyond basic product listings, or interactive tools.

If your Squarespace site has outgrown static content — or if you know your next site needs dynamic capabilities — Next.js is a framework worth understanding. It handles both static pages and server-rendered dynamic content in a single project, which makes it a strong candidate for sites that need more than a purely static architecture can provide.

But here is the honest truth upfront: most Squarespace sites do not need Next.js. If your site is a blog, portfolio, marketing page, or business homepage, a lighter framework like Astro will be faster, simpler, and cheaper to host. This guide covers both scenarios so you can make the right choice.

When Next.js is the right target (and when it is not)

Next.js is a React-based framework that supports static generation, server-side rendering, and hybrid approaches. It is developed by Vercel and used in production by companies like Netflix, TikTok, Hulu, and Notion.

Next.js is the right choice when your Squarespace replacement needs:

User authentication and accounts. Member areas, gated content, user dashboards. Next.js handles auth natively with middleware and server components.
Dynamic e-commerce. Product catalogs that update in real time, inventory management, shopping carts, checkout flows. Especially if you are integrating with Shopify’s Storefront API or building custom commerce logic.
Interactive tools. Calculators, configurators, quoting tools, dynamic filtering, search with real-time results. Anything that requires client-side state management and API calls.
Personalized content. Different content for different users. A/B testing. Dynamic recommendations.
Complex forms with multi-step workflows. Beyond simple contact forms — application forms, onboarding flows, surveys with conditional logic.
API integrations. If your site needs to pull data from external APIs (CRM, inventory systems, scheduling tools) and render it on the page.

Astro (or another static generator) is the better choice when:

Your site is primarily static content — blogs, portfolios, marketing pages, business homepages.
Every visitor sees the same thing.
You want the fastest possible performance (Lighthouse 95-100).
You want the cheapest possible hosting ($0/month).
You do not need React or a JavaScript runtime on the client side.

Most Squarespace sites fall into the second category. Squarespace is a content platform, and most of its users are building content sites. The framework that best replaces a content site is a content-first static generator, not a full-stack React framework.

The honest performance comparison

Metric	Squarespace	Next.js (SSR)	Next.js (Static)	Astro
Mobile Lighthouse	~31	70-90	80-95	95-100
LCP (mobile)	8.79s	0.5-1.5s	0.3-1s	<0.5s
TTFB	1-2s	50-200ms	<50ms	<50ms
Page weight	2-5MB	200KB-1MB	150KB-500KB	50-200KB
Monthly hosting	$23-56	$0-20	$0	$0

Next.js is significantly faster than Squarespace in all scenarios. But it ships the React runtime to every page, which adds weight compared to a zero-JavaScript static site. Server-rendered Next.js pages also require compute resources, which means hosting is not always free.

If you are migrating a content site and choosing between Next.js and Astro purely on performance and cost, Astro wins. If you need the dynamic capabilities that Next.js provides, the performance tradeoff is justified.

Understanding Squarespace’s export

Before migrating to any framework, understand what Squarespace exports. Go to Settings → Advanced → Import/Export → Export.

The XML export (WordPress WXR format) includes:

Blog post content, dates, categories, tags
Basic page text content
Comments
Image references (URLs to Squarespace’s CDN)

The export does not include:

Design, templates, or layouts
Custom CSS or code injection blocks
Images as files (just URLs that expire when you cancel)
Commerce data (separate CSV export)
Forms, navigation, gallery configurations
Member areas, Acuity Scheduling setup

Before migrating: Save your custom CSS (Design → Custom CSS) and code injection blocks (Settings → Advanced → Code Injection). Download all images from the media library. If you use Squarespace Commerce, export products as CSV separately.

Squarespace Commerce vs Shopify: an important detour

If you are leaving Squarespace partly because of e-commerce limitations, Next.js is a strong frontend for commerce — but the commerce backend matters too.

Squarespace Commerce handles products, inventory, checkout, and payments. If you migrate to Next.js, you need a replacement for all of this.

Options:

Shopify is the most common choice. Use Shopify for the commerce backend (products, inventory, checkout, payments) and Next.js as the frontend via the Shopify Storefront API. Shopify’s Hydrogen framework is built on this pattern.
Stripe for simple product sales. If you sell a handful of products or services, Stripe Checkout can handle payments without a full commerce platform.
Snipcart adds a shopping cart to any website. Lighter than Shopify, good for small catalogs.
Medusa is an open-source commerce platform you can self-host. More control, more responsibility.

If e-commerce is your primary business, evaluate the commerce backend separately from the frontend framework. Many businesses find that Shopify + a custom Next.js frontend gives them better commerce capabilities and better site performance than Squarespace Commerce provided.

Six approaches to migrate

1. AI coding agents (Claude Code, Cursor, Windsurf, Cline)

The fastest path for developers. AI agents handle the translation from Squarespace export to Next.js project structure.

For a Next.js migration:

Export Squarespace content as XML.
Scaffold: npx create-next-app@latest my-site --typescript --tailwind --app.
Open in Claude Code, Cursor, or Windsurf.
Provide the XML, your site URL, and any custom code.
Prompt: “Parse this Squarespace XML export. Convert all blog posts to MDX files in app/blog/. Crawl example.com to capture all pages, navigation, and images. Create React page components in the App Router that match the current design. Use Tailwind CSS for styling.”
The agent scaffolds page components, converts blog posts to MDX, downloads images, and sets up routing.
Iterate on the design and functionality. Usually 2-4 refinement rounds.
Deploy to Vercel (optimal for Next.js) or another host.

For an Astro migration (if you decide static is better):

Same workflow, different prompt: “Convert this to an Astro project with content collections for blog posts. Ship zero JavaScript.”

Timeline: 2-8 hours for a typical site. Complex sites with e-commerce may take 1-2 days.

Sites like cursor.com and Prefect.io were built with AI-assisted workflows. Developer Sid Bharath has documented client site migrations using Claude. The AI tooling handles Next.js particularly well because React and Next.js have extensive training data.

2. AI app builders (Bolt.new, v0.dev, Lovable, Replit Agent)

For non-developers or for rapid prototyping of the new design:

Screenshot your Squarespace pages.
Upload to v0.dev (made by Vercel, generates Next.js/React code) or Bolt.new.
“Recreate this page as a Next.js component with Tailwind CSS.”
Download the generated code and add your actual content.

v0.dev is especially relevant here because it is built by Vercel (the company behind Next.js) and generates Next.js-compatible React components with shadcn/ui. The output integrates directly into a Next.js project.

3. The WordPress bridge

For large blog archives, importing the Squarespace XML into WordPress first gives you access to mature export tooling:

Import XML into a temporary WordPress installation.
Convert posts to markdown or MDX using wordpress-export-to-markdown.
Place the content files in your Next.js project’s content directory.

This is the most reliable path for sites with 100+ blog posts.

4. Hire a developer or agency

Professional migration costs:

Freelancers: $1,000-$5,000 for a content site. $5,000-$15,000 if e-commerce or dynamic features are involved.
Agencies: $10,000-$25,000+ for complex sites with commerce, authentication, and custom functionality.

Next.js migrations tend to cost more than static site migrations because the framework is more complex and the hosting may require more configuration. When hiring, ask about their experience with Squarespace data extraction, Next.js App Router (not the legacy Pages Router), and the specific dynamic features you need.

5. BrowserCat Migrate

BrowserCat Migrate automates content extraction and site scaffolding. The output is an Astro project that can be used directly for content sites or adapted to Next.js if you need dynamic capabilities. Starting at $49.

6. Manual DIY

Full control, maximum learning:

npx create-next-app@latest my-site --typescript --tailwind --app
Export and parse Squarespace XML.
Convert blog posts to MDX files (MDX lets you embed React components in markdown).
Build page components in the App Router.
Set up routing to match your Squarespace URL structure.
Download images and configure Next.js Image optimization.
Set up any dynamic features (auth, commerce, APIs).
Deploy to Vercel or another host.

Timeline: 2-6 weeks depending on site complexity and dynamic features.

Next.js App Router: what Squarespace features map to what

If you are used to Squarespace’s feature set, here is how things translate to Next.js:

Squarespace pages → Next.js App Router routes. Each page becomes a React component in app/page-name/page.tsx. The layout system (headers, footers, navigation) maps to Next.js’s layout.tsx files.

Squarespace blog → MDX content. Blog posts become .mdx files that support both markdown and React components. You can use a library like contentlayer or next-mdx-remote to manage blog content. Alternatively, connect to a headless CMS like Sanity or Contentful.

Squarespace galleries → React components. Build custom gallery components with whatever interaction patterns you want. Libraries like react-photo-album or yet-another-react-lightbox provide the interactive features that Squarespace’s gallery blocks handle.

Squarespace forms → React forms + API routes. Build forms as React components. Handle submissions with Next.js API routes (app/api/contact/route.ts) or use a form service like Formspree.

Squarespace Commerce → Shopify Storefront API. The most common pattern is to use Shopify as the commerce backend and Next.js for the frontend. Vercel even provides a Next.js Commerce starter built on this pattern.

Squarespace member areas → NextAuth.js. Authentication in Next.js is typically handled by NextAuth.js (now Auth.js), which supports Google, GitHub, email/password, and many other providers.

Squarespace scheduling (Acuity) → Embed or API. Acuity can be embedded on any website via iframe. If you need deeper integration, Acuity has an API. But the integration will not be as seamless as it is on Squarespace (which owns Acuity).

Squarespace-specific migration gotchas

Squarespace 7.0 vs 7.1

Check your version at Help → Squarespace Version. Version 7.0 uses named templates with template-specific features. Version 7.1 uses a universal section system. Migration complexity varies because 7.0 sites may have template-specific gallery layouts or index page behaviors.

Image optimization

Squarespace automatically resizes and serves images in modern formats. Next.js has its own image optimization through the <Image> component, which handles lazy loading, responsive sizing, and format conversion. You will need to configure next.config.js with the domains you are serving images from.

Download all images from Squarespace before canceling your subscription. Those CDN URLs expire.

URL structure

Squarespace uses URL patterns like /blog/post-title and /page-name. Map these to your Next.js routes. Set up redirects in next.config.js for any URLs that change:

// next.config.js
async redirects() {
  return [
    { source: '/old-page', destination: '/new-page', permanent: true },
  ]
}

Domain transfer

If your domain is registered through Squarespace, transfer it to another registrar. Plan for 5-7 days. Update DNS to point to Vercel or your chosen host.

Hosting considerations for Next.js

Unlike pure static sites, Next.js with server-side rendering needs compute resources. Hosting options:

Host	Free Tier	Paid	Notes
Vercel	Generous (hobby tier)	$20/mo (Pro)	Built by the Next.js team. Best DX.
Netlify	Basic SSR support	$19/mo	Good, but Vercel has better Next.js support.
Cloudflare Pages	Static + Workers	Pay-per-use	Good for static export. SSR via Workers.
AWS Amplify	12 months free tier	Pay-per-use	More complex setup.
Self-hosted	N/A	$5-20/mo VPS	Full control. Use `next start` or Docker.

If you are using Next.js purely for static generation (output: 'export' in config), you can host for free anywhere. Server-rendered pages require a hosting provider that supports Node.js or edge functions.

For most Squarespace migrations, Vercel’s free tier is more than sufficient to start. You can upgrade later if traffic grows.

When to stay on Squarespace instead

Migration is not always the right answer:

Your site is pure content with no dynamic needs. If you do not need authentication, e-commerce, or interactive tools, Next.js is overkill. Consider Astro for a content migration.
Acuity Scheduling is essential to your business. The Squarespace-Acuity integration is deeply embedded. Moving to Next.js means the scheduling integration becomes an embed or API call — functional but not seamless.
Your team cannot maintain a React codebase. Next.js is a developer framework. If no one on your team writes React, you will depend on contractors or AI agents for every change. That may be fine, but it is a real consideration.
The visual editor matters more than performance. If your team makes frequent visual layout changes (not just content changes), Squarespace’s drag-and-drop editor may still be the most productive tool. Code-based sites handle content changes well but layout changes require more effort.

The editing workflow after migration

On Squarespace, you use a visual editor. On Next.js, your options:

Code editor. Edit React components and MDX files in VS Code. For content changes (blog posts, text updates), this is straightforward. For design changes, you need React knowledge.

AI agents. Claude Code and Cursor work exceptionally well with Next.js because React is among the best-represented frameworks in their training data. “Add a testimonials section to the homepage” produces usable code on the first attempt.

Headless CMS. Connect your Next.js site to Sanity, Contentful, Storyblok, or another headless CMS for a visual editing experience. This is the closest equivalent to Squarespace’s editor, but your site stays fast and you own the code.

Vercel Visual Editing. Vercel offers a visual editing feature that lets you click on elements in a preview and edit them. It requires a compatible CMS but provides a Squarespace-like experience for content changes.

Getting started

Start by answering one question: does your site need dynamic features?

If yes — authentication, real-time data, complex commerce, interactive tools — Next.js is a strong choice. Export your Squarespace content, scaffold a Next.js project, and use an AI agent to accelerate the migration.

If no — if your site is blogs, marketing pages, a portfolio, a business homepage — seriously consider Astro or another static generator instead. You will get better performance, simpler hosting, and a lower maintenance burden.

Either way, the first step is the same: export your Squarespace content (Settings → Advanced → Import/Export), save your custom code, download your images. This is non-destructive and gives you the raw material for any migration path you choose.