在 Next.js 多语言应用程序中，我设置了
metadataBasealternates#canonical./export const metadata = {
metadataBase: new URL(process.env.NEXT_PUBLIC_APP_BASE_URL),
alternates: {
canonical: "./"
}
}
我也想生成元数据
alternates#languages从文档中，我发现
alternates: {
canonical: './',
languages: {
'en': '/en',
'fr': '/fr',
},
},
但它会产生以下输出： 例如：
默认语言：
https://acme.com/salarieshttps://acme.com/en/https://acme.com/fr/请注意，替代语言中缺少当前路径名。
我想要实现的是向路径名添加区域设置前缀
./例如： 默认语言：
https://acme.com/salarieshttps://acme.com/en/salarieshttps://acme.com/fr/salaries在Next.js 14中，您可以使用App Router中的generateMetadata函数动态生成元数据。
// layout.js or page.js (inside your app directory)
import { headers } from 'next/headers'; // for getting request info like pathname
import { resolveBaseUrl } from 'next/metadata'; // Utility for resolving base URLs
export async function generateMetadata({ params }) {
// Get the base URL dynamically (if needed)
const baseUrl = resolveBaseUrl(process.env.NEXT_PUBLIC_APP_BASE_URL);
// Extract the current pathname from the request headers
const pathname = headers().get('x-invoke-pathname') || '/'; // Default to '/' if missing
// Define your languages
const languages = ['en', 'fr']; // You can extend this list for other locales
// Generate language-specific alternate URLs
const alternateLanguages = languages.reduce((acc, lang) => {
acc[lang] = `/${lang}${pathname}`; // Append current path to each language
return acc;
}, {});
// Return dynamic metadata object
return {
metadataBase: new URL(baseUrl),
alternates: {
canonical: `${baseUrl}${pathname}`, // Canonical URL
languages: alternateLanguages, // Alternate URLs for each language
},
};
}
export default function RootLayout({ children }) {
return (
<html>
<head />
<body>{children}</body>
</html>
);
}