Next.js is a minimalistic framework for server-rendered React applications.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Dive into the world of real-time web development with this hands-on course! You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

**What You’ll Learn:**
- **Next.js Best Practices:** Master Next.js best practices for building fast, maintainable apps.
- **Server-Side Rendering (SSR):** Learn SSR techniques and master features like server actions, server side form submission etc.
- **Database Access Patterns:** Efficiently connect and retrieve data using Fauna.
- **Real-Time Updates:** Implement real-time updates with Fauna Streams.
- **Basic Authentication:** Secure your chat app with simple authentication methods.

**Course Highlights:**
- Practical, project-based learning.
- Clear, step-by-step instructions.
- Focus on modern, real-time web development.
- Tips and tricks for optimizing performance.

By the end of this course, you’ll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.


Maxime Bourgeois

We'll start off by creating our project with `npx create-next-app`. This is a standard install so we'll select some of the options the CLI offers us.

Next, you'll notice that I'm running into some errors importing packages. This is because we need to update our eslint config so we'll edit `.babelrc` and `.eslintrc` to get those errors to go away.

Set up a Next 14 Project with create-next-app

The first step is to install and configure our database that will be backing our Next.js application. We'll be using Fauna so we head over to the Fauna website and create a database.

Back in our terminal we will install `fauna-shell` so we can interact and manage our database from within our project. After some initializing steps from the CLI we'll be set up to build the app out.

Initialize and Configure a Fauna Database inside a Next.js project with fauna-shell

The first step to building a chat app is to have rooms to chat in. We'll need to create a Room collection (or table) in Fauna that we'll be adding to.

In our Next Application we'll create a simple form that has a submit handler that will create those rooms in Fauna. We need to hold some state in our component so we'll turn the page into a client component with `'use client'`.

There will be a little bit more Fauna set up to get things working. We need to create a key for our application to interact with our database so we'll create a key by running `Key.create` in our `fauna shell`. Then we'll install the `fauna` client and make a `client.query` to create the room.

Create a Fauna Room Collection in Next.js with the fauna Client

We can add rooms but our application does not update and display rooms when a room is added. This should happen in real-time.

To fix this we'll add a useEffect that will query for all our rooms and use fauna's `client.stream` API to ensure that this happens in real-time.

List Available Chat Rooms in Real-time in Next.js from Fauna

With rooms being created and displayed on the index page, it's now time to create dynamic routes for each room so that when you click on a room name, you are actually navigated to that room.

We'll do this by using Next.js dynamic route syntax `/rooms/[...id]/page.js`. This will render a page on any `/rooms/:id` passing the component we define the `:id` as params.

Here we'll take that id and fetch the room data from fauna with a `Room.byId` query.

Create Dynamic Routes in Next.js for Chat Rooms

We'll take a moment to explore how Fauna handles one-to-many relationships inside the fauna shell. 

First we'll create a `Message` collection.

Then we'll connect to the cloud database by running `fauna shell`, because I'm logged and configured this connects to the database I'm working with.

In the terminal we'll see how to create multiple messages that are associated with a room and query for those messages by room.

Explore Faunas one-to-many Relationships between Collections in the Terminal

Now it's time to actually create messages and display them in rooms within our application.

We'll start by creating a `MessageForm` component that will send a `Message.create` query to Fauna on form submission.

Next, we'll display these messages by updating our room query to also get all the messages for that room. You'll see that we can still just perform one query because we pass in the room id and call `Message.where(.room == room)` to the query.

One note here is if you console log your messages in your page component, you'll notice that the logs show up in the terminal and not the browser. This is because we are using a server component.

Create and Display Messages using Fauna within a Room in Next.js

To stream messages, we'll implement logic very similar to how we stream the creation of rooms from earlier.

First, we need to convert `MessageList` into a client component. We'll get an interesting error saying that only plain objects can be passed to client components from server components. This happens because the response we get back from Fauna is pretty complex. To fix this error we'll create a simple messages array and pass that down to the `MessageList` component.

In the `MessageList` component we'll create a `useEffect` that will initiate a Fauna stream within a ref and push new messages into state that we are holding in the component.

Stream Chat Messages in Real-time in Next.js from Fauna

You'll notice that at the top level, we've set `'use client'` for our page. This means that everything on the page is a client component and we miss out on some benefits Next.js gives us by rendering on the server which includes a smaller bundle where sending to the client. 

We'll fix this in the next lesson.

Understand Server and Client Rendering and Data-fetching

To take advantage of Next.js app router, we need to separate our client components that need state from the rest of the page so we can load data on the server.

To do this we'll refactor the list of rooms into it's own `RoomList` component which will take the client-side React hooks with it. This way we can load all our rooms on the server and just pass it to `RoomList` which will start to stream the rooms as we create them.

The final step will be to turn the form for creating rooms into a server action. You'll notice that we will need to instantiate a new fauna client within the server action even though we have a client available in that same page. 

Refactor a Next.js 14 Page to Utilize Both Server and Client-side Rendering 

To have actual users in our application we need to represent those users in our database. Fauna has quite a few ways you can do user authentication but we'll be creating our own using a few built-in Fauna helpers.

We'll start by setting up the necessary Fauna logic for users. We'll add a `User` collection as well as a `functions.fsl` file that we'll expose user sign up and log in. Here we'll see how Fauna gives us a built in `Credentials` document to handle email and password for a user. It also has a login function that it exposes to make that easy for us which will generate a token for a user on login.

After setting up our functions, we'll add an `UnAuthRole` as well as an `AuthRole` and give proper actions for each role.

Add Fauna User Authentication to a Next.js App

Now it's time to actually sign users up for our appliaction.

We'll implement the `doSignup` function that we created earlier. This function will run on the server with the `'use server'` directive so we can instantiate a fauna client and call `UserRegistration` within this function.

From there we'll redirect the user to the `/signin` page which will error out because it's not implemented yet.

Implement Signup Functionality through Fauna with Next.js 14 Server Actions

