NextJS 13: How to pass data from middleware to components?

Question

in NextJS 13 with app folder, I need to get data based on url (language from e.g. /en/asdf/ or /de/asdf/) and pass it to components.
I tried using middleware and it seemed to work relatively well using cookies, but there is one big problem - the cookie is only available in the components after the next reload, not immediately.
Is there any way to pass data from middleware to components?
Or something else, like some Global variables?

Shortcode of my middleware:

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).*)'],
}

Thanks

you make a request to an api route, and middleware sits between, it takes your request, you can apply some logic to request if request passes, it will hit the api route, and isnide api route you send response to the client — Yilmaz, Dec 11 '22 at 00:27
@Yilmaz Thank you, but I'm not sure what you mean. Could you please give a specific example? — pak, Dec 11 '22 at 12:08

score 0 · Answer 1 · edited Jul 11 '23 at 07:12

Like @Yilmaz mentioned You can make an api route /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,
  });
}

and then fetch the data

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

NextJS 13: How to pass data from middleware to components?

1 Answers1