Gather Emails on Your Next.js Site with StaticKit and ZEIT Now

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

StaticKit is a collection of dynamic components for static sites, enabling developers to build dynamic interfaces with ease.

In this guide, you will discover how to create a simple landing page to gather email addresses using StaticKit and Next.js.

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.

Replace the contents of the /pages/index.js file with the following code.

import React from 'react'
import Head from 'next/head'

const OptInForm = () => {
  return (
    <form>
      <p className="pb-3 font-bold text-gray-800 text-lg">
        Sign up to be notified when we launch.
      </p>
      <div className="flex flex-wrap items-center">
        <label htmlFor="email" className="hidden">
          Email Address
        </label>
        <input
          id="email"
          type="email"
          name="email"
          className="flex-grow mr-3 mb-3 p-3 rounded-lg bg-gray-200 text-gray-700 text-lg border border-gray-200 focus:outline-none focus:border-gray-500 focus:bg-white"
          placeholder="Your email address"
          required
        />
        <button
          type="submit"
          className="mb-3 px-5 py-3 rounded-lg border border-purple-700 bg-purple-700 text-lg font-bold text-white"
        >
          Notify me
        </button>
      </div>
    </form>
  )
}

const Home = () => (
  <div>
    <Head>
      <title>Vaporware</title>
      <link
        href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"
      />
    </Head>
    <div className="mx-auto container px-8 py-16 sm:py-32 antialiased">
      <div className="max-w-lg mx-auto">
        <div className="flex flex-wrap items-center pb-4 text-5xl font-bold text-gray-800">
          <h1 className="mr-3">Vaporware</h1>
          <div className="mt-2 px-3 py-1 text-sm font-bold bg-orange-300 text-orange-800 rounded-full">
            Coming Soon
          </div>
        </div>
        <p className="pb-6 text-gray-700 text-lg">
          Vaporware is a fictitious app that does not yet exist. This is where
          you&rsquo;d make a compelling pitch for your new product.
        </p>
        <OptInForm />
      </div>
    </div>
  </div>
)

export default Home

An example /pages/index.js file with two components.

You may have noticed that the <form> tag is missing an onSubmit property, we will address that next.

Step 2: Creating the StaticKit Form

From your StaticKit Dashboard, click Add a site... in the top navigation bar. Enter your site name and click the Add site button.

You will be returned to the StaticKit Dashboard where the site you just added will now be visible. Click on Click here to create a form.

Click the StaticKit logo to return to the dashboard, you will find your site now has a form with an ID, make a note of this ID for later use.

To provide your app with access to StaticKit components, run this command from the root of your project directory:

npm install @statickit/react

Adding the @statickit/react dependency to the project.

Next, import the useForm hook and bind the form onSubmit to StaticKit in your /pages/index.js file. Be sure to replace [YOUR FORM ID] with your actual form ID from StaticKit you received earlier.

  import React from "react";
  import Head from "next/head";
+ import { useForm } from "@statickit/react";

  const OptInForm = () => {
+   const [state, submit] = useForm("[YOUR FORM ID]");

+   if (state.succeeded) {
+     return (
+       <p className="pb-3 font-bold text-gray-800 text-lg">
+         Thank you for signing up!
+       </p>
+     );
+   }
    return (
-     <form>
+     <form onSubmit={submit}>
        <p className="pb-3 font-bold text-gray-800 text-lg">
          Sign up to be notified when we launch.
        </p>

Updating the /pages/index.js file with an onSubmit hook.

You now have a working landing page, the last step is to deploy it with ZEIT Now.

Step 3: Deploying with ZEIT Now

If you have not yet installed Now, you can do so by installing Now CLI.

You can now deploy your StaticKit + Next.js app with a single command:

now

Deploying the app with the now command.

When your app has deployed, it will look like the example below:

The StaticKit + Next.js landing page created with this guide.

If you want to deploy your StaticKit + Next.js app from a Git repository, you can use either Now for GitHub or Now for GitLab to have your project automatically deployed on every push, and aliased on push to master.

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

Was this helpful?

Written By

msweeneydev

on August 22nd 2019