NextJS 13 API Routes: Better Than Expected!
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- In this video, we'll take a look at NextJS 13 API Routes, and how they're better than I originally expected! NextJS 13 is a major update to NextJS 12, and it introduces some great new features like easier-to-write API routes.
We'll take a look at some example routes and see how easy it is to create your own. After watching this video, you'll be able to use NextJS 13 API routes to create your own new API endpoints.
My GitHub: github.com/jos...
Wishing you lots of fun building your own cool stuff with the new route handlers!
Hi Josh! Just wanted to drop by and say that your latest video was amazing! You have a real talent for explaining things in a clear and concise manner, which is not an easy feat. Keep up the great work and I'm excited to see more of your content in the future!
Appreciate ya man
Thanks for the side by side comparison, easily the best explanation I've seen :)
Thanks this is some of the most up to date info on doing API routes and requests using the new app router in Next. Would love a video about passing cookies and headers along to emulate a browser session so you can log into another website and take some actions that would normally require a use to log in
Oh my goodness that's what I was looking for !
We need to make a call josh
For sure, hit me up on discord
First of all ur contents are amazing brother, keep it up! I am just having trouble to get session object inside api routes, as returns null:( Do u know solution of it ?
I’m fan of the old fashioned way to be honest.
Is it just me or are beta docs impossible to view in light theme?
I've tried changing it in settings but it doesn't seem to work.
We need full stack projects 🤍
If only you knew what I'm recording over the next days
Yes bro we really need it. Please make full stack blog app.
عراقيييييي ❤❤😅🎉
@@blazi_0 اييي 😂
Hi Josh, thanks for this. Do you have any idea why this is not in NextJS's official documentation? The examples on their doc page still use the old pages/api and will keep returning 404. The least we can do as a tech service provider is to update our docs and stop misleading the poor users. NextJS failed on this, and thanks for the video.
i came back to NextJS after a long time and was struggling to why is it not working and nothing can be found related to this in the documentation aswell.
Luckly I've discovered your channel a couple of days ago, and now i see how many useful things you post. Thank you.
Great one bro. Please how do I basically upgrade from using handler to using http methods directly from next13? Simply how do I upgrade to the latest version?
Thank you so much!
you literally answered all of my questions about the new app router api.
I had one question about the server components
for example in a login page, which is a server component:
I have to to create a separate LoginForm component, use "use strict" at the top of the file and import it.
it's kinda annoying because now even a core functionality of that login page has to be a separate client component as it needs to use useState.
I could move that component to the login page, but since I have to use "use client" at the top of the file, I cant.
so I am in a situation where any server component with some basic functionality needs to be extracted into a separated client component. I don't want to bloat my components folder for every server component page.
any idea how can I define simple client components inside a server component file?
Why I am not able to make relative api call without localhost in the url?
Chances are you're trying to make that request from the server side
@@joshtriedcoding Yes I have to do that. because I am using drizzle ORM through route handlers. cuz only then it fetches the static response from the db. I don't know how to make db call in RSC and make that page static
New route handler is somewhat obscured in the documentation. Great job parsing it.
this video is amazing, I finally figured out how to use the api!!
contentlayer build seems not working with Next Js 13.2 or more
I'm curious to see how your page.tsx looks like where you defined the button
LISTEN! 🤡
Worst first-impression ever 😂🤣😂🤣
Thank you Josh! Your videos are amazing!
Cheers man
Enjoyed this video. Looking at the differences really helped as I'm getting back into Next after a few years away. I too was skeptical because the old way mirrored Express.js, which I like a lot.
yeah
really? I came to see just how to get the damn query from request which is the first thing and you injected me with later use ones
Hi josh how to POST a request that body have a file type?
Hello Josh thanks for the video, i have just one question if we use the Edge runtime can we deploy our app on a diffenet cloud hoster from Vercel like Amazong for example ? Sorry for this dummy question i am new to Edge Thank you
how can i send a raw html string in the body, so that it is read as html and not encapsulated inside a "pre" tag?
What about the slugs and parameters/search parameters? Wish you had it covered in the video.
Great video
The docs don't explain this
I spent a week to transfer my pages router to the app router, and guess what, it is sooo much slower. Often new was ment to be better and faster. Nextjs, app router is better, but so much slower
running into the error Error: occurred prerendering page "/api/subway/nearest-station". when attempting to access the get request from from the api route. Any idea why this might be happening?
I still can't understand why you think this is "cleaner", I do like the structure of the requests for more clarity, but all the new syntax seems to be writing a bit more additional characters for what we would already be writing previously.
app/api cant use req.body so it force api request to send json data only, that bad side
Thank you for such an amazing video, this was very helpful.
how we can customize the status code?
how come you can call the api using a relative path "/api/user"? When i tried it, i got "unable to parse URL"; I had to use the absolute path
Is it a good idea to learn Nextjs from old tutorial which was made in 2021 and it's NextJs 11....how much different is NextJs 14 from nextjs 11
Hello bro I am facing an issue where res data is displayed correctly in the console and Postman, but when I make a request, it shows 'id' as undefined in both the console and Postman. My folder structure is app api than user in user [id] route.js
Really nice and informative video, thanks
Way too late, but thank you for your work. It was simple, not too fast, clear and most important, very useful.
thank you very much for this
I like how short and useful this video is!
thankyou
I kind of hate how they do these huge changes and all the rest help on the internet becomes obsolete.. Like I have no idea how to set up cors for this now, having res as NextResponse and using res.headers.set to set the headers does not seem to work
how cookie set new api route ?
It really changed a lot lmao, was trying to make it from memory and nothing was working hahahahah 1min in I got it right
i also tried coding hoho
The app directory is just a complete ripoff of sveltekit
You saved me, 13 is confusing. I was about to cry.
this is running on Edge
but its not possible set the cookies in our api version? you only showed how to get() not how to set().
i only watched 2 mins and i saw my solution. you are awesome
Thank you! the directory really confuse me
Thanks Josh! 😀
Great video!
thank you
Thank you soo much man! Was having problems with what you pointed out on 5:51 ... Thanks for clearing things up!
Hi, Thanks for your Tutorial, How can I use API Routes database to one to one and one to many ?
ure goat
I tried to upload file , i thought it its standard web api to use formData ,
but i think the api route handlers parse data or change it :
import { Directus } from '@directus/sdk';
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
const formData = await request.formData();
const file = formData.get('file');
formData.append('folder', '887b5198-6b28-4289-8117-87deb4df5e71');
formData.append('file', file as File);
console.log("form data", formData);
const token: string = process.env.DIRECTUS_JOB_TOKEN!;
const url: string = process.env.DIRECTUS_URL!;
const directus = new Directus(url);
await directus.auth.static(token);
const fileResponse = await directus.files.createOne(formData);
return NextResponse.json({ "message": "File Uploaded" });
}
the Axios error :
[AxiosError: Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream]
even if i tried this on client side it works fine :
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
const form = new FormData(event.currentTarget);
console.log(form)
// this using api route handler
// const response = await fetch('/api/job', {
// method: 'POST',
// body: form,
// })
// console.log(response)
const directus = new Directus('example.com/');
await directus.auth.static('secretkeys');
form.append('folder', '887b5198-6b28-4289-8117-87deb4df5e71');
const file = form.get('file');
if (file instanceof Blob) {
form.append('file', file);
} else {
throw new Error('Invalid file data');
}
const fileRes = directus.files.createOne(form)
.then(async (Response) => {
return await Response?.data.id;
})
.catch(error => {
console.error(error);
});
console.log(fileRes)
};
why is that ? is api route handlers parsing or changing the formData ?
Thanks you
Thanks for the video I haven’t used apis in version 13 yet but found it frustrating in the past as adding middleware seemed so complicated and I would end up adding dependencies to make it work more like express so I currently am just using express. Would love it if they just let us add middleware in the handler options somehow
Yeah. Another option besides just switching frameworks altogether was to develop custom middleware, for example only allowing specified request methods
thunder client extension for vs code is a great way to make/test api requests
Josh I was wondering if You try to make to make a simple api for file upload in the new app directory
bcs when I tried to use "formidable" library for parsing the upcoming data it shows me a weird error
I did that in the image-to-alt open source project here: github.com/joschan21/image-alt-generator, we're uploading the images via a signed url directly to AWS S3
Hi Josh ! You can't imagine how this video saved me, really thanks you are the best and got a new subscriber.
How do i make a nextjs backend autoscale on AWS ?
guys, do the old way of making API routes works? i am trying to get the preview mode with sanity and the documentation seems broken since that next13 release
the old ones work the same way, you can still do all the regular api stuff in the pages directory for incremental adoption
Got any videos that talk abt how slow next js is in compile time and how to remedy it?
Wäre cool wenn du mal T3 Stack zeigen und erklären würdest
Thanks for doing this--this information is so hard to find/infer in the official docs. Is there a link to the github for this project?
Thank you for this tutorial. I just started learning next js apis. I worked on express js and before this video I was looking into old version of next js routing and it was not working. Thanks you again. Love from India!
Informative videos. Keep making them.
I'm from Brazil! Thank you man!
als aller erstes möchte ich dir sagen, dass mir deine Videos sehr gefallen und ich sie gerne schaue.
Ist also kein hate! Aber 2:30 ist so geil :D
you found out late
Thanks brother!! Explaining concept by comparing with next 12 is the best way to learn I guess.
Cheers man! Felt the same way
Thank you for your effort!
awesome bro
Another "upgrade" that is a thousand times worse than how things were done in NExtjs12. You have to put in a lot more boilerplate code and I still don't know how to return and get responses. Your way is erroneous.
Please install the icons extension, this tutorial was confusing as hell