Gather Emails on Your Next.js Site with StaticKit and Vercel

Use StaticKit and Next.js to collect emails from a landing page deployed with Vercel.

StaticKit provides configurable backend services for front-end developers.

In this guide, you will discover how to create a simple Next.js landing page to gather email addresses using StaticKit. Before getting started, sign up for a free StaticKit account.

Step 1: Set Up Your Next.js Project

Run the following command to create and enter into a Next.js project:

npm init next-app next-landing-page && cd next-landing-page

Bootstrapping a Next.js project with create-next-app and moving into the /next-landing-page directory.

Step 2: Install StaticKit

Run the following command to install the StaticKit CLI and React helper library:

npm install -g @statickit/cli && npm install @statickit/react

Installing the StaticKit CLI and adding @statickit/react to the project.

Then, create a /pages/_app.js file with the following contents and replace {your-site-id} with the ID from your Site Settings in StaticKit:

import { StaticKitProvider } from '@statickit/react'

function App({ Component, pageProps }) {
  return (
    <StaticKitProvider site="{your-site-id}">
      <Component {...pageProps} />
    </StaticKitProvider>
  )
}

export default App

An example /pages/_app.js file with the StaticKit provider.

Finally, run the following command to create a statickit.json file (if it doesn't already exist):

statickit init

Initializing a StaticKit config file.

Step 3: Configure Your StaticKit Function

In your statickit.json file, add a function for handling the email opt-in. StaticKit currently integrates with Mailchimp and ConvertKit for email marketing. Here's a function definition for adding a contact to Mailchimp:

{
  "functions": {
    "addToMailchimp": {
      "app": "mailchimp",
      "type": "addOrUpdateListMember"
    }
  }
}

A statickit.json file with a function for adding to Mailchimp.

Then, deploy your changes to StaticKit. You'll be prompted with instructions on how to save your Mailchimp API key and audience:

statickit deploy -k <your-deploy-key>

You can find your deploy key in your StaticKit settings.

Step 4: Build Your Opt-In Form

Here's an example of a simple OptInForm component that uses your StaticKit function:

import React, { useState } from 'react'
import { useStaticKit } from '@statickit/react'
import { addToMailchimp } from '@statickit/functions'

function OptInForm() {
  const client = useStaticKit()
  const [emailAddress, setEmailAddress] = useState('')
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleSubmit = async e => {
    e.preventDefault
    let { status } = await addToMailchimp(client, { emailAddress })
    if (status === 'ok') setIsSubmitted(true)
  }

  if (isSubmitted) {
    return <p>Thanks for signing up!</p>
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        onChange={e => setEmailAddress(e.target.value)}
        value={emailAddress}
        required
      />
      <button type="submit">Sign up</button>
    </form>
  )
}

export default OptInForm

An OptInForm React component that submits to Mailchimp.

For a more advanced example (with validations and styling), check out the OptInForm component in the Mailchimp React Example on GitHub.

Step 5: Deploying with Vercel

To deploy your StaticKit + Next.js app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.

For more information, you can find the source code for this example on GitHub along with the live example.



Written By
Written by mcsdevmcsdev