Next.js Discord

Discord Forum

Send data from middleware to server components

Unanswered
Youssef posted this in #help-forum
Open in Discord
I'm checking whether the current user is logged in inside middleware to protect some routes
I want if the user is logged in to send its data somehow to the page component instead of reduplicate the request

Any ideas?

36 Replies

New Guinea Singing Dog
You could attach it to an http only cookie then request the cookie before the page renders? I don't think theres anyway to directly pass it as like parameters to the component without it being put into the query/web address
New Guinea Singing Dog
Yeah i don't think itll be possible to use any sort of state, or restore it from a previous request because its a server component
House Finch
@Youssef .. whats the better way?
@House Finch <@844681311490277426> .. whats the better way?
I thought there was a better way but I don't know what it is
This is why I asked
House Finch
I have same problem, maybe we are both going crazy 🙂 seems like such a simple thing. I was able to at least hack the type for the NextRequest like this....

import { NextRequest as OriginalNextRequest, NextResponse } from "next/server";

declare global {
  interface NextRequest extends OriginalNextRequest {
    myState?: SomeObjectType;
  }
}

and then in my middleware.ts...
export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  req.myState = {some: 'state'}
  return res;
}

but the req.myState just seems to be undefined in my routes etc
New Guinea Singing Dog
Yeah it seems like headers/cookies attached to the request might be really the best way
just wondering, can you abuse react cache because it only stores data for the same render (so i was wondering if middleware is included in it) - i haven't tested or know if it is even allowed
New Guinea Singing Dog
Oh wow I've never really heard much about react caching, only through the next js framework. Is it like experimental? Didn't realize they would support something like that
its a little hacky... you can use it normaly as a dedupe method
yeah i wsan't that sure... goot to know tho
I think the cookies solution is not that bad
I'll go for it
wait i have an idea... can you try rewriting with a query param (and overide whatever the user sends)
ye
because rewrite changes the internal url but the client sees no change
ok I'll try it
^this looks like the cookie solution edit: it is kinda a mix of both ideas (header and rewrite)
House Finch
I don't think cookies, it's doing URL rewrites. TBH, seems like an awefull lot of mucking around for something that should be available in the framework. in Nuxt, I just extend H3EventContext and set my state onto the context, simple and works.
ahh yeah mb, i saw that they were using headers, but it seems like they also used rewrites (i got a little confused from my base looking at it)
I got an idea
can't we just cache the result of the fetch request as next does?
so even if we make the same request twice, it runs once
I'm not sure tho if next could cache fetches within middlewares like RCSs
wait, what do you want here? just to know if logged in and send that to server comp?
as i think rewrite with query param is the simplest solution still
@riský wait, what do you want here? just to know if logged in and send that to server comp?
I want to get user metadata
that also includes whether it's logged in or not
like if there is no user session then it is not logged in
ahhh this is why i like nextauth with its jtw now (everything is stored in single object and no weirdness)
hmm i think you could add the value in a query param via base64 json or header/cookie of it
as i don't think you are having that long of data
no I mean caching the request
ohh idk how caching will go... id assume it would, but 🤷
@riský ohh idk how caching will go... id assume it would, but 🤷
It doesn't cache xd
let's go back to rewrites 💀