Dynamic api route files in app router

[zinc remnant]

Hi @last vortex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, you're on the right track. In Next.js, you can create dynamic API routes by adding brackets [] in the file name. In your case, you can create a file named [...oembed].ts under the app/api/oembed/ directory. This file will handle requests to any route that matches the pattern /api/oembed/*.

Here's a basic example of how you can structure your API route handler based on the information provided:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { oembed } = req.query
  const [platform, url] = oembed

  const oEmbedProviders: { [key: string]: string } = {
    youtube: `<https://www.youtube.com/oembed?url=${url}&format=json`,>
    tiktok: `<https://www.tiktok.com/oembed?url=${url}`,>
    // Add other platforms and their oEmbed endpoints as needed
  };

  const response = await fetch(oEmbedProviders[platform])
  const data = await response.json()

  res.status(200).json(data)
}

In this example, the oembed query parameter is an array that contains the dynamic segments of the URL. The first element is the platform (e.g., 'youtube', 'tiktok'), and the second element is the URL to fetch the oEmbed content from.

Then, you can call this API route from your client-side code like this:

const response = await fetch(`/api/oembed/${platform}/${encodeURIComponent(url)}`);

Please note that this is a basic example and you might need to add error handling and other necessary checks based on your use case.

For more information, you can refer to the Next.js documentation on Dynamic API Routes (https://nextjs.org/docs/pages/building-your-application/routing/api-routes#dynamic-api-routes) and Catch all API routes (https://nextjs.org/docs/pages/building-your-application/routing/api-routes#dynamic-api-routes).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@last vortex kapa.ai is still learning and improving, please let us know how it did by reacting below

[last vortex]

@zinc remnant ahh I thought just because we are using app router, we always need to have route.ts files in order to use app router HTTP methods?

[zinc remnant]

Let me check the knowledge base for you. One moment! :books:

---

Yes, you're correct. In the context of the new App Router introduced in Next.js 13, you would use route.ts files instead of the traditional API routes in the pages/api directory. The route.ts files allow you to define Route Handlers, which are custom request handlers for a given route.

Here's how you can structure your Route Handler for the oEmbed API:

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const { oembed } = request.nextUrl.query
  const [platform, url] = oembed

  const oEmbedProviders: { [key: string]: string } = {
    youtube: `<https://www.youtube.com/oembed?url=${url}&format=json`,>
    tiktok: `<https://www.tiktok.com/oembed?url=${url}`,>
    // Add other platforms and their oEmbed endpoints as needed
  };

  const response = await fetch(oEmbedProviders[platform])
  const data = await response.json()

  return NextResponse.json(data)
}

In this example, the GET function is the Route Handler for GET requests. It uses the NextRequest and NextResponse APIs provided by Next.js to handle the request and send the response.

You can call this Route Handler from your client-side code like this:

const response = await fetch(`/api/oembed/${platform}/${encodeURIComponent(url)}`);

For more information, you can refer to the Next.js documentation on Route Handlers (https://nextjs.org/docs/app/building-your-application/routing/route-handlers) and HTTP Methods in route.js (https://nextjs.org/docs/app/api-reference/file-conventions/route).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@last vortex kapa.ai is still learning and improving, please let us know how it did by reacting below

[last vortex]

@zinc remnant What I didn't understand is what the file name extension should be in this case?: app/api/oembed/[...oembed].ts

[zinc remnant]

Let me check the knowledge base for you. One moment! :books:

---

In the context of the new App Router introduced in Next.js 13, the file extension for route handlers should be .route.ts or .route.js. So, for your case, the file should be named [...oembed].route.ts and it should be located in the app/api/oembed/ directory.

Here's the full path to the file: app/api/oembed/[...oembed].route.ts

This file will handle requests to any route that matches the pattern /api/oembed/*.

For more information, you can refer to the Next.js documentation on Route Handlers (https://nextjs.org/docs/app/building-your-application/routing/route-handlers) and File Conventions (https://nextjs.org/docs/app/building-your-application/routing#file-conventions).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: