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.
Fetch messages - Next.js Tutorial
From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Fetch messages
OK, so now we want to be able to fetch our messages. So we have this page slash messages. We haven't created it yet. So let's do that. I'm going to go to my app folder, create a folder called Messages. And then in Messages, we'll create a page.jsx file. And let's say rafce. And we'll call this Messages page. And then you should see that here if you go to slash messages. And this links to that. if you click the little bell icon. So we need an API route that will actually get our messages. So let's create that next. So I'm going to go to App, API, and then Messages, and then Route JS. We already have our post there to submit a message. Let's go right above that. And let's say this is going to be a get request to slash API slash messages. And we want to export a const get. And let's set that to async. And then I'm going to do try catch. And we want to connect to our database, so await connectdb. Then let's get the ID from the user session. So I'm just going to grab this. OK. As far as…
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)
-