Building a Pre-Launch Landing Page

    In this guide, we'll walk through how to create a simple pre-launch landing page to gather email addresses using StaticKit and Next.js. Run the following command to create a fresh Next.js project and install the StaticKit React client:

    npm init next-app next-landing-page
    cd next-landing-page
    npm i @statickit/react

    Create a pages/_app.js file with the following contents:

    import { StaticKitProvider } from '@statickit/react';
    function App({ Component, pageProps }) {
    return (
    <StaticKitProvider site="aeaa35c5c10b">
    <Component {...pageProps} />
    </StaticKitProvider>
    );
    }
    export default App;

    Then, replace the contents of the pages/index.js file:

    import React from 'react';
    import Head from 'next/head';
    import { useForm } from '@statickit/react';
    const OptInForm = () => {
    // Initialize the form hook
    const [state, submit] = useForm('optInForm');
    // Display a success message if form was submitted successfully
    if (state.succeeded) {
    return (
    <p className="pb-3 font-bold text-gray-800 text-lg">
    Thank you for signing up!
    </p>
    );
    }
    // Bind the `onSubmit` event to the hook
    return (
    <form onSubmit={submit}>
    <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;

    Run the following to install the CLI, add the optInForm to your config, and deploy. Your deploy key can be found under Settings.

    npm i -g @statickit/cli
    statickit forms add optInForm "Opt-In Form"
    statickit deploy -k <your-deploy-key>

    You now have a working landing page! Use the following command to boot the development server:

    npm run dev

    It should look like this:

    Check out the source on GitHub →