Tour the Next.js Project Code

Ryan Chenkie: [0:00] Let's go ahead and have a closer look at the code for this Next.js project. In the same way that Gatsby is going to generate individual pages for us, if we put one here in the pages directory, we get the same thing with Gatsby.

[0:13] When we put a component like dashboard in the pages directory, Next is going to automatically create a route for this component.

[0:21] Because Next does server-side rendering, and kind of straddles this line between server-side and client-side, we have the option of interacting with the server-side right here within our dashboard component. The same goes for any components that we would have in our pages directory.

[0:36] We'll see the implications of that as we go throughout this module. The biggest difference in our project now is that we've got all of our API endpoints existing in this API directory.

[0:46] Next, we'll look through the API directory and turn anything that we've got in here into an API route. The really cool thing about this is that these individual API routes can be deployed as serverless functions.

[0:58] For example, this authenticate.js file, this is all of the code that we had in our authenticate endpoints in the Express API, but now it's running in this Next API endpoint. We're interacting with it through something called next-connect and we use a handler that comes from that.

[1:15] We've got the same kind of methods that we've seen in our Express API where we can say we want to get a POST request for a certain endpoint or a GET request. The work within the body here is pretty much the same as we've seen before.

[1:27] One big difference now is that we've changed up what is happening with our database. We're still using our Mongo database but we're no longer using Mongoose. That's because, at the time of this recording, there were some issues with Mongoose operating within serverless functions that were causing a bunch of problems during development.

[1:45] What we've done instead is we've pulled in the Mongo client directly. We can get a sense of it here in this middleware directory. We've got this middleware called database. This middleware is going to use the Mongo client, which comes MongoDB, and it's going to wire up a database connection through this client that we're then going to pass along on a middleware.

[2:04] This middleware can be used in any of the API endpoints that we need. For example, if we go back to authenticate, right up at the top here, we're saying that we want to use the database middleware. Doing so is going to make the database available on request.db.

[2:21] We're using environment variables in the database client here. We are passing process.env.atlas URL. We've typically seen that in our .env file before, in our server. We've got the same thing down here. We've got.env.local, which is pointing to that Atlas URL.

[2:37] We've also got another kind of environment variable now. If we go into next.config.js, we're exposing this client-side environment variable called Next API URL, and that's pointing to localhost:3000/api. This is the URL and path that our API will be available at.

[2:55] When users go to authenticate, it looks a little bit different than what we've seen before. If we take a look at authenticate.js again, we're no longer sending the JSON Web Token for the user back in the payload. Instead, we're going to set it on a cookie. This is probably one of the most straightforward ways of working with authentication information in a Next project.

[3:16] Because Next.js deals with server-side rendering and static site generation, the lines between what is the client and where is the server are blurred. This means that it becomes difficult to work with things like local storage, because local storage is on the window object and that doesn't exist in a Node environment.

[3:34] There are some other differences throughout the code base here. I invite you to explore it. If you're totally new to Next.js, perhaps have a look at some of the getting started material that is offered. Once you are comfortable, come back and we'll dive in further.

[3:47] Since our application is not currently enforcing any kind of authorization to get all of this data and to see these pages, let's start working on that next.