Posted on Sep 28 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.From the official Xata 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.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 Next app locally. Other requirements include the following:Try the demo application in this URL.Download the setup for the demo waitlist application from the main branch of this repository.Open up your terminal and cd into the cloned directory, xata-with-nextjs.Install the project dependencies using the package manager, npm:Now, let’s start the development server to preview the landing page with the command:The boilerplate code runs on port 3000 and should look something like this:To initialize the waitlist project, install the Xata CLI globally.Run this command: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:This command will open a new window for first-time users to authenticate and create a new API key for your user account.In your Xata account workspace dashboard, create a new database with a name. Navigate into the waitlist DB and create a table with a desired name. The defined columns in the table hold all the data information.Click on the plus icon to add a new column. Select the data type Email and give the column the name, email.To see how the data looks with the inferred data types, click Schema on the left navigation pane of your dashboard.Note: The IDs are unique for each new record and auto-generated.The other way to create a database is by following the process outlined in the Next.js starter guide. Make sure you run the xata init in the project directory.Within the src directory, create a new folder, pages/api/post-info.js. Copy-paste the following code:pages/api/post-info.jsLet’s break down the code snippets above.First, import the getXataClient function from src/xata.js, which is present in the app upon initialization with xata init. Then, in the asynchronous handler function, pass the parameters, request, and response, and within the function, initialize getXataClient to a xata variable.The request.body will handle the value email (the exact name in Xata DB) from the data submitted in the request body in the form input.Next, pass in the data, email as an object in the create function.The response.end() method will cause the webserver to stop once the data is created in the DB, meaning a successful status code, 200.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 app/page.js file.The Get started with Next.js and Xata guide shows you the proper process to follow.Copy-paste the following code in the src/app/page.js to update the file:Without the "use client" in the code above, you may encounter this error, as shown. To learn more about this error, check this documentation on using client components in Next.js.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.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 documentation if you want to learn about Xata and its use case with other frameworks. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Francisco Inoque - Sep 27 Aliyu Adeniji - Sep 24 Ingo Steinke - Sep 27 Anik Routh - Sep 24 Once suspended, terieyenike will not be able to comment or publish posts until their suspension is removed. Once unsuspended, terieyenike will be able to comment and publish posts again. Once unpublished, all posts by terieyenike will become hidden and only accessible to themselves. If terieyenike is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to teri. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag terieyenike: terieyenike consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging terieyenike will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.