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
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’d make a compelling pitch for your new product. </p> <OptInForm /> </div> </div> </div> ) export default Home
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
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>
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
When your app has deployed, it will look like the example below:
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 the production domain updated on push to master.
For more information, you can find the source code for this example on GitHub along with the live example.