Name: Create an Optional Catch-All API Route in Next.js
Uploaded: 2022-03-18T17:19:33-05:00
Description: We're going to learn how to create an API route that can read 0 or many 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 0 or many dynamic segments from a URL.

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

Instructor: [0:00] Let's create a folder called optional-catch-all. Now, let's create a file that starts with angle bracket then it is followed by three dots then its dynamic parameter is going to be called slugs. We close the angle brackets, and this is a JavaScript file.

[0:24] The next thing that we have to do is to create a function called handler(). This function will receive a request object and a response object. We're going to export that handler function as a default export.

[0:43] The last thing that we want to do is to grab the slugs from the request.query and we're going to return that as a JSON.

[0:56] Now, let's make a request to the /api/ optional-catch-all endpoint. We see that we get back at 200 and an empty object. This is because we didn't pass anything after the optional catch-all route.

[1:13] Let's call the same endpoint with A, B and C. We see that we get back the slugs and an array with A, B and C.

[1:24] To recap, in order to create an optional catch-all route, what we have to do is that we have to create a file that starts with our angle bracket, then it is followed by three dots. Then we name the dynamic segment, and we close with double angle bracket again. After doing that, we can grab the dynamic segment from the request.query object.

[1:47] Also, if we don't pass anything to the catch-all route, we get back an empty object. If we pass any number of URL params to the catch-all route, we get back those params back as an array of strings.

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

Share this video with your friends

Course

Effectively Build RESTful APIs using Next.js API Routes