Once created, select the Security tab and create a new key with the following details:
- Key Name:
Make a note of the secret when it is shown as you will need this for Step 2.
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
By including the
create-next-app bootstraps an app based off of a template found in the Next.js examples repository.
Install the project dependencies:
Then, start the setup script, providing your FaunaDB secret obtained in Step 1 when prompted:
npm run setup
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, 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.
To deploy your Next.js + FaunaDB project with a Vercel for Git, make sure it has been pushed to a Git repository.
Import the project into Vercel using your Git 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.
The app features a working Guestbook SPA with GraphQL support, connected to an example FaunaDB database.
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
/styles directory, this is automatically vendor-prefixed when necessary.
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.