Deploy a Next.js and FaunaDB-Powered Guestbook with ZEIT Now

Create a Next.js and FaunaDB-Powered Guestbook App and deploy it with ZEIT Now.

With the release of create-next-app, bootstrapping Next.js apps is now a guided process that allows you to get up and running in seconds by using ready-made examples.

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

Step 1: Creating a FaunaDB Database

From the FaunaDB dashboard, create a new database, providing a name of your choosing.

Once created, select the Security tab and create a new key with the following details:

  • Database: zeit
  • Role: Admin
  • Key Name: secret-key

Make a note of the secret when it is shown as you will need this for Step 2.

Step 2: Set Up Your Next.js App

Set up your bootstrapped Next.js app with npx and move into the project directory:

npx create-next-app --example with-graphql-faunadb my-nextjs-guestbook && cd my-nextjs-guestbook

Initializing a Next.js, GraphQL, and FaunaDB app with npx and moving into the project directory.

By including the with-graphql-faunadb argument, create-next-app bootstraps an app based off of a template found in the Next.js examples repository.

Install the project dependencies:

npm i

Installing the dependencies for your project with npm.

Then, start the setup script, providing your FaunaDB secret obtained in Step 1 when prompted:

npm run setup

Running the setup script provided for your project.

This script achieves the following:

  • Uploads the GraphQL schema
  • Creates a role that can only access your guestbook entries
  • Creates a key on that role
  • Returns a key for you to paste in the next.config.js

Next, add the key returned by the setup script to your next.config.js file by replacing the value for the faunaDbSecret property with the key created by the script.

Step 3: Deploying Your App with ZEIT Now

With your Next.js app set up, it is ready to deploy live with ZEIT Now.

Using Now CLI, deploy your website with a single command:

now

Deploying your Next.js app with Now CLI.

If you want to deploy your Next.js app when you push to a Git repository, you can use either ZEIT Now for GitHub, ZEIT Now for GitLab, or ZEIT Now for Bitbucket to have your project automatically deployed on every push, and the production domain updated on push to master.

Bonus: Exploring the App

The app features a working Guestbook SPA with GraphQL support, connected to an example FaunaDB database.

hint: FaunaDB provides support for importing GraphQL schemas, you can read more about this in the FaunaDB documentation.

By importing a GraphQL schema into your database, you gain access to FaunaDB’s versatile GraphQL endpoint. This endpoint automatically resolves GraphQL queries and mutations.

The GraphQL import process generates the requisite Collections, Indexes, and resolvers expected of your schema. FaunaDB also generates CRUD mutations for each GraphQL object.

All of the components for the app are found in the /components directory. Meanwhile, the CSS is in JavaScript and located in the /styles directory, this is automatically vendor-prefixed when necessary.

In graphql/api.js, you will find two GraphQL requests that correspond to a query and a single mutation. These methods fetch guestbook entries and create new ones, respectively.



Written By
Written by msweeneydevmsweeneydev
on November 19th 2019