Everything goes back to the server eventually, lol. That being said, doing renders at the component level (instead of the whole page) is very powerful and unlocks a lot of cool things.
Despues de mucha investigacion, este video fue el que nesesitaba para por fin entender como funcionaban las api routes en el nuevo directorio app. thanks you so much
Right, the request body is a readable stream; which you can use, but isn't super helpful: developer.mozilla.org/en-US/docs/Web/API/Request The methods `.json()`, `.formData()`, or `.text()` (there are some others) are the helpful "awaitable" methods that return the parsed data for you.
Amazing content, I was wondering if I have models and API made in C#, this NEXTjs API Routes approach should not be used, correct? This would only be beneficial if you set up your models and schemas locally and use this talk to your database?
Yes, that's correct. If you have another service setup that is your API, Models, and connects to the database then your frontend application (Next.js or not) can connect directly to that API. This is most useful when you have a Next.js app first and foremost and want to expose an API for another consumer (mobile app, perhaps). If you already have an API that can do that, you don't need these routes. Note that sometimes you might want to do something specific to your frontend app that you don't really need a full API for (perhaps a feedback widget that makes a Slack hook call, or a analytics integration). In that case you can build a quick API handler in Next.js and not pollute your main API service. Up to you!
Ethan - on the post side I am having a challenge actually reading JSON from a post'ed body. I've tried the old ways of destructuring the request.body and I am getting a type error because request.body is a readable stream? What? Do you have a full working post example that gets data from the body? Ideally I'd love it if this worked: ```js export async function POST(request: NextRequest) { const { name, author } = request.body const result = await prisma.book.create({ data: { id: uuidv4(), name: name, author: author, }, }); return NextResponse.json(result); } ```
Hello! To read the request body, you need to `await request.json()`. Make sure you're sending the data as JSON as well or else the Next.js parsing won't be able to read it. Here's a full endpoint: gist.github.com/ethanmick/ba361e93d1233ad9214af2b7228fb950
![Fresher's Frontend Interview 🎉 | JavaScript | #reactjs (Mock) [Most Asked Questions -2023]](http://i.ytimg.com/vi/oDNmGfAIpQY/mqdefault.jpg)
PHP vibes, I really like the server component concept 👌🏼
Everything goes back to the server eventually, lol. That being said, doing renders at the component level (instead of the whole page) is very powerful and unlocks a lot of cool things.
Despues de mucha investigacion, este video fue el que nesesitaba para por fin entender como funcionaban las api routes en el nuevo directorio app. thanks you so much
¡Gracias!
req.body won't work in app/api folder. but it will work in page/api
Right, the request body is a readable stream; which you can use, but isn't super helpful: developer.mozilla.org/en-US/docs/Web/API/Request
The methods `.json()`, `.formData()`, or `.text()` (there are some others) are the helpful "awaitable" methods that return the parsed data for you.
Amazing content, I was wondering if I have models and API made in C#, this NEXTjs API Routes approach should not be used, correct? This would only be beneficial if you set up your models and schemas locally and use this talk to your database?
Yes, that's correct. If you have another service setup that is your API, Models, and connects to the database then your frontend application (Next.js or not) can connect directly to that API.
This is most useful when you have a Next.js app first and foremost and want to expose an API for another consumer (mobile app, perhaps). If you already have an API that can do that, you don't need these routes.
Note that sometimes you might want to do something specific to your frontend app that you don't really need a full API for (perhaps a feedback widget that makes a Slack hook call, or a analytics integration). In that case you can build a quick API handler in Next.js and not pollute your main API service. Up to you!
@@ethan_mick ohh thats a cool idea, I was not aware of combining different API's if you need something that's separate from your main API
nice 👍
🫡 Thanks!
Ethan - on the post side I am having a challenge actually reading JSON from a post'ed body. I've tried the old ways of destructuring the request.body and I am getting a type error because request.body is a readable stream? What? Do you have a full working post example that gets data from the body? Ideally I'd love it if this worked:
```js
export async function POST(request: NextRequest) {
const { name, author } = request.body
const result = await prisma.book.create({
data: {
id: uuidv4(),
name: name,
author: author,
},
});
return NextResponse.json(result);
}
```
Hello! To read the request body, you need to `await request.json()`. Make sure you're sending the data as JSON as well or else the Next.js parsing won't be able to read it. Here's a full endpoint: gist.github.com/ethanmick/ba361e93d1233ad9214af2b7228fb950
@@ethan_mick Brilliant! That works perfectly, thanks so much.