Sneak Peek! Introducing Next.js App Directory API Routes (Canary Build, Fresh Out of the Box!)

Posted by

FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)

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!

0 0 votes
Article Rating
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@sdsim1
7 months ago

nice 👍

@0xtz_
7 months ago

PHP vibes, I really like the server component concept 👌🏼

@eliyya7374
7 months ago

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

@zhiwu3121
7 months ago

req.body won't work in app/api folder. but it will work in page/api

@anton9410
7 months ago

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?

@DanStroot
7 months ago

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);
}
“`