NextJS 13：如何将数据从中间件传递到组件？

Question

在带有 app 文件夹的 NextJS 13 中，我需要根据 url（来自例如 /en/asdf/或 的语言/de/asdf/）获取数据并将其传递给组件。
我尝试使用中间件，使用 cookie 似乎工作得相对较好，但有一个大问题 - cookie 仅在下一次重新加载后在组件中可用，而不是立即可用。
有什么方法可以将数据从中间件传递到组件吗？
或者其他什么，比如一些全局变量？

我的中间件的简码：

import { NextResponse } from 'next/server'

export const middleware = (req) => {
    const pathname = req.nextUrl.pathname
    const language = pathname.split('/')[1]
    const allowedLanguages = ['en', 'de'];

    if(allowedLanguages.includes(language)) {
        const response = NextResponse.rewrite(new URL(pathname.replace(`/${language}`, ''), req.url))
        
        // This works only after browser reload
        response.cookies.set('language', language)

        return response
    }
}

export const config = {
    matcher: ['/((?!assets|api|_next/static|favicon.ico).*)'],
}

谢谢

Answer 1

就像 @Yilmaz 提到的你可以创建一个 api 路由 /api/dict/language/route.js

import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function GET() {
  const cookieStore = cookies();

  const token = cookieStore.get("language")?.value;
  if (!token) {
    return NextResponse.json(
      {
        message: "Unauthorized",
      },
      {
        status: 401,
      }
    );
  }
  return NextResponse.json(token, {
    status: 200,
  });
}

然后获取数据

const { data } = await axios.get("/api/dict/language");