This Guestbook Single-Page Application (SPA) example shows you how to use Fauna's GraphQL endpoint in your Next.js project.
Deploy the example using Vercel:
By importing a .gql or .graphql schema into Fauna (see our sample schema file), Fauna will generate required Indexes and GraphQL resolvers for you -- hands free 👐 (some limitations exist).
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example with-fauna with-fauna-app
# or
yarn create next-app --example with-fauna with-fauna-app
You can start with this template using create-next-app or by downloading the repository manually.
To use a live Fauna database, create a database at dashboard.fauna.com and generate an admin token by going to the Security tab on the left and then click New Key. Give the new key a name and select the 'Admin' Role. Copy the token since the setup script will ask for it. Do not use it in the frontend, it has superpowers which you don't want to give to your users.
The Next.js and Fauna example includes a setup script (npm run setup). After providing your admin token, the script will:
- Import your GraphQL schema: Fauna automatically sets up collections and indexes to support your queries. You can view these in your project dashboard under GraphQL.
- Create an index and function: The script will create a GraphQL resolver that uses User-defined functions based on a sorting index.
- Create a scoped token: This token is for use on the client side. The admin key can be used on the server side.
After the script completes, a .env.local file will be created for you with the newly generated client token assigned to an Environment Variable.
Install packages, set up if needed, then run the development server:
npm install
npm run devYour app should be up and running on http://localhost:3000!