./public 文件夹在使用本地化的项目中无法访问

Question

我目前正在开发一个使用 Prismic 将内容上传到网站的项目。 我遇到了这样的问题：成功实现本地化后，我的 ./public 文件夹无法访问。

我的 NextJS 项目版本为 14.0.3，正在使用应用程序路由器。 我在 [lang] 文件夹中添加了主 page.tsx 和 layout.tsx 文件，该文件夹本质上是从定义的 Prismic 区域设置（例如“http://localhost:3000/en-gb/*”）创建子路由。

当我实现此操作时，运行“next dev”脚本后我无法访问我的公共文件夹。 当它为页面工作时的文件夹结构是“./src/app/page.tsx”，现在它不工作了，它位于“./src/app/[lang]/page.tsx”并使用处理不同语言环境的中间件。

我认为中间件目前是导致此问题的原因。

// middleware.tsx
import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/prismicio';

export async function middleware(request: NextRequest) {
    const client = createClient();
    const repository = await client.getRepository();

    const locales = repository.languages.map((lang) => lang.id);
    const defaultLocale = locales[0];

    // Check if there is any supported locale in the pathname
    const { pathname } = request.nextUrl;

    const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
    );

    // Redirect to default locale if there is no supported locale prefix
    if (pathnameIsMissingLocale) {
        return NextResponse.rewrite(
            new URL(`/${defaultLocale}${pathname}`, request.url)
        );
    }
}

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

 // example of an import I am currently using

 /* preceding code... */
 const grayArrowDown = '/images/GrayArrowDown.png';
 /* proceding code... */

如果您需要进一步说明，请告诉我。

尝试过： 从./public文件夹调用静态资源

预计： 统计资产/图像在页面上呈现没有问题。

实际： ./public 文件夹未加载。 例如，/images 文件夹在运行时不会显示在“源”中。

Answer 1

我通过像这样更新匹配器找到了解决方案

export const config = {
  matcher: "/((?!api|static|.*\\..*|_next).*)",
};