For user signin, we'll implement a proper server action by creating a `actions.js` file where our server actions can live. In our login page, we'll set the component to be a client component to hold some state. This way we can use the new `useFormState` hook from `react-dom` and pass in our login server action.

Within the action we'll call our `UserLogin` function from Fauna and set a cookie with the secret we get back that we can use throughout our application.

Implement Fauna Signin with Next.js Server Actions and useFormState React Hook

Now that we have user Authentication, we can redirect users to sign in if we don't find a cookie to do so. 

Throughout our app we can now replace our fauna token we have set in environment variables to the user token that we have access to. 

Implement Auth Guards with Tokens throughout an Next.js App

Now that we have user information available to us, we want to connect messages created to the users that are sending them. When we add `read` privileges to the `User` model, we can call `User.identity()` to get the user data we need to set for messages. 

Update Fauna Messages Collection with Authors

Our app is in a good stopping point. A good challenge for you to implement from here is to implement a navbar with a `logout` button.

Challenge: Implement a NavBar for the Application with Logout Functionality

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.

Full-Stack Serverless Apps with Next.js & Fauna

Lazar takes you beyond just getting started, and will teach you everything you need to know about the fundamentals of Next.js. 

Fundamental Next.js API and Patterns

Learn the new Next.js App router through migrating pages, API routes, and React components.

Migrate Next.js Application to App Router

Build a Real-time Next.js 14 Chat App with Fauna 

https://app.egghead.io/api/v1/lessons/next-js-set-up-a-next-14-project-with-create-next-app/subtitles

[00:00] Let's go ahead and create a new Next year's application. We're gonna go to our terminal and run npx create next app followed by the name of the app, and we'll name our app chat app. And I will select no for typescript, and I will select yes for ES Lint. And I will select no for tailwind. And yes, I would like to use the source directory.
[00:20] And yes, I would like to use the app router. And I'll select no for import aliases. Next we're going to cd into our application directory and then we're going to run the application with npm run dev. And then in our browser, we're
[00:40] gonna go to local host 3,000. I'm gonna go to the source directory app and page file. And here, I'm going to replace all the boilerplate code with a simple title. And let's go ahead remove this image import as well for now. Now notice that we get this error in our import. So if
[01:00] you're getting this error just like me that means you need to update your ESLint configuration. Let's go ahead and do this together. So in the root of our project, we're gonna create a new file called dotbabblerc and here we add in a JSON object that has a presets field and in the presets field we add in next babel.
[01:20] Next, we're gonna go to eslintrc.json file. And here, we're gonna turn this extents field into array of strings, and we're going to add in next babble as an option. So let's go ahead and save this, and you'll notice
[01:40] that the import error is now gone.

https://app.egghead.io/api/v1/lessons/next-js-set-up-a-next-14-project-with-create-next-app/transcript

https://app.egghead.io/api/v1/lessons/faunadb-initialize-and-configure-a-fauna-database-inside-a-next-js-project-with-fauna-shell/subtitles

[00:00] We're gonna be using fauna as our database for this project. So let's go to fauna.com, and let's go ahead and log in. Once you logged in, you're presented with a dashboard where you can see all the databases you have already created. So I'm gonna go ahead and create a new database. So I'm just gonna select create database. Here, I'm gonna give my
[00:20] database a name. I'm gonna call it my new app. Next, I'm gonna select region group. I'm gonna select US for this database. I'm going to disable the backups for now and I am also going to disable the static typing. Now let's go ahead create this database.
[00:40] Now once the database is created, we can go and search for it and we will select the database and it will open up in the explorer. Now here from the UI we can create collections, we can add and delete documents to the collection, we can also create functions and roles, but for this course we're gonna do all that through the fauna
[01:00] cli and the fauna schema. So back in our terminal, let's go ahead and install the fauna shell globally by running npmidashgfauna shell. Fauna shell is a command line interface for fauna that lets you manage your databases from within your command line. Next, I'm going to run the fauna cloud login
[01:21] and it's going to ask me for an endpoint and I'm going to keep the default which is cloud And then I'm going to provide my email address and my password that I use for my phone or cloud. And then it's going to ask me for a region. I'm going to select cloud us.
[01:44] And now our configuration is updated. And this logs me into my FaunaCloud account from the command line. Next I'm going to run fauna project init to initialize a new fauna project within this codebase. I'll accept the default directory and then I'm gonna give my environment a
[02:04] name. We'll select cloud us as our default endpoint because that's where our database is located And then we're gonna select a database for this project. In this case, it's gonna be my new app database. And now our project is configured to use fauna.

https://app.egghead.io/api/v1/lessons/faunadb-initialize-and-configure-a-fauna-database-inside-a-next-js-project-with-fauna-shell/transcript

https://app.egghead.io/api/v1/lessons/faunadb-create-a-fauna-room-collection-in-next-js-with-the-fauna-client/subtitles

