Name: Create a Catch All Next.js API route
Uploaded: 2022-03-18T17:19:25-05:00
Description: We're going to learn how to create an API route that can read at least one or more dynamic segments from a URL.

Create a Static REST Endpoint in Next.js

Create a Dynamic Next.js API route 

Create a Catch All Next.js API route 

Create an Optional Catch-All API Route in Next.js

Handle Different HTTP Verbs in a Next.js API Route

Add a Middleware to a Next.js API Route

Create an API Route Using the next-connect Package

Add Middleware to an API Route Created with next-connect

Hide Sensitive Information from the Consumers of Next.js API

Effectively Build RESTful APIs using Next.js API Routes

We're going to learn how to create an API route that can read at least one or more dynamic segments from a URL.

https://app.egghead.io/api/v1/lessons/next-js-create-a-catch-all-next-js-api-route/subtitles

Instructor: [0:00] Let's start by creating a folder called catch-all/inside/pages/api. Let's create a file that its name starts with an angle bracket then it is followed by three dots. Then we're going to call it slugs. We close the angle bracket, and this is going to be a JavaScript file.

[0:22] The next thing that we're going to do is to create a function that is called handler(). It will receive a request, a response, and we are going to export it as the default export for this file. Let's grab those slugs from the request.query.

[0:48] Let's return a JSON to the client with these slugs that we just grabbed from the query. Let's try out this endpoint. Let's make an API request to api/catch-all/1. We'll see that we get back an array.

[1:07] The next thing that we're going to do is that we're going to add another parameter to a URL. For instance, let's start 2 here and as we can see, we get back slugs with  and  inside an array. It is worth noting that if we don't pass any URL param to the catch-all route, we're going to get back a 404.

[1:30] To recap, to create a catch-all route, we need to create a file that it starts with an angle bracket, and it is followed by three dots. Then we add the dynamic parameter name. We close the angle bracket, and this should be a JavaScript file. Then we can grab that dynamic parameter from the request.query, and that dynamic parameter will contain all the URL segments as an array of strings.

Create a Catch All Next.js API route

Share this video with your friends

Course

Effectively Build RESTful APIs using Next.js API Routes