Next Js Response Header redirection

Question

Objective: What I am trying to achieve: With a button click from a page the req will reach the controller. The controller will set some cookie, when the response will redirect the page to another page lets say about page

Call Directly API route from browser: With this code when I try to access the api route directly from browser it works as expected.

When I try to implement with a button click, it sets the cookies but it does not redirect to about page and gives me 307 Response.

My api is running in the same server in next js.

I can implement with with router, but I want to Implement it via response header redirect.What am Idoing wrong here. Thanks as always.

// home.tsx
'use client';
export default function Home() {
    const handleSet = () => {
        (async () => {
            await fetch('http://localhost:3000/api/test-path');
        })();
    };
    return (
        <main className="min-h-screen">
            <p>Home page</p>

            <button className="btn btn-primary" onClick={handleSet}>
                Set cookies
            </button>
        </main>
    );
}`


// route.ts   file

   `import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
    const response = NextResponse.redirect(new URL('/about', new URL(request.url).origin));

    response.cookies.set({
        name: 'theme',
        value: 'dark',
        expires: new Date(2023, new Date().getMonth(), new Date().getDate(), new Date().getHours() + 3, 0, 0),
        path: '/',
        secure: true,
        httpOnly: true,
        sameSite: 'strict'
    });
    return response;
}`

Answer 1

The event handler "handleSet" does use the fetch api to perform the request. The fetch api is independent from the browser, especially from browser's document.location. Because of that, there will be no "redirect" triggered within the browser. If this is desired, it has to be implemented manually.

For instance:

//[...]
await fetch(
  'http://localhost:3000/api/test-path', 
  {redirect:"manual"}
).then((response)=>{ 
  const redirectUri = response.headers.get("Location");
  //if there is a Location header, perform redirect ...
  redirectUri && document.location.href = redirectUri
});