[00:00] We're gonna go back to our page.js file. Next, we're going to import user state from React. Once we save our code, we're gonna get an error. This is because in Next 14, all the page components by default are server components. Now notice in the builder here, it tells us that
[00:20] we can only use user state in a client component. So to make this component a client component, we're going to mark it with use client. And now the error is gone. Next, we're going to create a state for room name using the user state hook.
[00:42] And then we'll delete the h one tag here, and we will add a new form here, and we'll add in a new input tag. The input has a type of text. It has a placeholder and the value is room name variable. And then
[01:01] we have the on change event handler that we bind to the set room name function. And then we'll add a submit button. Now on the form tag, we will create, on submit event handler and then we will bind
[01:21] it to the create new room function. And let's go ahead and create this new function called create new room. Okay. So let's go ahead and implement this function. However, first we need a room table in our
[01:41] database. In Fauna, we can create database entities like tables from schema. In the root of our application, we're going to create a new folder called schema. Next I'm going to add a new file called main.fsl in this schema folder. And in our schema file we're going
[02:01] to write collection room and empty squiggly bracket. This tells Fauna that we're trying to create a new table called room. The tables are also called collections in Fauna. Next, we push this schema to the cloud by running fauna schema push in our terminal. And when we accept these changes, it will create a room collection or a room
[02:21] table in our cloud database. We can go back to the FaunaCloud dashboard and verify that the room collection has been created. We need to be able to connect to our database from our application code. To do so, we need a key. So we're gonna go run Fauna shell in the terminal and this will connect us to the Fauna cloud from our
[02:41] terminal. So we're gonna write key dot create and we're gonna pass in a role, which is gonna be the server role. And running this will create a key for this database that has a server role. We're gonna learn more about roles when we get to authentication. Next, we are going to create a
[03:01] new dotenv file in the root of our application and then here we're gonna create a new environment variable called next public fauna key and we're going to paste in the secret for our database here. Next, we're going to install the Fauna package by running npmifauna safe in
[03:20] our terminal. And then we're gonna go back to the page. Js file and here we are going to start implementing the create new room function. So first, we're gonna import client and
[03:40] FQL from fauna library. Next, we're going to initialize a new fauna client. And we're going to pull in the secret from our environment variable. Next, we're gonna go to our create new room function
[04:00] and add a prevent default. And then we're gonna add a try catch block. And then inside the try block we're gonna make a query to fauna. Const new room equals 08 client dot query and
[04:20] then fQL and then we're gonna do backticks and inside the backticks we're gonna write the fQL query. So we're gonna write room dot create and then name and the name is going to be the room name and we will console log
[04:40] the response. Now let's go ahead and try to create a new room from the web app. And we're gonna inspect the console. So let's just clear this. Let's do it again, and we'll see that
[05:00] this is our response, and it looks like a new room just got created in the database. We can verify this by going back to the Fauna dashboard and looking at the room collection and we can see our rooms are getting created.

https://app.egghead.io/api/v1/lessons/faunadb-create-a-fauna-room-collection-in-next-js-with-the-fauna-client/transcript

https://app.egghead.io/api/v1/lessons/faunadb-list-available-chat-rooms-in-real-time-in-next-js-from-fauna/subtitles

[00:00] We have our form working but we want to see the list of all the existing room here so let's go ahead and implement that so the first thing we're gonna do we're gonna import useEffect from react Next we create a new state for existing rooms and we will set it to empty array for now.
[00:21] And I'll remove this auto generated comment here. Next, we're gonna create a useEffect and we're gonna keep the dependency array empty because we only want to run everything inside this useEffect once when the component mounts. Inside the useEffect, we check if the fauna client is initialized. If it's
[00:41] not, then we will simply return. Then inside, we're gonna call a function called fetch rooms. Let's go ahead and create the fetch rooms function. And then we're gonna do a try catch block here. And then we're
[01:01] gonna do a fauna query. So we're gonna say const response equals await client dot query and then we're gonna do f q l and backticks and inside the backticks, we're gonna write our f q l code block. So we're gonna write room dot all and this will give
[01:21] us all the rooms and we'll set the existing rooms to response dot data dot data. Now let's go ahead and write the logic to display these existing rooms. We're gonna scroll down to our
[01:41] JSX code and under the form, we're gonna display all the existing rooms. So I'm gonna create a new div and a header and then we'll map over the existing rooms array. And for each room we're gonna have a div and I'm going to change the
[02:00] key to room dot ID. Let's, turn this p tag into a button and we'll change this to room dot name and you'll see that the existing rooms are now visible. Now notice that
[02:20] creating a new room actually does not update the existing rooms list. We want to update the existing rooms list for every user who's on the app at that moment. So every user would be able to see what rooms are available in real time. That's the idea. So let's go ahead and implement this logic. So back in
[02:40] our code, we're going to import use ref from React and we're gonna create a new reference variable called stream ref, which will initially going to be null. And then in the fetch room function, we're gonna create a if statement and check if the stream's ref
[03:00] is null or not. And then inside the if block, we are going to do our stream query. So we're gonna say const stream equals await client dot stream and then f q l. And inside this f q l, we're gonna write our fauna query and I'm gonna say room dot all and
[03:20] then to stream. So there's 2 things that we have to pay attention here. First of all, we are using the stream method in the client driver instead of the simple query method that we use. So this tells JavaScript that we're about to stream data from Fauna. Now streaming
[03:39] happens in near real time, so all the changes in the room collection will be broadcasted to all the connected clients. Now the second part is that we have this to stream function that sits inside our SQL block. Now this tells Fauna that we're going to be tracking changes for this collection in real time. Then we're gonna set stream
[03:59] ref current to the stream. This way, we're not gonna reinitialize a stream if it's already initialized. Then we're gonna do a for loop and iterate over every event of this stream. We can console log these events. And then we
[04:19] will do a switch on the event type. And then I'm going to add a case for add and a case for update. So every time a record is added to the room or updated, that's when we're gonna go into this code block. So we're going
[04:39] to update the area of the existing rooms when something is added or updated. We check if the updated item is already present in the existing rooms array. So we do this with a simple find index array function. Now if the room already exists in the existing
[04:59] rooms, we will simply update it and if it doesn't exist then we will add it to the existing rooms array. So here with this map function, we are returning an updated array and setting it to the existing rooms array. Now here I have 2 incognito browser window open, and now if
[05:19] I create a room in one of the browsers, you'll see that it will get updated in real time in both of the browser windows. And I'm gonna try creating another one and you will see that it gets updated in the both of the browsers. So now we're getting data in real time.

https://app.egghead.io/api/v1/lessons/faunadb-list-available-chat-rooms-in-real-time-in-next-js-from-fauna/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-dynamic-routes-in-next-js-for-chat-rooms/subtitles

