By Mehdi HassanFor B2B teams with developers, Next.js gives the most control over a marketing site: custom forms, fast rendering, any CMS and any integration. HubSpot stays in place as the back office for contacts, email, workflows and sales. The work that decides whether this goes well is the connection between the two. This guide covers the patterns we use for forms, tracking and lead routing. For what else changes when you leave HubSpot's website tools, start with our hub on leaving HubSpot CMS while keeping the CRM.
What does a HubSpot to Nextjs rebuild involve?
A HubSpot to Next.js rebuild involves four layers: a Next.js front end, a headless CMS for content, a forms and tracking layer that talks to HubSpot, and redirects for every changed URL. HubSpot themes and HubL templates don't carry over, so the front end is rebuilt as React components.
Layer | On HubSpot CMS | On Next.js |
|---|---|---|
Pages and templates | HubSpot theme, modules, HubL | React components and routes |
Content | HubSpot pages, blog, HubDB | Headless CMS such as Sanity or Payload |
Forms | Native HubSpot forms | HubSpot embeds or custom forms via the Forms API |
Tracking | Automatic | Tracking code plus route-change page views |
Personalization | Smart content | Server-side logic or a personalization tool |
Redirects | HubSpot URL redirects | Next.js config or the host's redirects |
For content, most teams pick a headless CMS so marketers can still edit without a developer; our explainer on what a headless CMS is covers the basics, and our headless CMS migration guide compares the options. It's also possible to keep the HubSpot blog and read it through HubSpot's CMS API, but that keeps you paying for Content Hub, which is usually what you're trying to stop.
How do you connect custom Next.js forms to the HubSpot Forms API?
You connect custom Next.js forms to the HubSpot Forms API by posting form data to a server route or server action, which forwards it to HubSpot's form submission endpoint along with the existing form's ID, the visitor's hubspotutk cookie, the page URL and the page name. Sending the cookie is what links the submission to the visitor's history.
Keep the HubSpot form
Use the existing form in HubSpot as the target, with the same field internal names. Workflows tied to it keep working.
Build the form in React
Match HubSpot's field names, add validation, and follow the basics in our accessible forms guide.
Submit server-side
Post to a Next.js route handler or server action, not straight from the browser, so you can add spam checks and keep logic private.
Add context
Read the hubspotutk cookie and include it with the page URL and page title in the submission's context.
Include consent
If the form collects marketing consent, send the consent options HubSpot expects, matching the form's settings.
Handle errors
Show a clear message if HubSpot rejects the submission, and log failures so no lead disappears silently.
For simple forms, HubSpot's own embed code still works in Next.js, loaded with a script component on the pages that need it. We use custom forms where design, multi-step flows or validation justify the extra build.
How do you set up HubSpot tracking in Next.js?
You set up HubSpot tracking in Next.js by loading the tracking script once in the root layout, then pushing the new path and a page view to HubSpot's tracking queue whenever the route changes. Next.js navigates between pages on the client, so without that step HubSpot only records the first page of each visit.
- Load once. Add the tracking script in the root layout with a script component that loads after the page is interactive.
- Track route changes. In a small client component, watch the pathname and, on each change after the first, push setPath and trackPageView to HubSpot's queue.
- Respect consent. If you use your own consent tool, only load or enable tracking after consent.
- Verify. Visit five pages in a row and confirm all five appear on the visitor's timeline in HubSpot.
Hypothetical example: a double-counted page view
For example, suppose a team adds the route-change tracker and also lets the tracking script record the initial load. If the tracker fires on the first render as well, every visit's landing page is counted twice, and page-view reports look inflated.
The fix is to skip the tracker's first run and only push page views on later path changes. The team confirms it by landing on one page, waiting, and checking that HubSpot shows a single view.
What lead routing patterns work best with HubSpot and Next.js?
The lead routing pattern that works best for most B2B teams is to submit every form to HubSpot and let HubSpot workflows route it. Add routing logic in Next.js only when the visitor needs a different experience immediately, such as showing a booking calendar to a qualified lead.
Pattern | How it works | Use it when |
|---|---|---|
Workflow routing | Form goes to HubSpot; workflows assign owner and notify | Default for most teams |
Qualify then book | Server checks answers, shows a meetings embed to qualified leads | Sales wants faster demos for good-fit leads |
Spam filter first | Server runs a bot check or honeypot before forwarding | You get form spam |
Product signup sync | App writes contacts via the CRM API | Signups happen in your product, not a marketing form |
Enrich then submit | Server adds data such as company domain before submitting | Routing depends on firmographic fields |
Keep routing rules in one place where possible. If half the logic lives in Next.js and half in HubSpot workflows, nobody can explain why a lead went where it did. HubSpot is the better home for rules that marketing and sales ops change often.
How do marketers edit a Next.js site after leaving HubSpot?
Marketers edit a Next.js site through the headless CMS, using page-builder blocks and live preview, so they can publish without a developer. Without that setup, every change becomes a ticket, and the team misses HubSpot's page editor quickly.
Give marketers reusable sections, a form block where they pick a HubSpot form by name, and SEO fields on every page. Set up preview so they see changes on the real page before publishing; our guide to live preview and visual editing explains the options. If the team would rather design visually, our guide to keeping Framer's design and moving content to a headless CMS shows a lighter alternative.
Is Next.js the right destination after HubSpot CMS?
Next.js is the right destination after HubSpot CMS when you have developers to maintain it and you need custom forms, complex routing, programmatic pages or integrations that visual builders struggle with. If marketers will make most changes and the site is mostly standard pages, Webflow or Framer is usually simpler.
