Migrate UploadThing Route Handler to Next.js App Router
UploadThing makes it easy to migrate to the App router with a step by step guide. We'll move our upload functionality to the App router and finally delete our pages directory.
Instructor: [0:00] Our last route to move over is our UploadThing handler for uploading images to our UploadThing account.
[0:08] If we come back to our app, the way that we do this currently is we click Upload. Let's choose a file, and I have the Vercel triangle here. Let's just upload this. OK, it completed.
[0:22] We say OK, let's exit out here, and now our triangle appears over here. Now we need to move this API route over, so we can just come to UploadThing's documentation. Go to Docs, and we want to use the app router.
[0:35] First, we see we need to create our new API handler in our app router. It'll just be UploadThingCore.ts. We can come into api/new file/uploadthingcore.ts. Then this is going to be the file router that we have here in our server.
[1:01] We need to create our route handler, so let's just add our route file here. Then we need to get the information from here and upload it in our route file. We can change this to ./core. Then if we come into our utils, we see we have UploadThing here, so now we just need to import the file router from the app/api/uploadthingcore.
[1:33] We need to update our component, where we use this uploader to be a client component, ImageUpload. Now we should be able to come back to our Pages API. We don't have any more API routes. We can delete the API folder, and then our server no longer has anything here, so we can delete that as well.
[1:57] Now our pages directory doesn't have any routes or API handlers in it, so we can delete our pages router. Now we can update this import to just be next, and then we can remove the request and response and just give it the authOptions.
[2:13] One thing we didn't update was this import, so we need to update this import to be just the next route handler. We also need to change this to export our HTTP methods.
[2:29] One error you will probably run into is that it's still looking for the UploadThing route handler in the pages router. We deleted that and it no longer exists. We just need to restart our server, so we can run npm run dev, and come back to our application.
[2:47] If we click on this upload logo, we'll see now on our server it says UploadThing dev server is not running, and we can see we can upload a file. Now, if we choose a new file, let's choose this just base triangle and upload complete. Then we can exit out here, and it has already changed.
[3:11] In review, we moved our last API route handler from our pages router to our app router. This was our UploadThing route handler for uploading images. We had to change our route handler to account for the get and post HTTP methods, and then we were able to delete our pages router entirely.
[3:29] Now, our application is completely moved over to our app router.