[00:00] Okay. So here in the home page, now we have a list of the rooms. Now I want to be able to click on these rooms and enter one of these rooms. So let's go ahead and add that functionality. So we're gonna go back to our code and we're gonna go to our page file. And in the page component, we're going to import link
[00:19] from next link. And then we are gonna go to our JSX. And here, I'm going to replace the button with the link. So here, we're generating dynamic links for each of the room in existing room array. And I'm going to add a h ref
[00:39] here, and it's going to be rooms and the ID of the room. This way we'll have a dynamic link for each of the rooms, and clicking into one of these will take us to that link. Now back in our app, if we go and click any of these rooms, you will see that the route will change, but
[00:59] we're gonna get a 4 zero four error because we haven't really created the dynamic pages for this route. So let's go ahead and do that. Alright. So inside our our app folder, we're going to create a new folder and we're going to call it rooms. And then inside rooms, we're
[01:19] gonna create another folder and we're gonna have a square bracket and triple dot ID. Now this folder structure in Next. Js sets up the dynamic routes. Next, we create a page dot JS file inside the id folder. Next, we're gonna create a very simple page component here. We're gonna
[01:39] write export default function room. And then I'm going to return some simple JSX and I'll return a simple h one tag. Next, just to be consistent, let's add the same styles from
[01:59] home page to this page. So I'm going to import the styles from page module css, and I will add a class name to the outer div. So it's going to be styles dot main. So in this room component, we're going to fetch all the information about this room from database and we're going to make a database query in
[02:19] this component. So by default, it's gonna happen in server side because we're using Next 14. So we're gonna import client and f q l from fauna. And then we're going to initialize a new phono client. So we do new client and we pass in the secret from our environment variable.
[02:40] Next we are going to destructure the params props from this component. And this params props is passed down from Next. Js. Now let's make the database query. I'm gonna write const response client dot query. And then I'm gonna
[03:00] write FQL inside round bracket and back ticks. And inside the back ticks, we're gonna write room dot by ID, and we're gonna pass in the ID of the room. And we can get the ID of the room from the params props. So we're gonna write params dot ID and then index
[03:20] 0 because we want the first params from the route. And I'm getting an error on await. So let's just go ahead and add async in front of the function. And in rjsx, we are going to remove the word room, and we're just gonna add response dot data dot
[03:40] name so it displays the name of the room. Okay. So now in our browser, let's test everything. So here if we select a room, it takes us to that route and we can also see the name of the room. Let's go back and let's try with a different one. And this also displays the name
[03:59] correctly. And there we have it.

https://app.egghead.io/api/v1/lessons/next-js-create-dynamic-routes-in-next-js-for-chat-rooms/transcript

https://app.egghead.io/api/v1/lessons/faunadb-explore-faunas-one-to-many-relationships-between-collections-in-the-terminal/subtitles

[00:00] Let's take a look at the relationship between collections in our application. So we already have a room collection. We're also going to have a message collection. So a room will contain many messages in our application. So there is essentially a one to many relationship between room and messages. So we're gonna go back to our
[00:20] code and here under schema, we're gonna go change the main dot fsl file and we're going to add a new collection called message. Next, we're gonna run the Fauna schema push in our terminal. Then we're gonna accept the changes and
[00:39] this will update our FaunaCloud and a new collection call message will get created. Next, let's go ahead and connect to our database and run some queries. So in my terminal, I'm going to execute the fauna shell command, and this will connect me to the FaunaCloud database. I can run database queries right from the terminal now.
[00:59] So I'm going to get all the rooms. So I'm gonna write room dot all and then I'm going to execute this query by pressing enter. And notice that I get all the rooms that are in my database. I'm gonna press command k now to clear the console. Next, I'm going to create a new message document. So I'm
[01:19] just going to write message dot create and then round bracket and squiggly bracket. And inside, we're gonna have a text field. And this field will just contain a string that says hello world. And I press enter and the new message document is created in the database. Now I can get all the messages by
[01:39] executing message dot all and I'm just going to get one message because that's the only record we have in the message collection. Now let's clear the terminal again by pressing command k or alt control k if you're on Windows. Next, we're gonna write a query to get the 1st document in the room collection. So we're gonna write to room dot
[01:59] all dot take and then inside the bracket 1 to get the 1st document in the room collection. And running this will return the room data with this ID. Next, we are going to create a message for this particular room. So remember, we had one to many relationship between
[02:19] room and messages. So we're gonna create a couple messages for this room. So I'm gonna write message dot create, and then I'm gonna have a text field. And here in the text field, I'm gonna have a string. And then I'm going to have a room field. And this
[02:38] room field will have a reference to the room document we want this message associated with. So I'm gonna write room dot by ID, and then we're gonna paste the ID of the room. And running this query creates a new message that is
[02:58] associated to the specified room. So let's go ahead and create another message for this same room. And now we got 2 messages that
[03:18] are associated with this one room. Next, let's take a look at how we can query all the messages in a given room. For instance, we're gonna use this room. So we're gonna be running some multiline queries in the shell. So we can enter the editor mode by typing dot editor and pressing enter. And here you
[03:38] can see we have entered the editor mode, and you can run any query with control d or we can cancel out of the editor mode with the control c command. So here we're gonna write let room equals to room by id and then the id of the room and this will give us the reference to the room And then
[03:58] we're gonna write message dot where and then round brackets. And inside round brackets, we're gonna have dot room equals equals room, which is the reference to the room. And running it gives us all the messages associated to that room. And
[04:18] that's how you do one to many relationships in fauna.

https://app.egghead.io/api/v1/lessons/faunadb-explore-faunas-one-to-many-relationships-between-collections-in-the-terminal/transcript

https://app.egghead.io/api/v1/lessons/react-create-and-display-messages-using-fauna-within-a-room-in-next-js/subtitles

