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 Production Branch (commonly "main") 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
Last Edited on July 17th 2020