Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Show Popular Tags
Loading...
Loading...
Complete source code for this lesson is available at
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 To implement the popular tags, let's head over to our actions, but not the question action, rather the tag.action.ts, and let's create a new server action
00:00:14 called getTopTags.
00:00:16 So export const getTopTags, which is equal to an asynchronous function.
00:00:24 This function will return a promise, which will be resolved in an action response, which will then contain a tag array.
00:00:33 So within it, just open up a try and catch block.
00:00:37 In the catch, return a handle error as error response.
00:00:41 And in the try, let's first await our dbconnect.
00:00:46 And once we connect to the database, let's get access to our most popular tags by saying await.
00:00:52 tag.find, and then sort them by the number of questions.
00:00:57 So questions minus one and limit it to five questions.
00:01:03 Once we get that, we can once again just return it in our usual format.
00:01:07 Success true, data is JSON parse, JSON stringify, tags.
00:01:12 As soon as you implement it, you can head back over to our right sidebar.
00:01:18 And right at the top where we're fetching the hot questions, we can actually duplicate it and we can fetch the get top tags.
00:01:27 Here we have a success, which we can rename to tag success.
00:01:33 The data can be renamed to tags and the error can be renamed to tag error, just so we can differentiate the two.
00:01:41 Now we can put that data to use by once again using a data renderer component.
00:01:47 So what I'll do is I will duplicate this data renderer, rather I will copy it.
00:01:53 and paste it right here after I uncomment this div below this h3.
00:01:59 I will remove everything that is within the render function, and let's first fix the props we're passing into it.
00:02:06 The data will be tags.
00:02:08 The empty state will say no tags found, and I'll say no tags have been created yet.
00:02:16 Success will be tag success, and error will be tag error.
00:02:22 And when we try to render it, we'll get access to the tags.
00:02:26 And then for the tags, we want to return this div that we have below from before.
00:02:32 So I'll simply paste it right here and rename popular tags to tags.
00:02:37 So let's check it out in the browser.
00:02:39 If you go back to the browser, you'll see a list of popular tags.
00:02:43 Right now we have a couple of tags that have two questions associated with them.
00:02:48 Node.js has one and TypeScript has zero.
00:02:51 To verify that this is true, we can also head over to the tags page and see that we have 22210, which matches with the display on the right.
00:03:00 And you can see here that it says that questions doesn't exist on a type tag.
00:03:04 So head over to global.d.ts and add a questions, which will be number, but we can make it as optional.
00:03:13 And now it no longer complains.
00:03:15 And with that, there it is, our right sidebar now with the live data that we can click on and visit different pages, such as different questions or different
00:03:26 tags and the questions associated with them.
00:03:28 So if you're feeling pretty good about our Next.js skills, you can click Next.js and go ahead and help some people.
00:03:34 So let's go ahead and commit this.
00:03:36 I'll say show top questions and tags.
00:03:40 Since we didn't commit changes for the previous lesson, I'll commit it and sync it.
00:03:45 And in the next lesson, I'll show you how we can further optimize our right sidebar.
