After user logged in to the maim page of my web application by server-side navigation, every component on the page seems disrupted. But after refreshing the page it becomes normal. Here’s the login code:

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

export default async function logInAction(
  currentState: any,
  formData: FormData
): Promise<string> {
  const email = formData.get("email");
  const password = formData.get("password");
  const response = await fetch(new URL("/api/login", "http://localhost:3000"), {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ Email: email, Sifre: password }),
  });
  const json = await response.json();
  cookies().set("Authorization", json.token, {
    secure: true,
    httpOnly: true,
    expires: Date.now() + 24 * 60 * 60 * 1000 * 3, //3 days
    path: "/",
    sameSite: "strict",
  });
  if (response.ok) {
    redirect("/anasayfa");
  } else {
    return json.error;
  }
}

Before refreshing the page:

After refreshing the page: