FaunaDB is a serverless cloud database that gives you low-latency access to your app data around the world.

This guide walks you through creating a Next.js app that receives data from a Node.js API powered by FaunaDB, and how to deploy it with Vercel .

To start, you need to have created a FaunaDB account. Once logged in to FaunaDB, create a child database named zeit (names are case sensitive).

Creating a new database in the FaunaDB dashboard.

After clicking Save, you will be taken to the Database Overview page.

From here, the easiest way to create a demo schema with some data is to execute a Fauna Query Language (FQL) script file.

Select the Shell tab, then copy in this FQL script and click Run Query.

Adding data to a FaunaDB database from the dashboard using an FQL script.

After executing the script, the Collections page will present you with dummy data. You are now ready to create a connection to the database.

The Collections page on the FaunaDB dashboard after adding data to the database.

Go to the Security page and create a new key. Enter the following data in the fields:

Database: zeit

Role: Admin

Key Name: access

Once you have entered the required data, save. FaunaDB will then take you to the Keys page.

On the Keys page, you will receive a unique hash called a Secret. The Secret is your method of securely identifying yourself to the database.

Warning: This is the only time you will see this hash, so record it somewhere private. However, if the hash is lost, a new one can be created.

Create a Secret to store the access key received, this will be used later when accessing the database.

vercel secrets add FAUNADB_SECRET_KEY [your-access-key]

Adding the access key as a Secret.

Get started creating your Next.js by making a project directory with the required structure and moving into it:

mkdir -p faunadb-demo/pages/api && mkdir faunadb-demo/components && cd faunadb-demo

Creating and entering into the /faunadb-demo directory.

Next, initialize the project:

npm init -y

Initializing the project, this creates a package.json file.

Continue to install the FaunaDB JavaScript client which allows you to connect to, and query, the database, along with the required dependencies for Next.js:

npm i faunadb next react react-dom

Adding the faunadb , next , react and react-dom dependencies to the project.

Inside of the /pages directory, create an index.js file with the code below:

import { useEffect , useState } from 'react' import Head from 'next/head' import TableRow from '../components/TableRow' export default ( ) => { const [ data , setData ] = useState ( [ ] ) useEffect ( ( ) => { async function getData ( ) { const res = await fetch ( '/api' ) const newData = await res . json ( ) setData ( newData ) } getData ( ) } , [ ] ) return ( < main > < Head > < title > Next.js, FaunaDB and Node.js </ title > </ Head > < h1 > Next.js, FaunaDB and Node.js </ h1 > < hr /> < div className = " container-scroll " > < div className = " container " > < h2 > Customer Data </ h2 > < div className = " table " > < h4 > name </ h4 > < h4 className = " telephone " > telephone </ h4 > < h4 className = " credit-card " > credit card </ h4 > </ div > { data . length > 0 ? ( data . map ( d => ( < TableRow key = { d . data . telephone } creditCard = { d . data . creditCard . number } firstName = { d . data . firstName } lastName = { d . data . lastName } telephone = { d . data . telephone } /> ) ) ) : ( < > < TableRow loading /> < TableRow loading /> < TableRow loading /> </ > ) } </ div > </ div > </ main > ) }

Adding a /pages/index.js file to the project.

Then, create a TableRow.js file inside of the /components directory with the code below:

export default ( { creditCard , firstName , loading , lastName , telephone } ) => ( < div className = " table table-row " > < p className = { loading ? 'loading' : '' } > { firstName } { lastName } </ p > { ' ' } < p className = { ` telephone ${ loading ? 'loading' : '' } ` } > { telephone } </ p > < p className = { ` credit-card credit-card-number ${ loading ? 'loading' : '' } ` } > { creditCard && < img src = " /icons/visa.svg " /> } { creditCard } </ p > </ div > )

Adding a /components/TableRow.js file to the project.

Add a build script to the package.json file which will tell Vercel how to build your project:

{ ... "scripts" : { "build" : "next build" } }

Adding a build script to the package.json file.

Note: If you wish to use the same styles as the If you wish to use the same styles as the example app , you can find them here

Create the Node.js API endpoint that will fetch the data from FaunaDB by adding an index.js file to the /pages/api directory.

The index.js file will act as the default endpoint for getting information from your database. The file should contain the following code:

const faunadb = require ( 'faunadb' ) const secret = process . env . FAUNADB_SECRET_KEY const q = faunadb . query const client = new faunadb . Client ( { secret } ) module . exports = async ( req , res ) => { try { const dbs = await client . query ( q . Map ( q . Paginate ( q . Match ( q . Index ( 'all_customers' ) ) ) , ref => q . Get ( ref ) ) ) res . status ( 200 ) . json ( dbs . data ) } catch ( e ) { res . status ( 500 ) . json ( { error : e . message } ) } }

An example /pages/api/index.js file that retrieves information from the database.

Create a vercel.json at the root of the project directory, this is used to make the Secret defined in step 2 available to the Serverless Function.

{ "env" : { "FAUNADB_SECRET_KEY" : "@faunadb_secret_key" } }

An example vercel.json file that makes a Secret available to the application.

To deploy your Next.js + FaunaDB app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.