Cloudflare Pages + NextJS: Access KV-Store in getServerSideProps

jkleinowitz_cf · January 8, 2023, 6:29pm

Hi,

I’m wondering if it is somehow possible to access a KV Namespace binding when doing SSR by doing getServerSideProps for NextJs using the Edge Runtime. If yes, could someone provide me with an example.

Thanks and best regards

cherryjimbo · January 8, 2023, 6:30pm

You can’t at this time. The following issue is tracking this:

github.com/cloudflare/next-on-pages

Environment variables and bindings on `env`

opened 09:24AM - 20 Oct 22 UTC

GregBrimble

Next.js has it's own API design for [`getServerSideProps()`](https://nextjs.org/…docs/api-reference/data-fetching/get-server-side-props#context-parameter) and the Edge API Routes and Middleware take only the `NextRequest` object as its single parameter. This means that passing Workers' `env` object which contains environment variables and bindings isn't immediately obvious. One idea is to 'pollute' the global space and access things by request. This has the advantage of being _similar_ to how it works today, but might be too far into the uncanny valley. For example: ```ts import type { NextRequest } from 'next/server' export const config = { runtime: 'experimental-edge' } export default async function(req: NextRequest) { const value = process.env[req].MY_ENV_VAR } ``` Another might be to use the `@cloudflare/next-on-pages` package as a runtime library which is different enough to be intentional, but still fundamentally works the same way: ```ts import type { NextRequest } from 'next/server' import { env } from '@cloudflare/next-on-pages' export const config = { runtime: 'experimental-edge' } export default async function(req: NextRequest) { const value = env(req, 'MY_ENV_VAR') } ``` What do y'all think? Any preferences? Any other ideas?

Honestly though, next-on-pages itself is in a state right now that I couldn’t personally recommend it due to lack of maintenance and support, and would encourage you to consider an alternate solution like Netlify or Vercel for your project if you need a quick resolution.

jkleinowitz_cf · January 8, 2023, 6:33pm

Ah, “good” to know. Thanks for the fast reply

system · January 11, 2023, 6:33pm

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Next.js Experimental Edge and getServerSideProps Cloudflare Pages	0	1225	March 13, 2023
Server Side Rendering with PlanetScale and Edge runtime Cloudflare Pages	0	951	July 21, 2023
Problem with deploying Nextjs website With SSR Cloudflare Pages	0	1629	April 9, 2023
[Local Dev] Cannot access KV from Cloudflare Pages using wrangler Cloudflare Pages	7	3959	June 17, 2022
The Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages Cloudflare Pages Blog	1	1610	October 24, 2022

Cloudflare Pages + NextJS: Access KV-Store in getServerSideProps

Related topics