[00:00] We're going to go to the page component under room's ID, and here we're going to add in a new message form component and pass in the room ID as props. Now we haven't created this message form component yet, so let's go ahead and create that. So under
[00:19] source app, I'll create a new folder called components. And inside components, I'll create a new file called messageform.js. And here I'm going to create a new component. So I'm gonna write export default function, message form, and then room ID as our prop.
[00:39] And then I'm going to return a simple form. So in this form, we have a simple input field and a submit button. And next, we're gonna add a value in the input, and the value is gonna be a variable. And then we're gonna turn this component into a
[00:59] client component, and we're going to import user state from react. And then we create a state to hold our message variable. And we're going to add a on change event handler. This event handler is triggered whenever the user types into the input
[01:19] field, the function updates, the message state variable with the current value of the input field. And I'm just gonna break this input field into multiple lines so it's easier to read. And next, I'm going to add a on submit event handler to the form
[01:39] element. So on form submit, it will execute a function called create message. So we're gonna go ahead and start implementing this function. So first I'm gonna write e dot prevent default. This prevents the default form submission behavior, which would normally cause the page to
[01:59] reload. And then we're gonna import client and SQL from fauna. And let's initialize a new fauna client just like we did in the previous components. And then back in the create message function, we will do a fauna query to create a new message. So I'm
[02:19] going to write await client dot query and then round brackets inside round brackets SQL backticks. Inside the backticks, we write the SQL query. So I'm gonna write message dot create. And then we're gonna have a text field where we'll add the message
[02:38] variable. And then we have a room field that has a dynamic reference to the room. So we use the function room dot by ID, and then we pass in the current room ID. And this function call will get the reference to the room. And then we'll set the message to empty string again. Next,
[02:58] we're gonna go back to the page component. And here we're going to import the message form component. Okay. So now we're gonna go back to our application in the browser and let's go into a room. And we're gonna open the network tab in our developer tools.
[03:20] And we will try to create a new message. And in the network tab, we can see that we have successfully inserted a document into the Fauna database. Okay. So next, we want all the messages that are in this room to appear as a list. So somewhere here.
[03:39] So let's go ahead and add that. So back in our code, and we're here in our page component. And in this page component, we're already querying the room by its ID. And in this single query, we can also return all the messages in this room. So we're gonna capture the results of the query into a new
[03:59] variable. And then we're gonna write let messages is equals to message dot where, and then dot room is equals equals to the room reference. Now in SQL, we don't really need a return keyword. We can just write the object that we want to return, and it will just return the object. And in my return object, I want
[04:19] the name of the room as well as all the messages in that room. And finally, I will also console log the response.
[04:40] Now if we go back to the application in our browser, everything should work as before. Now notice we don't really see that console log here anywhere in the browser dev tools. However, in our terminal, we will see that console log. And notice that it is returning the name of the room as well as all the messages in the
[05:00] room. So why is the console log appearing in the terminal? Well, because this component is a server rendered component. So the database call is actually happening in the server side. Okay. Next, let's create a new component called message list component and then pass in all the
[05:20] messages as props. So in the components folder, I'm gonna create this message list component. And I'm going to write export default function message list, and I'm going to have messages as the props. And I'm going to return a simple
[05:39] div. And I'm going to loop over the messages and simply return the text for each message. And here it's actually going to be messages dot data dot map. And let's go back to the page component and import the message list component.
[05:59] So let's check everything. Let's test everything out. So I'm gonna create a new message. And I actually have to reload the page for it to show up. So let's create another one. And looks like it's working. However, it's not real time. So in the next
[06:19] video, we're gonna hook up streams and make them real time.

https://app.egghead.io/api/v1/lessons/react-create-and-display-messages-using-fauna-within-a-room-in-next-js/transcript

https://app.egghead.io/api/v1/lessons/next-js-stream-chat-messages-in-real-time-in-next-js-from-fauna/subtitles

[00:00] So back in our code, we're gonna go to our message list component, and we're going to turn this component into a client component. And we're just gonna write use client at the top. So back in our application, we're gonna navigate to a room and we're gonna get an error. And this error says that only plain objects
[00:20] can be passed to a client component. Now this is because the response that we get from our fauna database is a complex object. It has a lot of nested fields. So we just have to simplify that object and pass it to our client component. To fix this issue, we're gonna go back to our code. We're gonna go to the page
[00:40] component that is under rooms ID, And we're going to create a new messages array from the response that we get from fauna. Now using the map function here, I'm just going to pick the text and the ID for each message.
[01:04] And then we just plug the messages into the message list component. And in message list component, now we can remove the data. Now back in our browser, we're gonna refresh it, and everything should work again. So back in our message
[01:24] list component, we're going to import user state from React. Next, we create a state variable called all messages. And the initial state will be the messages. Next in our JSX, we update the messages
[01:44] to state variable all messages. Next, we're gonna go and import client and FQL from fauna. And we'll initialize a new fauna client. Next, we're
[02:04] gonna import useEffect and useRef from React. And then we create a new ref object called stream ref with an initial value of null. And then we're gonna create our useEffect. And inside we're gonna check if our font client is already initialized.
[02:25] And we will call a function called getMessage. So let's go ahead and implement this getMessage function. We're gonna add a try catch here. And then inside the try block, we're gonna write const stream await
[02:45] client dot stream, and then round bracket. And then inside round bracket, we're gonna write SQL, and then back ticks. And then inside back ticks, we're gonna write room dot by ID, and then we're gonna pass in the ID of the room. And let's just put this into the next
[03:04] line. And I'm going to assign this to a new variable called room. And next, we're gonna write message dot where and then dot room equals equals room and then dot to stream. And this will start to streaming the messages. We're streaming all the messages that belongs
[03:24] to this room. So whenever a message is added or gets deleted from this room, we're gonna get notification in real time. And then we're gonna write stream ref dot current is equals stream. And next, we're gonna wrap this entire logic into a if statement. And the if block executes when
[03:45] stream ref dot current is undefined. Now putting it inside this if block will prevent from subscribing to the same event twice. Okay. So next, we're gonna loop through the stream events.
[04:05] So I'm gonna write a for of loop here to each event from the stream, and we're gonna console log the event. And then we're gonna write a switch statement, and we're gonna switch on event type. And then
[04:25] we are going to look for the add case, and we'll also add a default case here. Whenever a new message is added to this room, the add case code block executes. So we're going to update the state of this
[04:45] component when a new message is added to this room. So we check if the message already exists in our state. If it doesn't, then we're just going to add the message.
[05:15] If it does, we will simply just return the previous state. So back in our app, we actually get this error that says params is not defined, and it's coming from message list components. So let's go ahead and fix this. Now as you can see, our message list component is
[05:35] not a page component, so it does not have access to the params prompts. So we're gonna go back to our room page component. And here, we actually have access to the params. So we're just gonna pass the ID of the room down the message list
[05:54] component as a props. Back in our message list component, we can destructure room ID from props, and then we can pass this into the SQL query. And that should fix all our issues, and
[06:14] now we should be able to create messages and view them in real time.

