Next.js Discord

Discord Forum

Route Handler not working..

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Suppose to be im making an route handler where i delete a cookie this is current route.

import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export const POST =
  async (
    request: Request
  ) => {
    const requestUrl =
      new URL(
        request.url
      );
    if (
      requestUrl
    ) {
      cookies().delete(
        "tokens"
      );

      const origin =
        requestUrl.origin;

      return NextResponse.redirect(
        `${origin}`
      );
    }
  };



I expect to route to 
origin
when I navigate to 
auth/logout
and at the same time delete the specified cookie however its returning me an error page which i did not create.

any help for this one ?
Answered by Jboncz
'use client';

import { Button } from "@/components/ui/button";
import { Login, Logout } from "./action";

export default function Page() {
    const login = async () => {
        return await Login();
    }

    const logout = async () => {
        return await Logout();
    }
    return (
        <>
            <Button onClick={() => login()}>Login</Button>
            <Button onClick={() => logout()}>Logout</Button>
        </>
    );
}


'use server';

import { cookies } from "next/headers";
import { redirect } from "next/navigation";


export async function Login() {
    try {
        cookies().set('Auth-Cookie','abc123')
        return true;
    }
    catch (err) {
        console.log(err)
        return false
    }
}

export async function Logout() {
    try {
        cookies().delete('Auth-Cookie');   
    }
    catch (err) {
        console.log(err)
        return false;
    }
    redirect('/home');
}
View full answer

11 Replies

Jboncz
Ill help you out in just a sec, are you adamant that you want to use a route handler and not just a server action?
@Cape lion
Jboncz
'use client';

import { Button } from "@/components/ui/button";
import { Login, Logout } from "./action";

export default function Page() {
    const login = async () => {
        return await Login();
    }

    const logout = async () => {
        return await Logout();
    }
    return (
        <>
            <Button onClick={() => login()}>Login</Button>
            <Button onClick={() => logout()}>Logout</Button>
        </>
    );
}


'use server';

import { cookies } from "next/headers";
import { redirect } from "next/navigation";


export async function Login() {
    try {
        cookies().set('Auth-Cookie','abc123')
        return true;
    }
    catch (err) {
        console.log(err)
        return false
    }
}

export async function Logout() {
    try {
        cookies().delete('Auth-Cookie');   
    }
    catch (err) {
        console.log(err)
        return false;
    }
    redirect('/home');
}
Answer
riský
I recommend the server action path, but you should be able to just use the request url and nothing much else:

[return NextResponse.redirect(new URL('/', request.url))](https://nextjs.org/docs/app/api-reference/functions/next-response#redirect)
@Cape lion i really prefer a route handler
riský
yeah its the better solution (i just wanted to meantion a "fix" for the meantioned issue)
Cape lionOP
so this means request url paths are outdate and server action is the thing now ?
riský
They are different
Good for different things
If it's just an API req for your nextjs app, then server actions are usually better (as return type is typed and you just import function instead of having to worry about fetch and remembering it's pathname)