Shortly Responsive

Community feedback

• 

  P

  markus•2,700

  @markuslewin

  Posted 4 months ago

  Next actually supports creating those types of request handlers in the same project as the rest of the app. They're called Route Handlers. It'd look something like this:

  // /src/app/api/shorten/route.ts
  export async function POST(request: Request) {
    const { url } = await request.json();
  
    // todo: fetch(cleanuri)
    console.log("Shorten", { url });
  
    return Response.json({
      success: true,
      shortUrl: "<shortUrl>",
      originalUrl: url,
    });
  }
  
  // In component: const response = await fetch("/api/shorten", ...)
  

  ---

  You could also use the newer Server Actions. They're essentially functions that get compiled to server endpoints:

  // /src/app/actions.ts
  "use server";
  
  export const shorten = async (url: string) => {
    // todo: fetch(cleanuri)
    console.log("Shorten", { url });
  
    return {
      success: true,
      shortUrl: "<shortUrl>",
      originalUrl: url,
    };
  };
  
  // In component: const result = await shorten(url);
  

  00

  Marked as helpful