Cloudflare Developers•9mo ago

```

const { env, cf, ctx } = getRequestContext();
Warning: The function cannot be called in code from components using the Pages router.

const { env, cf, ctx } = getRequestContext();
Warning: The function cannot be called in code from components using the Pages router.

is there any specific reason from this limitation? Can't really tell from looking in the codebase (meaning, why it wouldn't work on getServerSideProps or middleware)

30 Replies

Dario•9mo ago

that's simply because it imports server-only and I noticed that that never works in the Pages router so in order to have a nicer DX with the App router (which anyways is the recommended one) we chose to "sacrifice" the Pages router there PS: from my point of view it is quite baffling that server-only doesn't work with stuff like getServerSideProps... but it does not ASAIK.... please let me know if I've missed something and there's actually away to import server-only modules from there 🙂

juanferrerasOP•9mo ago

hey Dario! thanks so much for the response. yeah I missed that on my initial message – I was making server-only resolve to null already. It does seem simply updating to 1.10.0 it does work as expected on pages router PS: agreed and you're correct - the whole server-only thing works due to the bundler importing differently on app router, so I don't think there's an easy way to fix. Not sure there's any flags Next.js is exposing, probably not given incremental migration from pages=>app is possible

reimertz•7mo ago

@Dario I spent quite some time trying to figure out why I could not access the cf context in getServerSideProps and eventually landed after quite some time. Is this limitation documented somewhere except from in this conversation?

Dario•7mo ago

😓 sorry about that.... I am not sure if it's documented.... I'll have a look 🤔 by the way, in getServerSideProps you should be able to use process.env 🙂

reimertz•7mo ago

and it being defined in as process.env.cf.country? I am looking to be able to redirect users based on if they are in US or not, so I was hoping to use the cf.country property to render different pages depending on where the user is located. And sorry @Dario for the tone in my initial message - it is all good and thanks for all the hard work.

Dario•7mo ago

no don't worry I totally get how frustrating this sort of stuff can be, but the feedback is always appreciated 🙏 yes! 🙂 no! sorry...... 😬 process.env is only for env... cf is accessible only in getRequestContext....

reimertz•7mo ago

and getRequestContext is only working in app router, right?

Dario•7mo ago

can you set up a middleware?

reimertz•7mo ago

I think I should be able to do that yes, we're using next-on-pages and deploying to cloudflare

Dario•7mo ago

yeah.... I mean, only in server side code (it uses server-only) and Next.js doesn't seem to recognize getServerSideProps as server-only code! 😓

reimertz•7mo ago

but we're using pages router for everything right now so not sure

Dario•7mo ago

I see....

reimertz•7mo ago

I am thinking about implementing a simple app/page.tsx that does the re-routing to pages/us.tsx or rest of world (thanks for being this responsive, truly helpful!)

Dario•7mo ago

no hopefully would wouldn't have to do that 😓 I think you could just use a middleware.... let me give it a quick try.... alternatively we can expose cf in process.env.... I would really really prefer not to but that's still a possibility to support use cases such as yours

reimertz•7mo ago

yeah, I don't know all internals of your cloudflare and the risks involved with exposing cf.. so can't speak on the risks, but having cf accessable in getServerSideProps would open up for a lot of functionality for people still stuck with the Pages Router. I think this PR had a good idea but again, not sure about the risks involved: https://github.com/cloudflare/next-on-pages/pull/658 Thanks @Dario for pointing me in the middleware direction. I got this to work locally, but will test it deploying it for preview.

//middleware.ts

import { getRequestContext } from '@cloudflare/next-on-pages'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const context = getRequestContext()
  const country = context.cf.country

  if (country == 'US') return NextResponse.redirect(new URL('/us', request.url))
  else return NextResponse.redirect(new URL('/rest', request.url))
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/',
}

//middleware.ts

import { getRequestContext } from '@cloudflare/next-on-pages'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const context = getRequestContext()
  const country = context.cf.country

  if (country == 'US') return NextResponse.redirect(new URL('/us', request.url))
  else return NextResponse.redirect(new URL('/rest', request.url))
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/',
}

Dario•7mo ago

yeah sorry for the delayed response I was implementing a quick app for that and yeah it does look like you should be able to use the middleware no problem 🙂

reimertz•7mo ago

I was thinking; could this be a simple way to inject cf to all requests using the middleware? and then let the original path handle the request

Dario•7mo ago

yeah... 🤔 ok one sec and I can share something...

reimertz•7mo ago

I am realizing this approach doesn't enforce the routing since a user could just go to /us

Dario•7mo ago

you could make your middleware match all the top level routes and always perform the check/redirect no?

Dario•7mo ago

anyways, a sort of generic good-enough solution could be something like this: https://github.com/dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example what do you think?

GitHub

GitHub - dario-piotrowicz/next-on-pages-pages-router-use-cf-object-...

Contribute to dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example development by creating an account on GitHub.

Dario•7mo ago

this utility given a cookies string returns the cf object set there: https://github.com/dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example

GitHub

GitHub - dario-piotrowicz/next-on-pages-pages-router-use-cf-object-...

Contribute to dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example development by creating an account on GitHub.

Dario•7mo ago

the middleware sets the cookie: https://github.com/dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example/blob/main/middleware.ts

GitHub

next-on-pages-pages-router-use-cf-object-example/middleware.ts at m...

Contribute to dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example development by creating an account on GitHub.

Dario•7mo ago

and the utility can be used anywhere across the app: https://github.com/dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example/blob/27066d48eb080309db23c34753e61f7221d87b27/pages/index.tsx#L15

GitHub

next-on-pages-pages-router-use-cf-object-example/pages/index.tsx at...

Contribute to dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example development by creating an account on GitHub.

reimertz•7mo ago

wow, you really created a whole project to help me, truly appreciated! one question; could it be problematic exposing the cf parameters in a cookie, exposed to users?

Dario•7mo ago

no I don't think so.... but yeah better safe than sorry, we can just use headers instead of cookies 🙂

Dario•7mo ago

I've updated the example to use headers: https://github.com/dario-piotrowicz/next-on-pages-pages-router-use-cf-object-example/commit/65c768067f4a56075159e6f02c806d0bb0e3b39b 🙂

GitHub

update example to use headers · dario-piotrowicz/next-on-pages-page...

Dario•7mo ago

yeah using a cookie was not the best idea, simply the first thing that came to my mind 😅 (PS: of course mine is just an example and the code there could be made more robust and validation could be in place, but it's just to convey the idea that you can get the cf object somewhat not too painfully in your Pages router app 🙂 )

reimertz•7mo ago

Thanks so much - you really helped me unlock this and deliver somehting on a very short deadline. Truly appreciated ❤️

Dario•7mo ago

no problem, I'm happy I managed to help out 🙂 we can always discuss adding built-in support for this later too, but as I said I would prefer not to, and if a workaround like this is not too painful I'd likely keep things as they are 🤔 (especially since the Pages router is not the recommended one)

Gaming

Programming

```