Launching a new product or application comes with many exciting moments, not just for the owner but for the larger audience to be aware of a new service. A waitlist application is used by agencies, companies, marketing campaign websites, and many more to collect user data from a website when a user fills in their email address. This strategy serves the purpose of remarketing or reminders before the launch. In this post, you’ll learn how to use Xata to store data by integrating it into a Next.js app, a React full-stack application framework for building user interfaces. Also, this guide will show you how to create a new database (DB) in your Xata admin workspace. What is Xata? From the official documentation, Xata is a serverless database platform powered by PostgreSQL packed with features such as the fuzzy search, the ability to import CSV (comma-separated value), file attachments, Python and TypeScript SDK integration, and so on. Xata Prerequisites To complete this tutorial, you need an Xata account. If you don’t have one, . sign up for a free developer account now This tutorial assumes you’re familiar with running a app locally. Other requirements include the following: Next Understanding of writing CSS with Tailwind CSS Basic JavaScript knowledge Demo Try the demo application in this . URL Installation and setup Download the setup for the demo waitlist application from the . main branch of this repository Open up your terminal and into the cloned directory, . cd xata-with-nextjs cd xata-with-nextjs Install the project dependencies using the package manager, : npm npm install Now, let’s start the development server to preview the landing page with the command: npm run dev The boilerplate code runs on and should look something like this: port 3000 Configuring Xata instance To initialize the waitlist project, install the Xata CLI globally. Run this command: npm install -g @xata.io/cli Next, you need to authenticate the Xata CLI with your Xata account, as this will ensure your system is configured correctly for your profile. You do not need to repeat this process once the configuration is complete with this command: xata auth login This command will open a new window for first-time users to authenticate and create a new API key for your user account. Creating a new database In your Xata account workspace dashboard, create with a name. a new database Navigate into the DB and create a with a desired name. The defined columns in the hold all the data information. waitlist table table Click on the icon to add a new column. Select the data type and give the column the name, . plus Email email To see how the data looks with the inferred data types, click on the left navigation pane of your dashboard. Schema : The are unique for each new record and auto-generated. Note IDs The other way to create a database is by outlined in the Next.js starter guide. Make sure you run the xata init in the project directory. following the process Inserting a new record Within the directory, create a new folder, pages/api/post-info.js. Copy-paste the following code: src pages/api/post-info.js import { getXataClient } from "@/xata"

    const handler = async (request, response) => {
      const xata = await getXataClient()
      const { email } = request.body
      await xata.db.details.create({
        email
      })
      response.end()
    }

    export default handler Let’s break down the code snippets above. First, import the function from , which is present in the app upon initialization with xata init. Then, in the asynchronous function, pass the parameters, request, and response, and within the function, initialize getXataClient to a xata variable. getXataClient src/xata.js handler The will handle the value email (the exact name in Xata DB) from the data submitted in the request body in the form input. request.body Next, pass in the data, email as an object in the function. create The method will cause the webserver to stop once the data is created in the DB, meaning a successful status code, 200. response.end() Integrating Xata into the app In this section, if you experience this error when running the server, it is because the code needs to run on the server, not the client. That is within the file. app/page.js Uncaught Error: You are trying to use Xata from the browser, which is potentially a non-secure environment. If you understand the security concerns, such as leaking your credentials, pass `enableBrowser: true` to the client options to remove this error. The guide shows you the proper process to follow. Get started with Next.js and Xata Copy-paste the following code in the to update the file: src/app/page.js "use client"
    import { useState } from "react"
    import Footer from "@/components/Footer"
    import Services from "@/components/Services"
    import Image from "next/image"
    import { bigShoe1 } from "@/assets/images"

    export default function Home() {
      const [email, setEmail] = useState('')
      const [isSubmitted, setIsSubmitted] = useState(false)
      const [error, setError] = useState(null)
      const resetFormField = () => {
        setEmail('')
      }
       const submit = () => {
        fetch('/api/post-info', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            email
          }),
        })
      };
      const handleSubmit = (e) => {
        e.preventDefault()
        if (!email) {
          setError('Email is invalid')
          return
        }
        submit()
        resetFormField()
        setIsSubmitted(true)
      }
      const isValidEmail = (email) => {
        return /\S+@\S+\.\S+/.test(email);
      }
      const handleChange = (e) => {
        if (!isValidEmail(e.target.value)) {
          setError('Email is invalid');
        } else {
          setError(null)
        }
        setEmail(e.target.value)
      }
      return (
        <main>
          <section className="w-full py-8 z-10 sm:px-16 px-8 flex xl:flex-row flex-col justify-center gap-10">
          <div className="xl:w-2/5 flex flex-col justify-center items-start w-full">
            <p className="text-xl font-montserrat text-coral-red">Our summer collection</p>
            <h1 className='mt-10 font-palanquin text-8xl max-sm:text-[72px] font-bold'>
              <span className='xl:bg-white xl:whitespace-nowrap z-10 pr-10'>
                The New Arrival
              </span>
              <br />
              <span className='text-coral-red inline-block mt-3'>Nike </span> Shoes
            </h1>
            <p className='font-montserrat text-slate-gray text-lg leading-8 mt-6 mb-14 sm:max-w-sm'>
              Discover stylish Nike arrivals, quality comfort, and innovation for
              your active life.
            </p>
            {isSubmitted ? (
              <div>
                <p className="font-bold text-2xl">Well received! We will keep you updated.</p>
              </div>) : (
              <form className="w-full flex items-center max-sm:flex-col gap-5 p-2.5 sm:border sm:border-slate-gray rounded-full" onSubmit={handleSubmit} id="joinwaitlist">
              <input type="email" name="email" id="email" placeholder="Enter your email address" className="input" value={email} onChange={handleChange} />
                <div className="flex max-sm:justify-end items-center max-sm:w-full">
                <button className="w-full bg-coral-red rounded-full text-white border-coral-red px-7 py-4" type="submit">Join waitlist</button>
                </div>
              </form>
            )}
            {error && <p className="text-rose-700 mt-5 ml-3">{error}</p>}
          </div>
          <div className='flex-1 flex justify-center items-center bg-center bg-cover'>
            <Image
              src={bigShoe1}
              alt='shoe collection'
              width={610}
              height={500}
              className='object-contain'
            />
          </div>
          </section>
          <section className="sm:px-16 px-8 sm:py-24 py-12">
            <Services />
          </section>
          <Footer />
        </main>
      )
    } Without the in the code above, you may encounter this error, as shown. "use client" To learn more about this error, check on using client components in Next.js. this documentation The final demo should look like this: showing some validation error if no email is typed or clicking the button on an empty input field. Conclusion Xata integration with Next.js is excellent for building your ideas and capturing user data on the backend without so much effort in setting up the architecture yourself from scratch. Check out the if you want to learn about Xata and its use case with other frameworks. documentation

Building LLMs with the Right Data Mix

Convert Design To code Integrating Appwrite Cloud With Dhiwise

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Technical content creator

Too Long; Didn't Read

Building an Efficient Waitlist App with Next.js and Xata

Building an Efficient Waitlist App with Next.js and Xata

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2021: Reviewing and Kaizen-ing My Programming and Writing Life

10 Ways to Optimize Your Database

10 Ways to Reduce Data Loss and Potential Downtime Of Your Database

10 Principles of Proper Database Benchmarking

10 Minute Guide to Fixing Damaged SQL Databases - No Recovery Required!

10 Best Online Courses to Learn Oracle and PL/SQL for Beginners

2021: Reviewing and Kaizen-ing My Programming and Writing Life

10 Ways to Optimize Your Database

10 Ways to Reduce Data Loss and Potential Downtime Of Your Database

10 Principles of Proper Database Benchmarking

10 Minute Guide to Fixing Damaged SQL Databases - No Recovery Required!

10 Best Online Courses to Learn Oracle and PL/SQL for Beginners

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps