FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)
Exciting news for Next.js developers! The latest Canary Build introduces a brand new feature – the App Directory API Routes. This powerful tool allows you to create API routes directly within your Next.js app, opening up a world of possibilities for data fetching and manipulation.
With the App Directory API Routes, you can easily define custom API endpoints that are seamlessly integrated into your Next.js app. This means you no longer have to rely on external serverless functions or third-party services to handle your API requests – everything can now be handled within your Next.js app itself.
Not only does this simplify your development workflow, but it also improves performance by reducing the number of network requests needed to fetch data. With the App Directory API Routes, you can build faster, more efficient apps that deliver a seamless user experience.
To get started with the App Directory API Routes, simply update to the latest Canary Build of Next.js and start defining your custom API routes in the ‘pages/api’ directory of your project. You can then access these API endpoints from your frontend components using standard fetch requests.
This new feature opens up a world of possibilities for Next.js developers, allowing you to build more dynamic and interactive apps with ease. Stay tuned for more updates and tutorials on how to make the most of the App Directory API Routes in your own projects!
nice 👍
PHP vibes, I really like the server component concept 👌🏼
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 <3
new sub
req.body won't work in app/api folder. but it will work in page/api
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?
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);
}
“`