У меня проблемы с динамическим языком HTML (SSR) в маршрутизаторе приложений Next JS 16. ⇐ Javascript

[Anonymous]

У меня возникли проблемы с решением этой проблемы, поэтому я использую маршрутизатор приложений Next.js 16. Я хочу создать многоязычный веб-сайт, в основном на английском и индонезийском языках, и моя проблема возникает, когда я хочу создать динамические теги языка HTML в рендеринге на стороне сервера. Вот мои файлы и структура кода.
src/app/layout.tsx

Код: Выделить всё

import "./globals.css";

interface RootLayoutProps {
children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
return (

{children}

);
}

src/app/page.tsx

Код: Выделить всё

import { getEntryPage } from "@/lib/api";
import { RenderTemplate } from "@/lib/renderTemplate";
import { Metadata } from "next";

export const metadata: Metadata = {
title: "Beranda - Website Saya",
robots: "noindex, nofollow",
description:
"Selamat datang di Website Saya. Ini adalah halaman beranda bahasa Indonesia.",
openGraph: {
title: "Beranda - Website Saya",
description:
"Selamat datang di Website Saya. Ini adalah halaman beranda bahasa Indonesia.",
url: "https://example.com/id",
siteName: "Website Saya",
images: [
{
url: "https://example.com/images/og-image-id.png",
width: 1200,
height: 630,
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Beranda - Website Saya",
description:
"Selamat datang di Website Saya. Ini adalah halaman beranda bahasa Indonesia.",
images: ["https://example.com/images/og-image-id.png"],
},
alternates: {
canonical: "http://localhost:3000/",
},
};

export default async function PageHomeIndonesia() {
const data = await getEntryPage({ site: "default", order: 1 });
return (



);
}

src/app/(pages)/en

Код: Выделить всё

import { getEntryPage } from "@/lib/api";
import { RenderTemplate } from "@/lib/renderTemplate";

export default async function PageHomeEnglish() {
const data = await getEntryPage({ site: "english", order: 1 });

return (



);
}

Возникает вопрос, почему я не использую [locale] в этом проекте. Это потому, что я использую [...slug] для отображения других динамических страниц, поэтому, когда я пытаюсь объединить «app/[locale]/[... slug]», моя структура URL становится «localhost:3000/en» и «localhost:3000/id», тогда как я не хочу, чтобы «id» использовал «id».
src/app/(pages)/[...slug]/page.tsx

Код: Выделить всё

import { getEntryPage } from "@/lib/api";
import { RenderTemplate } from "@/lib/renderTemplate";

interface PageProps {
params: {
slug: string;
};
}

const page = async ({ params }: PageProps) => {
const { slug } = await params;
const cleanSlug = Array.isArray(slug) ? slug[slug.length - 1] : slug;

const data = await getEntryPage({ slug: cleanSlug });

return (



);
};

export default page;

Я ожидаю, что я хочу поместить язык HTML в page.js, точно так же, как я заполняю метаданные, потому что данные языка HTML фактически поступают из API в этой строке const data = await getEntryPage({ site: "default", order: 1 });

Подробнее здесь: https://stackoverflow.com/questions/798 ... 16-app-rou