Setting Up Next.js Blog Starter and Understanding Its Structure

[00:00 - 00:09] In the previous module, we covered the backend part of our course. We have a database that can store the comments and we learned a few bits about GraphQL and Hasura.

[00:10 - 00:19] We also mentioned that we are going to connect to Hasura via GraphQL to add and retrieve comments. And that's what we are going to focus on in this module.

[00:20 - 00:33] We will integrate with Hasura from moving in the front end application. In the following lessons, we will create a custom React hook that will have the logic responsible for sending post requests with GraphQL queries and mutations.

[00:34 - 00:43] However, we need a sample application that we can use to demonstrate the commenting system. We will go with a simple block as it perfectly fits the comments use case.

[00:44 - 00:58] We are going to use the next JS block starter as it is pretty simple and will let us get started very quickly. Next JS is a front end framework created on top of React, enabling server site rendering and creating static websites.

[00:59 - 01:06] For example, blocks. We introduced two new terms, so let's quickly see what they mean. Server site rendering.

[01:07 - 01:20] A typical React application renders its content on the client's site. In the browser, server site rendering means rendering web applications on the server and passing the HTML to the browser.

[01:21 - 01:28] A static website displays the same content for every user. It means that the content is fixed static.

[01:29 - 01:44] This course doesn't require knowledge about next JS, but if you want to learn more about the framework itself, you can check out the next JS documentation. To get started with the next JS sample block application, you have to visit the link that you see on the screen.

[01:45 - 01:52] You can also find it below in the description. In the next JS block starter repository, we can see setup instructions.

[01:53 - 01:58] Let's use the first command. Instead of block starter type script app, you can provide your own name.

[01:59 - 02:16] By using NPX, we don't have to install create next app package locally. The NPX stands for node package execute and it's installed along with npm out of the box if you're using npm versions 5.2.0 and above.

[02:17 - 02:35] It can execute any package from the npm registry without installing the package . So, after successful is setting up the block, we can run it with Yarnedef or npm runedef, depending on what you prefer to use.

[02:36 - 02:44] Let's quickly see the project structure. I won't go into very details of this project as we'll only use it as an example for the commenting system.

[02:45 - 02:59] In underscore post directory, we have example block posts written in markdown. Components directory has all different components used in the UI, for example alert avatar, footer and so on.

[03:00 - 03:10] The lib directory stores library level code, utility functions, command constants and so on. That might be a good place for our has to write integration code.

[03:11 - 03:30] In the pages directory, we have react components and each one is associated with a root corresponding to its file name. Pages / posts, we can see slack.txt file and the square brackets is a dynamic root notation in next.js.

[03:31 - 03:39] You can think about it as a template for posts. The underscore app and underscore document are next.js special pages.

[03:40 - 04:00] In underscore app, app component is used to initialize pages, we can control the page in initialization and for example add global CSS past state to pages handle errors. The document component is mostly used to control apps HTML and body.

[04:01 - 04:10] For example, we can insert custom tags to head, later title and description. The public directory stores public assets like images or favicons.

[04:11 - 04:26] Stairs has index.css file with styles used in the sample application. Then we have post CSS config and tailuit config, which stands for configuration for post CSS and for tailwind.

[04:27 - 04:34] Tailwind is a CSS framework exposing utility classes. We're going to explore it a bit when building the command section UI.

[04:35 - 04:54] Then we have TS config JSON, which has style script, compiler's configuration, and then we have package JSON and TR unlock containing information about the project and dependencies. Now that we have our sample application, we'll go straight to implementing the Hastera integration.

[04:55 - 04:56] See you in the next lesson.