How to Integrate HubSpot Marketing Hub with V0

Open V0 and describe the marketing form or landing page component you need. Be specific about the form fields you want to collect — HubSpot has standard contact properties (email, firstname, lastname, company, phone) and you can also create custom properties. Describe how you want the form to behave: should it validate fields before submitting? Show a loading state while the API call is in progress? Display an inline success message or redirect to a thank-you page? V0 will generate a React component with the form markup, Tailwind styling, and state management. The generated component will likely use useState for form data and a handleSubmit function — this is exactly what you need to wire up to your HubSpot API route. After generating the initial component, use V0's chat to refine details: 'make the CTA button green with rounded corners', 'add a phone number field', or 'show red error messages below each invalid field'. Use Design Mode (Option+D) to fine-tune colors to match your brand. Once the visual design is right, open the Code panel to see the component code before moving on.

Add the @hubspot/api-client package to your package.json. This is HubSpot's official Node.js SDK — it handles authentication and provides typed methods for every HubSpot API. Create a new file at app/api/hubspot/contact/route.ts. This API route will export a POST handler that receives the form submission, validates the required fields, creates or updates a HubSpot contact using the SDK, and returns a success or error response. The key HubSpot operation here is crm.contacts.basicApi.create(), which takes an object with properties matching HubSpot's contact property names. If the contact already exists (same email address), you'll get a CONFLICT error — handle this gracefully by updating the existing contact with crm.contacts.basicApi.update() instead. Always wrap the HubSpot API calls in a try/catch and return appropriate HTTP status codes: 200 for success, 400 for invalid input, 500 for HubSpot API errors. This prevents your form from silently failing when something goes wrong. The HUBSPOT_ACCESS_TOKEN environment variable is used to authenticate the SDK client — you'll set this in Vercel in the next step.

1import { Client } from '@hubspot/api-client';
2import { NextRequest, NextResponse } from 'next/server';
3
4const hubspotClient = new Client({
5  accessToken: process.env.HUBSPOT_ACCESS_TOKEN,
6});
7
8export async function POST(req: NextRequest) {
9  try {
10    const body = await req.json();
11    const { email, firstname, lastname, company, phone } = body;
12
13    if (!email) {
14      return NextResponse.json(
15        { error: 'Email is required' },
16        { status: 400 }
17      );
18    }
19
20    const contactProperties = {
21      email,
22      firstname: firstname || '',
23      lastname: lastname || '',
24      company: company || '',
25      phone: phone || '',
26    };
27
28    try {
29      // Try to create a new contact
30      await hubspotClient.crm.contacts.basicApi.create({
31        properties: contactProperties,
32        associations: [],
33      });
34    } catch (createError: unknown) {
35      const err = createError as { code?: number };
36      // If contact already exists (409 Conflict), update instead
37      if (err?.code === 409) {
38        const existingContact = await hubspotClient.crm.contacts.basicApi.getById(
39          email,
40          undefined,
41          undefined,
42          undefined,
43          undefined,
44          'email'
45        );
46        await hubspotClient.crm.contacts.basicApi.update(
47          existingContact.id,
48          { properties: contactProperties }
49        );
50      } else {
51        throw createError;
52      }
53    }
54
55    return NextResponse.json({ success: true });
56  } catch (error) {
57    console.error('HubSpot API error:', error);
58    return NextResponse.json(
59      { error: 'Failed to create contact' },
60      { status: 500 }
61    );
62  }
63}

Your HubSpot access token grants full API access to your CRM — it must be treated like a password and kept server-side only. Never use the NEXT_PUBLIC_ prefix for it, and never include it in client-side React components. To create a Private App token in HubSpot, go to Settings (gear icon) → Integrations → Private Apps → Create a private app. Give it a name like 'V0 Website Integration', go to the Scopes tab, and enable crm.objects.contacts.read and crm.objects.contacts.write under CRM. Click Create app and copy the access token immediately — it's only shown once. In the Vercel Dashboard, open your project → Settings → Environment Variables. Add HUBSPOT_ACCESS_TOKEN with your token as the value. Leave the NEXT_PUBLIC_ prefix off — this keeps it server-side only. Check all three environments (Production, Preview, Development). Save and redeploy if you already have a deployment. Locally, add HUBSPOT_ACCESS_TOKEN to your .env.local file. Also add the line .env.local to your .gitignore if it isn't already there. For local testing, you can use your HubSpot sandbox account instead of your live CRM to avoid polluting production data with test contacts.

1# .env.local — never commit this file
2# HubSpot Private App token (server-only, no NEXT_PUBLIC_ prefix)
3HUBSPOT_ACCESS_TOKEN=pat-na1-your-private-app-token-here

HubSpot's tracking script automatically tracks page views, form submissions, and other events on your website. When a visitor's email is known (they've filled in a form previously), HubSpot can identify them across sessions and tie their browsing behavior to their contact record. This gives you rich analytics about which pages leads visit before converting. To add the script in Next.js App Router, open your root layout file at app/layout.tsx. You'll use Next.js's built-in Script component from next/script to load the HubSpot tracking script. The script URL includes your HubSpot Hub ID, which you can find in HubSpot → Settings → Account Setup → Account Defaults → Account Information → Hub ID. Use the strategy='afterInteractive' prop so the tracking script loads after the page's interactive content, not blocking your page's first paint. For single-page app navigation tracking (ensuring HubSpot knows when users navigate between pages in your Next.js app), HubSpot's tracker automatically handles this via its JavaScript API — the _hsq.push(['trackPageView']) call can be made after each navigation event. For complex multi-page apps with deep analytics requirements, RapidDev can help you set up server-side event tracking and custom HubSpot workflow triggers.

1import Script from 'next/script';
2
3export default function RootLayout({
4  children,
5}: {
6  children: React.ReactNode;
7}) {
8  return (
9    <html lang="en">
10      <body>
11        {children}
12        {/* HubSpot Tracking Script */}
13        {process.env.NEXT_PUBLIC_HUBSPOT_HUB_ID && (
14          <Script
15            id="hs-script"
16            src={`https://js.hs-scripts.com/${process.env.NEXT_PUBLIC_HUBSPOT_HUB_ID}.js`}
17            strategy="afterInteractive"
18          />
19        )}
20      </body>
21    </html>
22  );
23}

Deploy your app to Vercel and test the complete lead capture workflow end-to-end. Fill in your form with test data and submit it. Check the Vercel Dashboard → Functions logs to see the API route execution — look for your console.log statements or any error messages. In HubSpot, navigate to Contacts → Contacts and search for the email address you used in the test form. The contact should appear within a few seconds of submission, with all the properties you sent (name, company, etc.) populated correctly. If the contact doesn't appear, check the Vercel function logs for HubSpot API errors. Common issues include a missing or incorrect HUBSPOT_ACCESS_TOKEN, property name mismatches (HubSpot uses firstname not first_name), or missing required scopes on your Private App (ensure crm.objects.contacts.write is enabled). Once contacts are being created successfully, test your HubSpot workflows: create a simple automation in HubSpot → Automation → Workflows that sends an email when a contact is created via your form. This is the core value of the integration — automatic follow-up from the moment someone shows interest on your site.