Next.js を使用しており、ブラウザーのAccept-Language
ヘッダーに基づいて、すべてのパス (ルートだけでなく) をロケールベースのパスにルーティングしたいと考えています。ただし、ユーザーが地域を設定した場合は、ユーザー設定を尊重するために最初に確認する必要がある Cookie を設定します。
そのため、Cookie を確認する必要があります。Cookie が存在しない場合は、代わりにブラウザの言語ヘッダーに基づいてリダイレクトしてみてください。ISG を使用しているため、サーバー側の next.config.js リダイレクトに限定されます。
ドキュメントによると、これは機能するはずですが、ISG を使用しているため、next.config.js
リダイレクト機能でこれを行う必要があります。
この解決策を試してみましたが、うまくいきません (Cookie とヘッダーの両方が一致するため、無限のリダイレクトが発生します)。
const { i18n } = require('./next-i18next.config');
const withTM = require('next-transpile-modules')(['fitty', 'react-svg']); // pass the modules you would like to see transpiled
const handleLocaleRedirects = (path) => {
const result = [];
i18n.locales.forEach((locale) => {
i18n.locales.forEach((loc) => {
if (loc !== locale) {
result.push({
source: `/${locale}${path}`,
has: [
{
type: 'header',
key: 'accept-language',
value: `^${loc}(.*)`,
},
],
permanent: false,
locale: false,
destination: `/${loc}${path}`,
});
result.push({
source: `/${locale}${path}`,
has: [
{
type: 'cookie',
key: 'NEXT_LOCALE',
value: loc,
},
],
permanent: true,
locale: false,
destination: `/${loc}${path}`,
});
}
});
});
return result;
};
module.exports = withTM({
i18n,
reactStrictMode: true,
images: {
domains: [
'dxjnh2froe2ec.cloudfront.net',
'starsona-stb-usea1.s3.amazonaws.com',
],
},
eslint: {
// Warning: Dangerously allow production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
async redirects() {
return [...handleLocaleRedirects('/:celebrityId')];
},
});