Getting Started

Getting Started

Setting up a new Next.js project

Set up a new Next.js project by running the following command.

npx create-next-app@latest

πŸ’‘ We will use the new Next.js 13 folder structures and app router. You can choose to use TypeScript and TailwindCSS; however, we’ll stick with JavaScript for simplicity.

I choose the following options

βœ” Would you like to use TypeScript? … No
βœ” Would you like to use ESLint? … Yes
βœ” Would you like to use Tailwind CSS? … No
βœ” Would you like to use `src/` directory? … Yes
βœ” Would you like to use App Router? (recommended) … Yes
βœ” Would you like to customize the default import alias? … No

Next, install the fauna npm package by running the following command in your terminal.

npm i fauna --save

Fauna database configuration

We’ll create a new Fauna database for this project. Head over to and select create database.

Create database

Give your database a name. Select a region group for your database. In my case, I selected the US. This creates a database with 3 replicas across the US.

Fauna ensures that the data is always served from the user's nearest location for reduced latency. For instance, if a user's location is Iowa, Fauna will retrieve and serve the data from the closest replica, which is in Ohio. In contrast, if a user requests data from California, it will serve the data from the California data center.

Select disable for backups for now and select create.

Create database

Once your database is created, create three collections called User, Video and Permission

You can create a collection by selection the + icon in the left side menu.

Create collections

Create collections

We need a secret key to connect to our database from the Next.js application. To create a new key navigate to the Fauna web shell and run the following code.

Key.create({role: "server"})

Getting secret key

Save the generated secret. We will use this server key to connect to our database from the Next.js application.

Head back over to your Next.js application code. Add a new environment variable called NEXT_PUBLIC_FAUNA_KEY to your .env file. Add the generated secret as a value for the environment variable.

// .env

Next add the following code to your page.js file to verify you can connect to the database.

'use client'
import { useState, useEffect } from "react";
import { Client, fql } from "fauna";
export default function Home() {
  const client = new Client({
    secret: process.env.NEXT_PUBLIC_FAUNA_KEY
  useEffect(() => {
    `).then((response) => {
  }, []);
  return (
        Hello World

πŸ‘©πŸ»β€πŸ’»Β link to code

Since we haven’t added any documents to the User collection, the response will be empty at this point.

Last updated on August 17, 2023