Building a Landing Page with Next.js

In this guide, we'll walk through how to create and deploy a simple pre-launch landing page to gather email addresses using StaticKit and Next.js.

Here's a working version of what you'll end up creating:

Create a new project

Run the following command to create a fresh project:

npm init next-app next-landing-page

This command will make a new directory, add a package.json file with the necessary dependencies and script definitions, and scaffold a sample home page for you.

To boot up your local development server, run the following:

cd next-landing-page
npm run dev

You should see "Welcome to Next.js" when you open http://localhost:3000/ in your browser.

Design your landing page

Go ahead and replace the contents of the pages/index.js file with the following code. We are using the Tailwind CSS framework to style the page. The <form> tag is not yet wired up to anything — that's coming next!

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

const OptInForm = () => {
  return (
      <p className="pb-3 font-bold text-gray-800 text-lg">
        Sign up to be notified when we launch.

      <div className="flex flex-wrap items-center">
        <label htmlFor="email" className="hidden">
          Email Address

          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"

          className="mb-3 px-5 py-3 rounded-lg border border-purple-700 bg-purple-700 text-lg font-bold text-white"
          Notify me

const Home = () => (
        href="[email protected]^1.0/dist/tailwind.min.css"

    <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

        <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.

        <OptInForm />

export default Home;

Create your form

In StaticKit, click Add a site... in the top navigation to create a new site for your landing page. Then, click Add a form... under your new site to create the form.

Wire up your landing page

From your project directory, run this command:

npm install @statickit/react

Next, import the useForm hook and bind the form submit to StaticKit. Be sure to replace [YOUR FORM ID] with your actual form ID from StaticKit.

  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.

You now have a working landing page!

Deploy with ZEIT Now

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

Then, run the Now command to push it live:


Check out the source on GitHub →