I am using next js. My app incldues of two languages. I have separated particular files for particular language. translation works fine.

the static html that would be generated while building is crucial for search engine optimization .
and I am expecting translated content on built time consist of one language. and it would help if a user search that on google.

but I am getting this on built files inside .next/static/chunks/pages folder ``` children: (0, r.jsx)("h1", { children: n("banner_title") }), ``` expecting either this ``` children: (0, r.jsx)("h1", { children: "Knowledge hub for environment and social risk management" }), ``` or ``` children: (0, r.jsx)("h1", { children: "पर्यावरण र सामाजिक जोखिम व्यवस्थापनका लागि ज्ञान हब" }), ``` the problem if user google thisKnowledge hub for environment and social risk managementthe server does not have this content. I am using next js 14. i am writing and not using onlypages` directory .

import { useTranslation } from "next-i18next";
import PublicLayout from "@/components/layout/public";

const Index = () => {
    const { t } = useTranslation(["home"]);

    return (
        <PublicLayout>
            <div className="p-10 text-2xl font-bold">
                <h1>{t("banner_title")}</h1>
            </div>
        </PublicLayout>
    );
};

export default Index;

I feel like I am missing things. some insight and guidance will recommendation is highly appreciated.