AIM:
1. creating a website with dynamic metadata titles depending on the endpoint of the url
2. redirect users that click on the link to the main page without the main page's metadata interfering the dynamic path's metadata

ISSUE: Its showing the redirected page's metadata instead of the dynamic path's metadata, i guess its something to do with the redirect

// app/[endpoint]/page.tsx
import { wait } from "@/utils/globalFunction";
import { redirect } from "next/navigation";

type Props = {
    params: { endpoint: string };
    searchParams: { [key: string]: string | string[] | undefined };
};

const Component = async () => {
    await wait(5000);
    redirect("/");
};

export const generateMetadata = (props: Props) => {
    return {
        title: props.params.endpoint
    };
};

export default Component;

// for fetch testing
// app/fetch/page.tsx
"use client";

const FetchPage = async () => {
    const response = await fetch("http://localhost:3000/test");
    const resText = response.text();

    return <div>{resText}</div>;
};

export default FetchPage;