Nextjs 14/Next.js 14更改项目结构以添加国际化后的favicon问题

4ngedf3f  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(393)

我在Next.js 14.0.2中遇到了一个关于favicon显示的问题。这个问题是在我添加了internalization并改变了我的项目结构之后出现的。简而言之,这是我的项目结构:

- app
  - [lang]
    - _components
    - _dictionaries
    - dictionaries.ts
    - layout.tsx
    - page.tsx
  - favicon.ico

middleware.ts

字符串
在我将所有的常规文件从app文件夹移动到**[lang]之后,我创建了一个中间件来将用户从/重定向到/en/ru**,这取决于他的语言环境:

import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

function getLocale(request: any): string {
    const headers = request.headers || {};
    const acceptLanguageHeader = headers['accept-language'] || 'ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7';
    const negotiator = new Negotiator({ headers: { 'accept-language': acceptLanguageHeader } });
    const languages = negotiator.languages();
    const locales = ['ru', 'en'];
    const defaultLocale = 'ru';

    return match(languages, locales, defaultLocale);
}

export function middleware(request: any) {
    const { pathname } = request.nextUrl;
    const locales = ['ru', 'en'];

    const pathnameHasLocale = locales.some(
        (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    );

    if (pathnameHasLocale) return;

    const locale = getLocale(request);
    request.nextUrl.pathname = `/${locale}${pathname}`;
    return Response.redirect(request.nextUrl);
}

export const config = {
    matcher: [
        '/((?!_next).*)',
    ],
};


所以现在我在网络标签中有两个favicon.ico GET请求,并且图标没有显示在浏览器的标签上。第一个返回302 Found(在 localhost:3000/favicon.ico),下一个返回404 Not Found(现在在不同的URL上,区域设置路径为 localhost:3000/en/favicon.ico)。有任何解决这个问题的想法吗?如果有必要,我会用必要的清单和澄清来补充这个问题。
代码:https://github.com/mondevyat/next1402/

snvhrwxg

snvhrwxg1#

你需要在中间件的匹配器中排除favicon。

matcher: [
"/((?!api|_next/static|_next/image|img/|favicon.ico).*)",
]

字符串
看这里:nextjsMatcherDoc

相关问题