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:

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

2
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 (
    <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/[email protected]^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;

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

4
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.
        </p>

You now have a working landing page!

5
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:

now

Check out the source on GitHub →