Running functions / inject variables on edge

[Mecanik]

Hello,

I am pretty new to NextJS but not on Cloudflare Pages. Unfortunately, even though I (kind of) understand in general how you made NextJS work on Pages (by uploading a worker and using /functions), I cannot understand if it's possible to use /functions myself as well.

Why? Because I usually used /functions to inject variables into static pages and do other changes. In this example, from what I understand the pages are rendered using edge runtime. This makes it impossible for me to use my own functions, as I have tried to place /functions folder in several places along the project but it never gets picked up.

I need to inject variables into several pages, for example:

\src\app\auth\login\page.tsx

export default async function Login() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-6">
        <form className="mt-8 space-y-6">
          INJECT VARIABLE
        </form>
      </div>
    </main>
  )
}

I have also tried to move this page to pages as per this link to use getServerSideProps (), but it will not compile. As such I would like to keep using the new Route system and keep the pages as they are, but be able to inject some dynamic variables.

I have read about Data Fetching but this is not a viable solution, and again it does not compile. Ideal solution is to simply call an internal function and inject the variable into the page, on the server side.

If there is a method to use /functions or anything else I am not aware of, please do share. My project will die without this ability.

Many Thanks

[Mecanik]

Anyone? :(

[james-elicx]

Not sure what you mean by injecting stuff but you cannot use the functions directory with next-on-pages. You should be using Next.js' API routes + middleware instead of using the functions directory.

If you have problems building your app, maybe you could share those errors?

[Mecanik]

You make it sound so easy, can you please give me an example? Call a function when the page renders to insert some dynamic variable, be it 12345....

[james-elicx]

function getRandomValue() {
	// do some logic here

	return (Math.random() * 1000).toFixed();
}
 
export default function Page() {
  const value = getRandomValue()
 
  return <span>{value}</span>
}

[Mecanik]

Ah here is a fun one.... I forgot to mention that I need access to Request... so that's the main problem I guess. Sorry for not explaining properly and just rushing.

[james-elicx]

Why do you need access to request? Next.js has utility functions for headers() and cookies() that you should be using instead in server components.

https://nextjs.org/docs/app/api-reference/functions/headers
https://nextjs.org/docs/app/api-reference/functions/cookies

[Mecanik]

Thanks! It seems headers() might do the trick! On to testing :)