NextJS 13 API Routes: Better Than Expected!

Summary

This video script explores the new API route handlers introduced in Next.js 13.2, comparing them with the previous API routes. It delves into the syntax and paradigm shift, demonstrating how to access request body content, handle responses, and utilize improved cookie and header access in the new API handlers. The script also covers advanced features like redirecting requests and streaming responses, showcasing the streamlined and powerful capabilities of Next.js's latest update.

Takeaways

• 😀 Next.js 13.2 introduces new API route handlers, replacing the old API routes and offering a cleaner syntax and improved functionality.
• 🛠️ API route handlers are initialized in the 'app' directory and are only recommended for development, not production, at this stage.
• 📁 The new API route structure involves creating a folder for the API path and a file for each HTTP method, such as 'get' for GET requests and 'post' for POST requests.
• 🔄 There are syntactic and paradigm differences between the old and new API routes, with the new ones offering a more streamlined approach to handling requests.
• 📥 Accessing the request body in the new API routes has changed; instead of using `req.body`, you now use `await req.json()` to handle JSON payloads.
• 📊 The new API route handlers simplify sending responses, allowing for direct return of a new `Response` object with status, headers, and body.
• 🍪 Handling cookies and headers has been improved in the new API routes, providing a more intuitive and type-safe way to access and manipulate them.
• 🔄 Redirecting requests in the new API routes is straightforward, using the `redirect` function from `next/navigation` to easily direct clients to different URLs.
• 🚀 The new API routes support streaming responses, which can be beneficial for real-time data handling, such as chatbot interactions.
• 🔀 Switching between Node.js and Edge runtimes in the new API routes is possible, allowing developers to opt into the Edge runtime for closer proximity to end-users, albeit with some API limitations.
• 🎉 The presenter initially had reservations about the new API routes but found them to be enjoyable and efficient to work with after understanding their features and benefits.

Q & A

What is the main topic of the video?

The video discusses the new API route handlers introduced in Next.js 13.2, their differences from the old API routes, and how they work.

Why were the new API route handlers introduced in Next.js 13.2?

The new API route handlers were introduced to provide a cleaner syntax and improved functionality compared to the old API routes.

Where are the new API route handlers located in a Next.js project?

The new API route handlers are located in the 'app' directory of a Next.js project.

How do you initialize a new API route in Next.js 13.2?

You initialize a new API route by creating a folder in the 'api' directory within the 'app' folder, named after the API path, and then exporting functions for each HTTP method.

What is the difference in accessing the request body between the old and new API routes?

In the old API routes, you could access the body directly with 'req.body'. In the new API routes, you need to use 'req.json()' and await the conversion of the body from a ReadableStream to a JSON object.

How have the ways to send back responses changed in the new API routes?

In the new API routes, you return a new 'Response' class with the desired message and optionally status, headers, or status text. This is different from the old API routes where you used 'res.status' followed by 'res.json' or 'res.end'.

What is the improved way to access cookies in the new API routes?

In the new API routes, you can access cookies using 'req.cookies.get('cookieName')', which provides a cleaner syntax and better type safety compared to the old API routes.

How can you access headers in the new API routes?

You can access headers in the new API routes using 'req.headers.get('headerName')', which is a more straightforward and cleaner approach compared to the old API routes.

What is the new feature for redirecting requests in the new API routes?

The new API routes allow for easy redirection of requests using the 'redirect' function from 'next/navigation', which simplifies the process of sending clients to different URLs.

How has streaming responses been streamlined in the new API routes?

Streaming responses have been streamlined by allowing the creation of an iterator to stream function, which can be turned into a stream and sent back to the client, providing real-time data without waiting for the entire response.

Can you switch between different runtimes in the new API routes?

Yes, you can switch between 'node.js' and 'experimental-edge' runtimes in the new API routes by exporting a 'runtime' constant with the desired value.