https://app.egghead.io/api/v1/lessons/next-js-stream-chat-messages-in-real-time-in-next-js-from-fauna/transcript

https://app.egghead.io/api/v1/lessons/next-js-understand-server-and-client-rendering-and-data-fetching/subtitles

[00:00] Back in our code, we're gonna go to the page JS file. So this file lives under source app. And we'll see that we defined use client for this entire component. That means this entire component is going to be rendered in client side. Now there's nothing wrong with this solution. However, we do miss out on some of the performance
[00:19] benefit that Next. Js provides through its server side rendering. In Next. Js, server components fetch data on server side. Now they can interact with databases, fetch necessary data, and generate HTML using JavaScript on the server. Now in the sequence diagram here, you can see how the server component works. Now doing this
[00:39] improves the application performance. We also deliver a significantly smaller bundle in the client side. Now back in our code, this page component would be much, much more performant if we prefetch all the data in the server side. Only the portion that is interactive should render in client side. So in the next lesson,
[00:59] we're going to refactor this component. We're gonna break it down into multiple client components, and we're gonna make this base component a server component.

https://app.egghead.io/api/v1/lessons/next-js-understand-server-and-client-rendering-and-data-fetching/transcript

https://app.egghead.io/api/v1/lessons/next-js-refactor-a-next-js-14-page-to-utilize-both-server-and-client-side-rendering/subtitles

[00:00] Here in our page component, we're going to scroll down. So the portion that renders existing rooms, we're gonna turn this into a new client component. I'm going to remove all the JSX. And then I'm going to replace this with the room list component.
[00:21] This component has a rooms prop, and we're going to prefetch the rooms data from database in the server side. Let's add the logic to query these rooms from server side. So we're gonna scroll up. And then I'm going to write const room
[00:40] response equals to await client dot query, round bracket, f QL backticks, and then room dot all. So it's pretty much the same query that was in our fetch rooms function. Since this is not inside a useEffect, this is going to be server
[01:00] rendered by default. We also have to remove the use client from the top. So this component becomes a server component and this function is missing async. So we'll add that as well. Next, we're gonna grab the rooms from the rooms response. So I'm going to check if rooms response dot
[01:20] data dot data exist. And if it exists, then we're just going to loop over this array. And for each room, we're going to return the room ID and the name of the room.
[01:44] And if room's response doesn't return anything, then we're simply just going to return an empty array. Under components, we'll create a new file called room list dot JS. And let's create the component. I'll write export default function room list. And we're going to return some JSX here.
[02:04] We're going to return a simple div. Inside the div, we have a header that says all rooms, and then we're going to loop over all the rooms. And for each room, we're just going to return a link to that room just like how we had it in the other component.
[02:34] And we'll also import the link from Next. Js here. Next, we'll pop open the terminal and make sure the application is running. Now if we go back to our browser and in our app, we'll see some errors. And this is perfectly fine because we're refactoring. Now this particular error is trying to tell us that we're trying to
[02:54] import user state in a component which is not a client component, and this is coming from source app page dot JS file. So we're gonna go ahead and fix this. Now back in our page component, we'll just remove the imports from React. And let's remove these user states that we don't need.
[03:15] And we're gonna remove the user ref as well. Now we also have this fetch rooms function and this useEffect here that we can also move to our room list component. So let's go ahead and do that. So I'm going to cut this code block and paste it back
[03:35] in our room list component. And let's turn room list component into a client component. And we're also going to import useEffect and useEffect from React.
[03:55] And then de structure the rooms props here that is passed from our page component. And then we're gonna create a state variable called existing rooms, and we will set the initial value of existing rooms to the rooms props. And then we're also going to
[04:15] create a stream ref variable using useRef. And then let's import client and FQL from fauna and initialize a new fauna client. Next, we're gonna go to our JSX and
[04:35] switch the rooms to existing rooms state variable. And then back in our fetch rooms function, we don't have to do the room dot all query because we're already going to prefetch all the rooms in the server side and pass it to this component. So we can simply get rid of this.
[04:58] So back in our browser, we're getting a different error now, and it's saying that we're trying to use client before it is initialized. So let's go ahead and take care of this problem. So we're gonna go back to our page component, and we're going to initialize the font client at the top of our function.
[05:20] Now going back to our browser, we see there's another error. And this time it's complaining about the room name state variable. So we don't have this state variable anymore. So we're gonna go back to our page component. And in the form, we're gonna navigate to the input and we're going to delete the
[05:40] value and on change handler from this input. Now we can submit this form server site. So I'm going to change on submit in the form element to action, and we don't need the prevent default here anymore. And we change the param name to form data, and we'll add the word use server. That way Next. Js will
[05:59] know that this is a server action. And then we're gonna write const room name equals to form data dot get room name. So this room name comes from our input element. So we're gonna give our input element a name, which is gonna be room name. And back in our browser here, and
[06:19] I think we forgot to import the room list component in our page component. So let's go ahead and fix that. So in the page component, we're just going to import the room list component. Now looks like we still have one more error. It can't find useRef in our room list component. And again, getting errors like
[06:39] this is fine, especially when we're refactoring. So we're gonna go back to our room list component and import useRef from React. Now if we go back to our browser, we will not get any errors. However, if we try to create a new room, we're gonna get this
[06:59] error. It can't find the fauna client in the server action. So let's go ahead and fix this. So we'll go back to our page component. We're gonna define the fauna client inside create new room function after the use server keyword. That way the
[07:19] server action will have access to it. Let's format the code a little bit. And now we should be able to create a new room.

https://app.egghead.io/api/v1/lessons/next-js-refactor-a-next-js-14-page-to-utilize-both-server-and-client-side-rendering/transcript

https://app.egghead.io/api/v1/lessons/faunadb-add-fauna-user-authentication-to-a-next-js-app/subtitles

