No Comments Yet
Be the first to share your thoughts and start the conversation.
Home Layout
Loading...
Loading...
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
Complete source code available till this point of lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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
In this lesson, we focus on creating the homepage UI for a Next.js application. We replace the initial welcome message with dynamic content, including a section for user questions, a button to submit new questions, a search bar, and filters for browsing questions. The session involves structured component development to enhance user interaction on the homepage.
00:00:02 Let's focus on the homepage.
00:00:04 We finally get a chance to replace this welcome to the world of Next.js with the actual UI that we'll display on the homepage.
00:00:12 So I'll put my editor to the side right here, and we are ready to dive into page right within the root where we're console logging the session.
00:00:22 For the time being, I will remove this console log of the session as we don't need it, and I'm ready to start creating the UI of the future homepage.
00:00:29 I'll keep everything wrapped in a React fragment, but I will then create an additional section right here.
00:00:36 Within this section, I'll render an H1.
00:00:38 Yep, this one, but now I'll make it say all questions.
00:00:43 So we can show different questions that people have been asking on the platform.
00:00:46 Let's actually give it a text-dark100 and underscore light 900. And let's style the section as well by giving it a class name of w-fool flex flex-call-reverse.
00:01:02 And you might wonder why flex-call-reverse?
00:01:05 Well, this is because it'll allow us to display elements from bottom to top instead of from top to bottom.
00:01:11 And then on small devices, we can make it flex-row because we'll have enough space to show everything in a single row anyway.
00:01:19 We can also have a justify between, a gap of four, and on small devices, items-center.
00:01:26 Right below this H1, we can display a button, and this button will come from UI components, of course, And it can render a link coming from next link.
00:01:40 This link will have an href pointing to routes coming from constants dot ask underscore question.
00:01:49 So we can head over to constants routes and create a new route called ask underscore question, which will simply go to ask dash question.
00:02:00 This is going to be a form to create different questions.
00:02:05 Finally, within this link, let's render a piece of text that says ask a question.
00:02:10 There we go.
00:02:12 And let's style it a bit by giving this button a class name equal to primary dash gradient.
00:02:21 min dash h dash 46 pixels, padding x of 4, padding y of 3, and text dash light 900 with an exclamation mark at the start.
00:02:33 Also we can add as child because we are rendering the link as the button.
00:02:38 So actually the link will be the button.
00:02:41 Great.
00:02:42 Now we can create another section right below this section and give it a class name equal to margin top of 11. And within,
00:02:53 we can render a search bar.
00:02:55 So for now, I'll just say local search, and later on, we'll convert this into an actual local search component.
00:03:04 Below it, we'll have filters.
00:03:06 So we can say home filter right here, which will also become another component later on.
00:03:11 And finally, we want to map over different questions.
00:03:13 So let's create a div.
00:03:15 It's going to have a class name equal to margin top of 10, flex, w-full, flex-call, so they appear one below another, and a gap of 6. And within here,
00:03:29 we can show different question cards.
00:03:32 like question card one, and we can duplicate this like four times.
00:03:39 And believe it or not, this is the gist of the structure of the homepage.
00:03:43 It is going to look like this.
00:03:45 All questions titled right here, same as on other pages, we need to display the title of each one of these pages.
00:03:51 For the homepage, it is a place where you can find answers to all the most popular questions.
00:03:57 On the right side, we have a direct creative action that allows you to create a question, Below that, we have a local search.
00:04:07 So, let me take a chance to show that to you on the design since we have this beautiful design.
00:04:12 This right here is going to become a local search.
00:04:15 After that, we have the home filters which allows you to sort or filter by newest, recommended, frequent, and unanswered in case you want to be a good
00:04:25 soul and answer some of the people in trouble.
00:04:27 And after that, we have a list of different questions.
00:04:30 So now that we have created the basic structure of the homepage, what do you say that we start from top to bottom and implement all of these components?
00:04:40 Starting with the local search.
