From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Display messages - Next.js Tutorial
From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Display messages
So in the last video we created this messages component and we put it in the messages the messages page and we fetch the data in our use effect and now we have the data in our messages state so now we want to display that. So what I'm going to do is go to the theme files and go to the messages dot HTML file and then under the nav there's this section it's really not a lot so we'll just grab that and then let's go to the messages component and we'll put that right in here and then we're just going to change all the classes to class name so I'll do command shift L class name and if I save it now we should see something like this so basically we want to show one of these cards for every message that we have. Now, in the messages component, we'll keep the outline stuff, the section div. But this div, the card, we want that to be a separate message component. And that starts right here inside of the space Y4. So this div that has the class of BG white and the relative, that ends right…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Message model and form state12m 59s
-
(Locked)
Message submit and API route14m 22s
-
(Locked)
Require auth for contact form3m 53s
-
(Locked)
Fetch messages10m 30s
-
(Locked)
Display messages11m 15s
-
(Locked)
Mark as read15m 19s
-
(Locked)
Delete messages8m 38s
-
(Locked)
Order new first3m 25s
-
(Locked)
New message count display11m 5s
-
(Locked)
Global context for unread messages11m 6s
-
(Locked)
-