[00:00] Next, we're gonna add authentication to our site. Now if you look at Fauna's documentation, they have pretty extensive guide on how to add authentication. They go over topics like attribute based access control or ABAC, RBAC, and also integrating with the 3rd party auth providers like Auth0, Cognito, but we're
[00:20] not gonna go too deep into it. For our application, we're gonna add a very simple auth system. In our code, under source app, we create a new folder called sign in. This is going to contain our sign in page. Inside sign in folder, we create a new file called page dot JS. This is going to contain our sign in page component.
[00:41] Now let's write the code for this new component. We're gonna call this component sign in page and we'll add a simple form with an input for email, input for password, and a submit button. And we're going to add a form action here, which we'll call a function called do sign in.
[01:02] And let's just create this do sign in function. Next, we're gonna create another folder under source app and we're gonna call it sign up. This is for our sign up page and we're gonna create a new file called page. Js inside sign up folder. Let's write the code for this component. We're gonna call it sign up page
[01:23] and we'll return a form that has email password and sign up button. We'll also add a username input in the form, and we have a form action that is referencing a function called do sign up. So let's go ahead and create this function.
[01:44] Now let's go ahead and update our database resources so we can start implementing these forms. We're gonna go to our schema folder and create a new file called auth.fsl. Here we're gonna write collection user to create a new user collection in
[02:04] fauna. Inside this squiggly bracket, we will define a unique constraint on the email field. This ensures that no 2 user document will have the same email. Next, we create an index by writing the keyword index followed by the name of the index. In
[02:24] this case, our name is by email. In fauna, index is an efficient way to query the database by a specific field or fields. We want to query the users by email. So we're gonna write terms and then in the square bracket, dot email. Next, we're gonna create some fauna functions. So in fauna, you have the ability to create functions that are
[02:44] embedded in your database. Under schema, we create a new file called functions dot fsl. Fauna functions have a similar syntax to a JavaScript function. So you start by writing the keyword function and then name of the function, in this case, user registration, and then round brackets.
[03:04] And inside the round bracket we're gonna add in the params, so in this case it's gonna be username, email, and password, and then we're gonna do squiggly braces, and we're gonna write let user equals to user dot create, round bracket, squiggly bracket, and then we're gonna
[03:24] put username and email. And then we're gonna write credentials dot create then round bracket and squiggly bracket. Credentials here is a built in fauna collection that is used to create JWT token for authentication. And inside the
[03:44] create, we're gonna have a document field. The value for it is going to be the user variable, and then we're gonna have the password field. Value for it going to be password. And finally, we assign a role to this function. So at the top of the function, we're gonna write at role server. This decorator basically tells Fauna
[04:04] that everything inside this function will have server level access. Next, let's create the login function. So similar idea, but this time, we're just gonna have email and password as per apps. Inside the function, we're going to query the user by
[04:23] user's email and assign it to user variable. Now just to note, we can use this by email function on user because we have created an index on our user collection that is called by email. Without that index, this query would not work.
[04:44] Next, we're gonna write credentials by document, and we're going to pass in the user variable. Now this query will get the credentials for the particular user, and we can add a bang sign here like TypeScript to check if the user exists. And then we're gonna write dot login and pass
[05:04] in the password. Again, credentials is a built in collection in Fauna, and these built in methods are provided to you. In the login function, you can explicitly pass in the expiration time for this token. I'm going to make it 1 hour.
[05:25] Next, we're going to create a new file called roles dot fsl. This is where we're gonna define permissions for authenticated and non authenticated users. We are first going to define the unauth role, And the unauth role only has privileges to call the user registration function,
[05:51] and it has access to call the user login function. And next we're gonna create the auth role. And the auth role will have more privileges. So we're gonna give read, create, write, and delete
[06:10] privilege to room collection. And we're gonna do the same for messages collection. And now I'm going to push all these database changes with fonta schema
[06:30] push command, and I'm going to accept all these changes. And our database is going to get updated. So in our dotenv file, we have this Fauna key. However, this key is a server key, so it has server level privileges. So we wanna replace this
[06:50] with a unauth role key. So that way an unauthenticated user will have unauth role level privileges. So in my terminal, I'm going to write Fauna shell to get inside the Fauna shell. And inside the Fauna shell, I'm going to write key dot create, and I'm going to define role as unauth role.
[07:13] And this will create a secret for the unauth role. So we'll just copy and paste it in our dotenv file. And that's about it. In the next video, we're going to hook up the sign in and sign out forms with Fauna queries.

https://app.egghead.io/api/v1/lessons/faunadb-add-fauna-user-authentication-to-a-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/faunadb-implement-signup-functionality-through-fauna-with-next-js-14-server-actions/subtitles

[00:00] Before we implement the form, we have to make one small change in the roles. So under auth role, we need to define which collection the identities are saved in. So I'm going to write membership user and user being the collection where the identities are saved. This tells fauna that when we authenticate using the user collection, an authenticated
[00:19] user gets this specific role. We're gonna run fauna schema push in our terminal and push these updated changes. Next, let's go to the sign up page and start implementing the form. We're gonna add
[00:39] name attribute to all our input elements. So the first one is going to be username, and then we have email, and then we got password. Next, we're gonna make the to sign up function a async function and rename the parameter to form
[00:59] data. And we're gonna grab our username, email, and password from the form. And we're gonna write use server to turn this function into a server function. Next, we're going to import client and SQL from fauna.
[01:19] And we will initialize a new fauna client inside the server function. Next, let's make a try catch block. Instead of the try, we're gonna make a fauna query. So we're going to write 0 8 client dot query and then fql
[01:39] backticks. And inside the backticks, we're gonna call our user registration function, and we're gonna pass in username, email, and password as argument. And on form submission, we're gonna redirect the user back to sign in page.
[01:59] So I'm going to write redirect slash sign in. And let's go ahead and import redirect from next navigation. So back in our browser, we're gonna go to the slash sign up route. And here, we're gonna try to sign up a new
[02:18] user. Now we're gonna get an error, but this error is coming from the sign in page itself because sign in page is not implemented yet. However, the user has been successfully signed up. So if you go check our database, under user collection, we'll see that a new user
[02:38] indeed got created.

