当我在app目录下尝试使用next-intl时,我遇到了一个问题,默认的locale似乎无法识别。我之前也尝试过客户端版本,尽管每一步都严格按照文档进行,但也遇到了大量问题。
为了澄清,我使用Next.js v13.4.0和email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),我将德语和英语设置为区域设置,英语设置为默认值。在德语上运行正常,但我无法切换到英语。它抛出错误NEXT_NOT_FOUND,表明该区域设置不存在。
第一个月
/** @type {import('next').NextConfig} */
const withNextIntl = require('next-intl/plugin')(
// This is the default (also the `src` folder is supported out of the box)
'./i18n.ts'
);
const nextConfig = {
experimental: {
appDir: true,
}
}
module.exports = withNextIntl(nextConfig);
字符串middleware.ts
个
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
// A list of all locales that are supported
locales: ['en', 'de'],
defaultLocale: 'en',
});
export const config = {
matcher: ['/((?!api|_next|.*\\..*).*)']
};
型LangSwitch.tsx
区域设置应在此处更改。此组件是导航栏的一部分
import Link from 'next-intl/link';
export default function LangSwitch() {
return (
<div className='flex flex-col'>
LANG SWITCH
<Link href="/" locale="en" className='font-bold m-1'>
ENG
</Link>
<Link href="/" locale="de" className='font-bold m-1'>
DEU
</Link>
</div>
)
};
型
如前所述,导航栏工作正常,只是切换区域设置不起作用。我在客户端evrsion也遇到了同样的问题。我构建LangSwitch的方式与文档中所说的完全一样。所以目前我不知道什么是解决方案。
我试着改变next.js版本和next-intl版本。每次都出现类似的问题。我还删除了node_modules
和package-lock.json
,看看这是否有帮助。
1条答案
按热度按时间4xrmg8kj1#
当尝试使用next-intl/link恢复到默认语言环境时,next-intl似乎陷入了一个无限重定向循环。它似乎返回了一个重定向响应状态,没有地方可以重定向到。
我发现的一个临时解决方案是,通过编写中间件,然后在响应设置后添加Location头,给予它重定向到某个地方:
字符串
**编辑:**我尝试了最新的候选版本(3.0.0-rc.10),这个问题似乎已经得到解决。