Building a News Site - Category Page

[00:00 - 00:05] In the previous lesson, you've created the on page. In this lesson, you're going to create the category page.

[00:06 - 00:16] For the category page, you'd want to render the same components you have on the on page, but with category specific articles. So let's start by creating a new category page.

[00:17 - 00:32] You want to create a folder called category inside the app folder, and then add a folder called name with a wrapping bracket surrounded. Then create a page.tsx file inside.

[00:33 - 00:39] The name part of the file name is a dynamic segment. We can access this segment through the page component pops.

[00:40 - 00:46] So we'll start by doing two things. The first is fetching articles, and the second is rendering the category name.

[00:47 - 01:05] Import the category type from the article file, and import the fetch headlines function. Now create the category page component, const category page equal an async function that receives params with a name inside, as we've said earlier.

[01:06 - 01:14] We can type it as well, so params is an object that receives a name which is a category. And then you want to do the two things we said.

[01:15 - 01:37] The first is fetching the articles with the category name, and then log it to the console. And the second is returning the name to the page.

[01:38 - 01:46] Now you want to export default the category page. Now navigate to the application, make sure your server is running, and there is no way over there.

[01:47 - 01:55] And go to category/sports, for example. We can now see that the name of the category is being rendered on the page.

[01:56 - 02:03] We can also see the sports articles being rendered on the site. NCAA articles and the others.

[02:04 - 02:13] Let's add an active style to the adding navigation items. So to know which page is active, we can access the URL path name, which is this part of the URL.

[02:14 - 02:21] Next.js provide us with a specific hook for that. Go to components/categories.tsx.

[02:22 - 02:30] And import the use path name hook. Update the container div under navigation menu link, this one.

[02:31 - 02:43] Add a condition to the navigation item. You want to pass a cn function.

[02:44 - 02:47] And add a condition to it. We haven't done it before, so take a look.

[02:48 - 02:58] We say the class name that you want to apply. And we want to apply it only if the condition is true.

[02:59 - 03:10] And let's import the use path name hook. And ask for the path name.

[03:11 - 03:22] Great. Now the cn function will only apply the text orange 700 class name if the condition is true.

[03:23 - 03:26] Now let's check that out. We are on the sports page.

[03:27 - 03:31] And we can see the sports item is being active. We navigate to the science page.

[03:32 - 03:39] We can see the science page being active as well. The next step is to make a reusable component out of the current news page.

[03:40 - 03:53] Right now the page simply renders multiple components, making it impossible to use them on a different page. If you go to apps/page.tsx, we can see that.

[03:54 - 03:56] You can import this part. And this is what we want.

[03:57 - 04:09] We want to render this for every category page. So create a new component called news page and move the page.js6 content into it.

[04:10 - 04:22] We can simply copy and paste and change the function signature to be export. Const, news page, equal a function.

[04:23 - 04:34] We can remove the article fetching and ask for it in the props. Great.

[04:35 - 04:50] You can remove the news API import for now. Now go back to page.js6 and simply render the news page.

[04:51 - 04:58] Don't forget to paste the articles into it. And we can remove the console log and the unnecessary imports.

[04:59 - 05:07] We'll navigate to the browser and see that everything is working. Perfect.

[05:08 - 05:19] This part is now being rendered by the news page component. Now we can render the same news page on the category page, navigate to the category page.

[05:20 - 05:35] And instead of rendering the name, simply call the news page component and paste the articles into it. Go back to the browser.

[05:36 - 05:45] And let's try go to different category pages. Perfect.

[05:46 - 06:06] The last step would be to add skeletons to the page since we now have a loading state. We'll use shadcn/ui Skeleton components, so install it first.

[06:07 - 06:23] Re-run the application server and go to the top headline component where you should import the skeleton component you've just installed. Now create a new top headline skeleton component.

[06:24 - 06:36] Don't forget to export it. And it will return the same layout as the top headline component, but with skeletons instead of the actual component.

[06:37 - 06:52] So for the image we're going to render a skeleton with a class name of 90 width and h-72. For the text items we're going to render three different skeletons.

[06:53 - 07:06] The first one we'll receive a class name with width 90 as well and height of 16 . And for the smaller text the height will be 4.

[07:07 - 07:26] Now do the same for article details. For the skeleton component and create a new article details skeleton component.

[07:27 - 07:40] Space the skeleton that I've pre-created and you can see on the courses text. Now let's do the same for the latest article component.

[07:41 - 07:51] We don't need to import the skeleton because we're going to use the article details skeleton. So you can simply copy and paste the latest articles component and then the skeleton name to it.

[07:52 - 08:01] We can move the articles and we simply going to render three article details skeleton instances. Perfect.

[08:02 - 08:12] Now the article preview skeleton. Which equals the function.

[08:13 - 08:26] So it turns the component and we can simply jsx. So we also going to have a class name flex and gap four.

[08:27 - 08:42] And then we're going to need the skeleton with a class name of height 56 and width of 36 REM. This will emulate the image.

[08:43 - 08:57] And then we're going to render a width full div with article details skeleton inside of it. Now let's combine all these components inside the new space components.

[08:58 - 09:06] Start with the imports. Go to the news page and import the article preview skeleton.

[09:07 - 09:18] The latest article skeleton and the top headline skeleton. Now create a new component called news page skeleton.

[09:19 - 09:27] It doesn't need to receive props as well. And we can again render the same layout.

[09:28 - 09:33] But just replace the content of the layout. So the top headline skeleton comes first.

[09:34 - 09:43] And then we can copy and paste the bottom section layout. We can render latest article skeleton.

[09:44 - 09:58] Or we can render the more stories with article preview skeleton or rendered three types. To show this loading state, we can use the next js loading page feature.

[09:59 - 10:10] So go to app and add a new file called loading.t6. And create a new loading function inside of it.

[10:11 - 10:25] So import the news page skeleton and create the const loading. Returns the news page skeleton and export default the loading component.

[10:26 - 10:29] Now let's go back to the app. Make sure that the server is running.

[10:30 - 10:39] And try to navigate between the different pages. You can see pretty briefly the loading state.

[10:40 - 10:50] But if you try to do it with a slow internet, you'd see I've moved to my browser. And then I'm going to the network tab on the dev tools.

[10:51 - 10:58] And I'm throttling the page to be with a slow internet. And I'm navigating between the category page.

[10:59 - 11:13] And you can see the loading skeletons pretty well right now. In the next lesson, we're going to make the article interactive.

[11:14 - 11:18] So once you click on it, the drawer will be opened on the sign and display the article