https://app.egghead.io/api/v1/lessons/faunadb-implement-signup-functionality-through-fauna-with-next-js-14-server-actions/transcript

https://app.egghead.io/api/v1/lessons/faunadb-implement-fauna-signin-with-next-js-server-actions-and-useformstate-react-hook/subtitles

[00:00] We're gonna go back to our sign in page component. Here we have a do sign in function. Let's turn this into a proper server action. Let's go ahead and create a new file called action dotjs. And here in this file, we're going to create a new function called do sign in.
[00:24] We're going to get the email and the password from the form data. If either one doesn't exist, we will simply return a message. Next, we're gonna go back to the sign in page component and turn this into a client component. And then we're going to import
[00:44] use form state from React DOM. And then we're gonna import do sign in from actions. We can delete this
[01:03] other do sign in function. Next, we're gonna create a form state. We're gonna use the use form state hook. We're going to plug in our do sign in action and initial state. Let's go ahead and create this initial state.
[01:25] The initial state will have a message. And we'll write some JSX to display the message. Next, we're gonna add name attribute to all the input elements. We're gonna go back in the actions folder, and
[01:45] we're gonna import client and SQL from Fauna. And I'll initialize a new Fauna client. And then here, we're gonna do a try catch.
[02:11] And we are gonna make a new fauna query, and we're going to call the user login function with email and password. And I'm simply going to console log the response. Next, we're gonna import cookies from next headers.
[02:35] Then we're gonna save the token that we get in our response as a cookie. And finally, I'm
[02:55] going to redirect to the home page. I'm gonna import redirect from next navigation. Now let's go to the sign in
[03:14] page and try to log in. And notice we actually get an error. So let's investigate what's happening. So in the terminal, we can see that we received an error from fauna. It is expecting a document, but it received a set.
[03:34] And it's coming from the second line of user login function. So let's take a look. So on line 2, we have user by email query, which will return a set of documents. We're only interested in the first document, so we can just
[03:54] write dot first, and it will get the first document. Let's push these changes with phoneme schema push command and then rerun our application. Now if we test our app again, it should be working as expected.

https://app.egghead.io/api/v1/lessons/faunadb-implement-fauna-signin-with-next-js-server-actions-and-useformstate-react-hook/transcript

https://app.egghead.io/api/v1/lessons/next-js-implement-auth-guards-with-tokens-throughout-an-next-js-app/subtitles

[00:00] Let's go back to our actions dot JS file. Here, while setting the cookies, we're going to set an expiry date, and I'm going to make it 1 hour.
[00:26] Next, in our home page, we're going to check for valid cookies. So I'm going to import cookies for the next header. We're gonna grab the token from the cookies,
[00:49] And we're gonna check if the token exists. If there's no token, we're going to redirect to the sign in page. And let's go ahead and import redirect from next navigation.
[01:10] Next, we're gonna replace the fauna key with the token. Now this will give a user read and write access because the user is now authenticated. So we're gonna do the same thing in our rooms page.
[01:31] We'll import cookies from next headers, and then we'll try to retrieve the token from the cookies. We'll check if the token exists. If not, we'll redirect. And we'll replace the fauna
[01:50] secret token. Now we can also pass the token to the message form component. And we will replace the fauna key with this token in the message form component.
[02:11] Now we can do the same thing for message list component. We're just going to pass in the token. And in the message list, we'll use the token.
[02:32] Now let's go back to the home page component again, and here we can pass in this token to the room list component. And in the room list component, we can just use this token.
[02:56] Now back in the home page, we have a server action that is still using the fauna key. We can just use the token for this.

https://app.egghead.io/api/v1/lessons/next-js-implement-auth-guards-with-tokens-throughout-an-next-js-app/transcript

https://app.egghead.io/api/v1/lessons/faunadb-update-fauna-messages-collection-with-authors/subtitles

[00:00] Currently, when we create a message, it doesn't show us which user this message was sent from. So let's go ahead and fix that. So we're gonna go back to our roles dot FSL file. And here in the auth role, we're going to add privileges for user collection, and
[00:20] we're going to give read privileges to user collection. And we're going to push the changes with Fauna schema push command. So we're gonna navigate to our message form component. And in the
[00:39] create message query, we're going to write let user equals to query dot identity. This will give us the identity of the current user. And then we're gonna add a author for the message and set it to be the current user. We're
[00:59] also going to add the author name. Next, we're gonna go to the room page component. And here, we're gonna look for the messages response, and we're going to update this map function to have
[01:19] the author information. Next, we're gonna go to the message list component, and here we're gonna look for the JSX to render the messages.
[01:39] And we're gonna include the author name in the JSX. So now it's gonna render the author name. Alright. So let's give our application a quick
[01:59] test. So for these messages, the author information is not available, so that's why it's showing anonymous. Let's go ahead and create a new message, and you'll see that the author information is visible now.

https://app.egghead.io/api/v1/lessons/faunadb-update-fauna-messages-collection-with-authors/transcript

https://app.egghead.io/api/v1/lessons/next-js-challenge-implement-a-navbar-for-the-application-with-logout-functionality/subtitles

[00:00] So this is our final app. I have implemented a little bit of styling, and as you can see, I added a nav bar along with a logout button as well. A quick challenge would be to try to implement this by yourself. However, the solution is provided with the lesson notes. A quick hint here. To log out, you
[00:20] simply call the cookies delete function.

https://app.egghead.io/api/v1/lessons/next-js-challenge-implement-a-navbar-for-the-application-with-logout-functionality/transcript

Build a Real-time Next.js 14 Chat App with Fauna

Shadid Haque

Free Community Resource

You might also like these resources:

Full-Stack Serverless Apps with Next.js & Fauna

Fundamental Next.js API and Patterns

Migrate Next.js Application to App Router

Credits

Free Community Resource

Course Content

You might also like these resources:

Full-Stack Serverless Apps with Next.js & Fauna

Fundamental Next.js API and Patterns

Migrate Next.js Application to App Router