Getting a 404 ERROR when trying to make api POST request for a Hubspot form next.js app

Question

I'm currently working on building out a Hubspot email submission form through nextjs and typescript but keep getting a few error and not sure how to solve. The first one is an error with my 'response' constant saying it's declared but not used and not sure how to solve and the second error is a 404 axios error. Not sure what I'm doing wrong.

Here's the api:

import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'

const HUBSPOT_API_KEY = process.env.HUBSPOT_API_KEY
const HUBSPOT_PORTAL_ID = '22316985' // Replace this
const HUBSPOT_FORM_GUID = '5d0cab17-2376-44bc-bbe9-cb477bff0360' // Replace this

type Response = {
  success: boolean
  email?: string
}

export default async (req: NextApiRequest, res: NextApiResponse<Response>) => {
  const { email, pageUri } = req.body

  if (typeof email !== 'string') {
    return res.status(400).json({ success: false })
  }

  try {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const response = await axios({
      method: 'POST',
      // eslint-disable-next-line no-useless-escape
      url: `https://api.hsforms.com/submissions/v3/integration/secure/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_GUID}/?hapikey/=${HUBSPOT_API_KEY}`,
      data: {
        fields: [{ name: 'email', value: email }],
        context: { pageUri }
      },
      headers: { 'Content-Type': 'application/json' }
    })
  } catch (error) {
    return res.status(500).json({ success: false })
  }

  res.status(200).json({ success: true, email })
}

Here's the index.tsx file:

 const [email, setEmail] = useState('')
  const [pageUri, setPageUri] = useState<string>()
  const [{ loading }, refetch] = useAxios(
    {
      url: '/pages/api/emailSignup',
      method: 'POST',
      data: { email, pageUri }
    },
    {
      manual: true
    }
  )
  useEffect(() => {
    if (data?.success === true && !loading) {
      setEmail('')
    }
  }, [data?.success, loading])

  useEffect(() => {
    setPageUri(window.location.href)
  }, [])
 <Container className={s['pre__footer']}>
            <Isotype className={s['isotype']} />
            <Heading
              as="h2"
              variant="md"
              centered
              style={{ textTransform: 'capitalize' }}
            >
              Sign-up for our <br /> Newsletter
            </Heading>

            <input
              type={'email'}
              placeholder={'Enter your email to stay updated'}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button
              type={'submit'}
              onClick={() => refetch()}
              disabled={loading}
            >
              <ArrowLink />
              <span className="sr-only">Send</span>
            </button>
 </Container>

Answer 1

Regarding the first error, if you're not using response then don't include it, it's as simple as that. You'd only need it if you want to use whatever is being returned from the POST request to the API, and it seems that's not the case.

The second error: You're getting a 404 error because you're calling your endpoint incorrectly. It should be:

const [{ loading }, refetch] = useAxios(
    {
      url: '/api/emailSignup', // removed "/pages" from this line
      method: 'POST',
      data: { email, pageUri }
    },
    {
      manual: true
    }
  )

This is because any file inside the folder pages/api is mapped to /api/* and will be recognized as an API endpoint instead of a page. This means that if your page is https://example.com you can access your emailSignup API endpoint on https://example.com/api/emailSignup .