
Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time. 

On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support. 

Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna. 

You will learn,

- How to work with Apollo GraphQL Client in Next.js
- How to setup Fauna GraphQL
- Data modeling in Fauna
- How to write custom Fauna GraphQL Resolvers (UDFs)
- How to authenticate with Auth0?
- Stripe payment 



We are starting from scratch! To create a new Next.js application we'll run `npx create-next-app` and pass in the `with-tailwindcss` flag to include Tailwind.

Then we will clear out the initial page and write in hello world.

Bootstrap a New Next.js Application with Tailwind using create-next-app

The next step is to model the data that we are going to use for our application, we'll have a Shop and Product. Shops will 'have many' Products. 

You'll see how to type this in a GraphQL schema with the different properties we want on Shop and Product. Additionally we will be introduced to the faunadb `@relation` directive which is similar to a foreign key constraint. 

[Read more about the @relation directive in the docs.](https://docs.fauna.com/fauna/current/api/graphql/directives/d_relation)

```typescript
# schema.graphql
type Shop {
  name: String!
  description: String!
  coverImg: String!
  products: [Product]!
  ownerID: String!
}

type Product {
  name: String!
  description: String!
  price: Float!
  category: String!
  shop: Shop! @relation
}
```

Model our Application Data with a GraphQL Schema

With our GraphQL schema in hand, we can create a full-fledged Fauna database. We'll import our GraphQL schema into a newly created database and explore the mutations and queries that were generated for us by creating and searching for a shop.

Upload a GraphQL Schema to Create a FaunaDB Database and Create a Shop

Our application code is still pretty bare at this point. For a shop application, we'll want a consistent `Nav` bar. We'll wrap that `Nav` around our existing code in `_app.js` to have a consistent nav across all pages.

In this lesson, I paste in the presentational code with all the Tailwind pre-written. This course isn't about crafting UIs so we skim past this part, I encourage you to dig around the `Nav` component if you want to see how I did that.

Create a Application Layout in Next.js and Cart Page

To build out our Shop products page on the frontend we will need data coming in from the database. To do that we need to connect Fauna to Next.js. We'll do this through Apollo Client because it will give us a lot right out of the box.

To connect our database we'll configure Apollo Client with `httpLink` and `authLink`. On the Fauna side of things we'll create a role and key for Read permissions (just Read for now) and grab the graphql endpoint to supply as environment variables for Next.js.

Connect a Frontend Next.js Application to a Serverless Fauna Database with Apollo Client

Now that Apollo Client is set up and ready to be used, we can finally query data from Fauna to use in our application. 

We'll go to the Fauna GraphiQL playground and copy the `findShopById` query that we ran previously. This query will be passed into Apollo's `useQuery` hook.

Query Data with GraphQL in Next.js from a Fauna Database

Now is time to use actual data product data to create and display products on a page in Next.js. Similar to before, I'll create a `ProductsList` component which will have styles and structure predefined. Look through the component in the code to get an idea of what's going on here.

There are a couple updates we'll have to do with Fauna to accomplish this. First you'll notice that there is no 'getAllProducts' query that is available to us. To create such a query, we will update our schema with a `query` of `getAllProducts` that returns an array of products. We'll test it out in the GraphiQL playground and add it to Next.js. 

The first time you run a query like this, you'll notice you get a permission denied from the fauna endpoint. This is because we need to update our permissions to include the new index that Fauna made for `getAllProducts`. Once we do that we'll be in business.

Create Products in Fauna and Display Them on a Next.js Product Page

Fauna is a flexible database so we can update our schema without breaking any existing functionality. You'll notice that our products all have hard coded images. In this lesson, we'll update our `Product` to include an image and import those changes to Fauna.

Update the Product GraphQL Data Model and Upload Changes to Fauna

We'll use [Auth0's Next.js quickstart guide](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) to add authentication to our application. While doing so, we'll create and set all the right keys that we will need, create an auth api route, wrap our application in a `UserProvider` component and finally add a login button that uses Auth0's hook they provide.

Add Authentication to a Next.js Application with Auth0

Now that we have login working, we'll need to configure Fauna with Auth0 to give logged in vendors more permissions than logged out users.

We'll start by creating a role that includes creating, updating, and deleting data in our database. In the provider tab, we'll create an access provider and set issuer and JWKS urls that we got from Auth0. This will create an Audience URL that we will set in Auth0 and Next.js.

Configure Fauna to Authenticate with Auth0 in a Next.js Application

Logged in vendors need a way to create a new shop to sell products on. This lesson will do some presentational code set up before we interact with the database. 

We'll create a button that we conditionally show to logged in users, create a new page, and walk through a new shops form component.

Create a New Shop Form Page for Logged In Users

We are ready to create new shops for our vendors. To do this we'll define a `CreateShop` mutation that will take in all the data that our form provides. Then `useMutation` will accept that mutation and give us a function to pass our data into as well as give us the new created shop data. We'll pass in user information that we get from Auth0. 

This lesson finishes up with an error because Fauna doesn't know if the request came from an authenticated user or not. We'll solve this with dynamic headers in the next lesson.

Create New Shop with Apollo Client useMutation

To make an authenticated request, we will need to get logged in users auth tokens from Auth0. Auth0 exposes a `getAccessToken` function that we can use in Next.js `getServerSideProps` to fetch the user token. It's important to note that this function can only be used server side. We'll pass that token into the page we need to send authed requests.

To enable Apollo Client to set the headers we'll extend the client so that allows us to pass in auth tokens and sets the client context. We will then destructure the client from our `useMutation` hook and set the context to include the user token.

Set Dynamic Auth Header for Apollo Client using Next.js getServerSideProps

It would be great to show a list of shops that a vendor has created. To do this we will need to create a new query `getShopsByOwnerId` that accepts a string that will be our user id. Like before, we'll merge this schema change into Fauna and update our roles to make this request.

On the frontend we'll create a shop list component and pass in the user token that Auth0 gives us for the logged in user.

Query Data by Property with GraphQL and Fauna in Next.js

Each shop will need to have products added to it by the vendor. To do this we'll need to dynamically create pages based on which shop we want to add to. Next.js has dynamically routing that we will utilize here. We'll set the shop id as the dynamic portion of the route and display a new product form. 

Here we will create that product form component and use Apollo `useMutation` like we did before to take in the form data. You'll notice a new keyword in our mutation query `connect` which we can use because we have a `@relation` set between products and shop. This connect will associate the product to the shop through the id that we grab from the route.

Create Dynamic Next.js Shop Page to Add Products for a Shop with Apollo useMutation

If you have been poking around the queries at this point in the course, you might notice that when you query for a product, you can get all the associated shop information. This is because we defined the `@relation` on the `Shop` property within `Product`. This allowed Fauna to create an index behind the scenes to easily fetch this data. 

We haven't done the same for the `Product` property on the `Shop` so we can't access the data. When we add a new `@relation` to `Product` we can then grab all the product information from shop queries that we like. 

This is based on the [Document Model Relationship in Fauna that you can read more about here](https://docs.fauna.com/fauna/current/learn/tutorials/graphql/relationships).

Add a Product Relation to Shop to understand Document Model Relationship in Fauna

When a vendor manages their shops, they might want to click into the shop and mange the products associated with that shop. Let's create a page for that.

I'll create a details route that will host this information. On this page we will write a `GetShop` query that will take in the shop id that is pulled from the route. Similar to the shops page, we will iterate over the products on the shop and add buttons to manage individual products.

Create Shop Details View that uses GraphQL to Query Fauna by Shop Id

Let's implement the delete shop functionality to the buttons that we've added to the shop manage page. Fauna allows you to define custom resolvers to run multiple database operations so you don't have to make multiple trips to the database.

We'll define a new mutation in our GraphQL schema that will take in a shop id and sets the `@resolver` directive which will tell Fauna to create a custom resolver that we can define within Fauna.

In our Fauna database, you'll see that we have a new user generated function created. This function accepts Fauna Query Language which is the native api for interacting with Fauna. We'll perform a multi-step operation by deleting the shop and then all of the products associated with that shop.

You can [read more about Fauna Query Language here and take the getting started guide to get a feel for the language](https://docs.fauna.com/fauna/current/api/fql/).

Run Multiple DB Operations with Custom Resolvers and Fauna Query Language

We will implement the delete shop in our Nextjs application. When the user selects the delete button for a shop in the shop's list, it will execute the `DeleteShopAndProducts` mutation and delete the shop and all associated products. 

Implement Delete Shop Mutation with Apollo Client in Nextjs

We want visitors to our site to be able to browse our products and add them to a cart for purchase. 

To do this we'll create React Context to expose a cart value to our application so we can use it where we need to. This context will handle adding items and deleting items from the cart. We will hook up the add functionality to buttons on our product cards as well as display how many items we have in the cart in our Nav bar.

Implement Cart Functionality for a Store with React Context

A cart isn't very useful if we don't have a check out page to actually purchase products at. While we aren't setting up payment process just yet, this lesson will set us up by looping over products in our cart and displaying them in a list.

Create a Checkout Page in Next.js that Displays Cart Contents

You will implement stripe checkout in your application so that customers can buy products.

To do this, you will first create a Next.js API route that starts a stripe session and passes in products that are in the cart. This will forward users to the Stripe checkout page where they can input their credit card information.

Upon success or cancel, stripe will forward the user back to urls that you set.

Full-Stack Serverless Applications with Next.js & Fauna

Instructor

Course Content