Yep, current theory is that there's some sort of runtime bug that causes the AsyncLocalStorage conte

B

Befus•12/20/23, 1:51 PM

export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const file = formData.get("file") as File;
  console.log(file);
  console.log(file.type);
  console.log(file.name);
  // check if incoming data is a file and an image extension
  if (!file || !file.type.startsWith("image/")) {
    return new Response(JSON.stringify("error"), {
      headers: {
        "content-type": "application/json",
      },
    });
  }

  // if it is a file, upload the name of it to KV
  const { GALLERY } = process.env;
  const response = await GALLERY.put(file.name, file as unknown as ReadableStream<Uint8Array>);

  return new Response(JSON.stringify(response), {
    headers: {
      "content-type": "application/json",
    },
  });
}

export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const file = formData.get("file") as File;
  console.log(file);
  console.log(file.type);
  console.log(file.name);
  // check if incoming data is a file and an image extension
  if (!file || !file.type.startsWith("image/")) {
    return new Response(JSON.stringify("error"), {
      headers: {
        "content-type": "application/json",
      },
    });
  }

  // if it is a file, upload the name of it to KV
  const { GALLERY } = process.env;
  const response = await GALLERY.put(file.name, file as unknown as ReadableStream<Uint8Array>);

  return new Response(JSON.stringify(response), {
    headers: {
      "content-type": "application/json",
    },
  });
}

export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const file = formData.get("file") as File;
  console.log(file);
  console.log(file.type);
  console.log(file.name);
  // check if incoming data is a file and an image extension
  if (!file || !file.type.startsWith("image/")) {
    return new Response(JSON.stringify("error"), {
      headers: {
        "content-type": "application/json",
      },
    });
  }

  // if it is a file, upload the name of it to KV
  const { GALLERY } = process.env;
  const response = await GALLERY.put(file.name, file as unknown as ReadableStream<Uint8Array>);

  return new Response(JSON.stringify(response), {
    headers: {
      "content-type": "application/json",
    },
  });
}

export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const file = formData.get("file") as File;
  console.log(file);
  console.log(file.type);
  console.log(file.name);
  // check if incoming data is a file and an image extension
  if (!file || !file.type.startsWith("image/")) {
    return new Response(JSON.stringify("error"), {
      headers: {
        "content-type": "application/json",
      },
    });
  }

  // if it is a file, upload the name of it to KV
  const { GALLERY } = process.env;
  const response = await GALLERY.put(file.name, file as unknown as ReadableStream<Uint8Array>);

  return new Response(JSON.stringify(response), {
    headers: {
      "content-type": "application/json",
    },
  });
}

I'm new to using KV/next on pages, I seem to be getting the type error that GALLERY.put is not a function. But it does exist and I'm pretty sure it would work on production but I am testing locally now using npx cf-bindings-proxy

BBefus ```tsx export async function POST(req: NextRequest) { const formData = await r...

J

JamesOP•12/20/23, 5:36 PM

if you want to use process.env.GALLERY in next dev, you would need to use the experimental next dev module - https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

JJames if you want to use process.env.GALLERY in next dev, you would need to use the ex...

B

Befus•12/20/23, 5:59 PM

Is there another way except the experimental?

BBefus Is there another way except the experimental?

J

JamesOP•12/20/23, 6:00 PM

You can use cf-bindings-proxy but the syntax would need to changed slightly like

const gallery = binding<KVNamespace>('GALLERY');

const gallery = binding<KVNamespace>('GALLERY');

const gallery = binding<KVNamespace>('GALLERY');

const gallery = binding<KVNamespace>('GALLERY');

B

Befus•12/20/23, 6:00 PM

Yea i am using cf binding proxy, damn lol

A

atgctg•12/22/23, 1:27 PM

Is there a way to use a CF websocket within a

next-on-pages

next-on-pages

project -- or should I create a separate worker for that?

M

mushang98•12/23/23, 2:59 PM

Sorry for interrupting. Is there any way to fetch "IncomingRequestCfProperties" from next js directly from default function?

J

JamesOP•12/23/23, 9:08 PM

Not at the moment, although there's some discussion around how we might want to expose it

B

bnowak•12/25/23, 2:45 PM

Hey community

I have question about observability. Has anybody been able to successfully use Honeycomb plugin (https://developers.cloudflare.com/pages/functions/plugins/honeycomb/) with next-on-pages?

Honeycomb · Cloudflare Pages docs

The Honeycomb Pages Plugin automatically sends traces to Honeycomb for analysis and observability.

D

Deo Kumar•12/26/23, 8:16 AM

Is there any way to use Cache API in local development mode?

J

JamesOP•12/26/23, 10:46 PM

cf-bindings-proxy supports the cache api, and that could be used in local dev.

R

Rabid•12/27/23, 5:04 PM

How can I cache requests made inside getServerSideProps?

const response = await fetch("https://oauth.battle.net/token", {
    body: "grant_type=client_credentials",
    headers: {
      Authorization: `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
      "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST",
    next: { revalidate: TOKEN_CACHE_TIME },
  })

const response = await fetch("https://oauth.battle.net/token", {
    body: "grant_type=client_credentials",
    headers: {
      Authorization: `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
      "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST",
    next: { revalidate: TOKEN_CACHE_TIME },
  })

const response = await fetch("https://oauth.battle.net/token", {
    body: "grant_type=client_credentials",
    headers: {
      Authorization: `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
      "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST",
    next: { revalidate: TOKEN_CACHE_TIME },
  })

const response = await fetch("https://oauth.battle.net/token", {
    body: "grant_type=client_credentials",
    headers: {
      Authorization: `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
      "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST",
    next: { revalidate: TOKEN_CACHE_TIME },
  })

I'm passing the reponse headers to the client and I'm getting this:

{
    "cache-control": "no-store",
    "cf-as-number": "26253",
    "cf-cache-status": "DYNAMIC",
    "cf-ray": "83c31de96239538d-DEN",
    "connection": "keep-alive",
    "content-type": "application/json;charset=UTF-8",
    "date": "Wed, 27 Dec 2023 16:59:55 GMT",
    "pragma": "no-cache",
    "server": "cloudflare",
    "transfer-encoding": "chunked",
    "vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers"
}

{
    "cache-control": "no-store",
    "cf-as-number": "26253",
    "cf-cache-status": "DYNAMIC",
    "cf-ray": "83c31de96239538d-DEN",
    "connection": "keep-alive",
    "content-type": "application/json;charset=UTF-8",
    "date": "Wed, 27 Dec 2023 16:59:55 GMT",
    "pragma": "no-cache",
    "server": "cloudflare",
    "transfer-encoding": "chunked",
    "vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers"
}

{
    "cache-control": "no-store",
    "cf-as-number": "26253",
    "cf-cache-status": "DYNAMIC",
    "cf-ray": "83c31de96239538d-DEN",
    "connection": "keep-alive",
    "content-type": "application/json;charset=UTF-8",
    "date": "Wed, 27 Dec 2023 16:59:55 GMT",
    "pragma": "no-cache",
    "server": "cloudflare",
    "transfer-encoding": "chunked",
    "vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers"
}

{
    "cache-control": "no-store",
    "cf-as-number": "26253",
    "cf-cache-status": "DYNAMIC",
    "cf-ray": "83c31de96239538d-DEN",
    "connection": "keep-alive",
    "content-type": "application/json;charset=UTF-8",
    "date": "Wed, 27 Dec 2023 16:59:55 GMT",
    "pragma": "no-cache",
    "server": "cloudflare",
    "transfer-encoding": "chunked",
    "vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers"
}

R

Rabid•12/27/23, 5:54 PM

Actually this seems to be related to the fact that the built in next caching doesn't work on pages router, and I'm using pages router. But still, using the custom cf options isn't working either

J

JamesOP•12/27/23, 6:08 PM

I believe they won't work due to how Next.js patches fetch requests

R

Rabid•12/27/23, 7:00 PM

But from what I'm reading, I don't think they mess with fetch requests unless you are using the app router

R

Rabid•12/27/23, 7:00 PM

I could be wrong though

J

JamesOP•12/28/23, 9:00 AM

Pages does not currently support image resizing in the worker, so we are unable to do it on the server and instead act as a proxy for the image at the moment. You could use a custom loader to use Cloudflare image resizing if you wanted

JJames Pages does not currently support image resizing in the worker, so we are unable ...

A

Andrew Murphy•12/28/23, 10:03 AM

That sounds like a good open source project

F

fernando•12/28/23, 6:15 PM

Hi, I come with a question. Is it possible not to use next-on-pages to prepare and deploy a Next.js app to CF Pages? Currently, I am using TurboRepo to take advantage of the build cache, which literally happens in seconds. However, for adapting the app to be well interpreted by CF Pages, I have to use next-on-pages and practically lose all the time advantage provided by TurboRepo.

Is there any example of how to deploy a Next.js app manually without using next-on-pages?

J

JamesOP•12/28/23, 6:20 PM

I don't understand why you can't use turborepo at the same time as next-on-pages?

F

fernando•12/28/23, 6:29 PM

Because that causes the app to build twice, I am looking to see if it is possible to eliminate one of them

J

JamesOP•12/28/23, 6:35 PM

Ah, I see what you mean, although I think you're confusing things a little with what is next-on-pages' fault. We spawn the Vercel CLI to build the app, and it's the Vercel CLI that is running

yarn run build

yarn run build

yarn run build

yarn run build to build the Next.js app.

J

JamesOP•12/28/23, 6:36 PM

Maybe one of your listed outputs for

build

build

is changing if

yarn run build

yarn run build

yarn run build

yarn run build is supposed to go through turbo. In either case, it's out of our control since this is something that is run in the Vercel CLI instead.

F

fernando•12/28/23, 6:40 PM

I understand, it makes sense to me. Thank u very much for your response!

A

Andrew Murphy•12/29/23, 4:37 AM

is there some kind of limitation on making http requests from a worker? I have nextjs app that i am using next-on-pages for; it has an api that gets deployed to workers that calls a graphql endpoint. it works fine locally, and using wrangler, but when deployed i get an error ApolloError: Unexpected token '<', "<html><hea"... is not valid JSON

AAndrew Murphy is there some kind of limitation on making http requests from a worker? I have n...

S

subscriptions•12/29/23, 4:40 AM

Your api url might be wrong in workers

Ssubscriptions Your api url might be wrong in workers

A

Andrew Murphy•12/29/23, 4:41 AM

it's hard coded in my code, not an env variable

A

Andrew Murphy•12/29/23, 4:43 AM

oh, it also works fine on the build. the same URL endpoint is called on the cloudflare build

A

Andrew Murphy•12/29/23, 4:44 AM

so cloudflare can access that API fine on its build servers, just not from a worker

U

Unsmart•12/29/23, 4:50 AM

Sounds like the request is probably getting blocked by the API

A

Andrew Murphy•12/29/23, 4:52 AM

it's a wordpress instance that i host, so i doubt it

A

Andrew Murphy•12/29/23, 5:04 AM

just worked out from help in #workers-discussion that it's my hosting provider putting a captcha up

A

Andrew Murphy•12/29/23, 5:10 AM

as a rubbish work around I could at build time generate a static file with data from the endpoint and use that from the worker, but that's a bad solution

CChris Hi all, When I deploy the Next.js application directly on the cloud server, the ...

D

Deo Kumar•12/29/23, 3:54 PM

You can also use wasm to optimise images by creating an api route.

JJames [cf-bindings-proxy](https://github.com/james-elicx/cf-bindings-proxy) supports t...

D

Deo Kumar•12/29/23, 3:55 PM

Thank you

DDeo Kumar You can also use wasm to optimise images by creating an api route.

D

Donnager•12/29/23, 6:54 PM

sorry big n00b, what do you mean exactly by this? using a cloudflare worker from the api route that uses wasm or? would be super interested to learn more if you have a blog or link to point to

DDonnager sorry big n00b, what do you mean exactly by this? using a cloudflare worker from...

D

Deo Kumar•12/30/23, 3:09 AM

You can try this.
Or you can write it in workers and add images.path

IMAGE.txt2.14KB

DDeo Kumar You can try this. Or you can write it in workers and add images.path

D

Donnager•12/30/23, 8:39 PM

super interesting! thank you for the snippet and reply sir, and had no idea about

wasm-image-optimization

wasm-image-optimization

wasm-image-optimization

wasm-image-optimization ,

i noticed you import from

/edge

/edge

/edge

/edge but in the docs it shows a

import { optimizeImage } from 'wasm-image-optimization';

import { optimizeImage } from 'wasm-image-optimization';

import { optimizeImage } from 'wasm-image-optimization';

import { optimizeImage } from 'wasm-image-optimization'; for cloudflare, which is curious to me since my understanding was all cloudflare workers are mandatory edge?

anyways, appreciate the insight!

DDonnager super interesting! thank you for the snippet and reply sir, and had no idea abou...

D

Deo Kumar•12/31/23, 4:32 AM

In next js build, wasm binaries are resolved by webpack when they are imported with parameter ?module but Cloudflare workers doesn't need it (both *.wasm and *.wasm?module are resolved)

The package was recently updated, you should use

wasm-image-optimization/next

wasm-image-optimization/next

wasm-image-optimization/next

wasm-image-optimization/next if you are using it in next.js project and

wasm-image-optimization

wasm-image-optimization

wasm-image-optimization

wasm-image-optimization for workers

B

Befus•12/31/23, 4:27 PM

Does next on pages always staticly build or how do I get mine to not do this lmao

J

JamesOP•12/31/23, 4:28 PM

Opt your route into the edge runtime and it will be SSR'd

L

localλorse•12/31/23, 4:34 PM

I'm deploying a NextJS app via a page and a worker. How can I configure both my page and worker to be served on the same subdomain? (E.g.

staging.mydomain.com

staging.mydomain.com

staging.mydomain.com

staging.mydomain.com)

L

localλorse•12/31/23, 4:34 PM

Also, do I have to add a custom domain and route to a worker, or just one? (which one?)

J

JamesOP•12/31/23, 4:36 PM

I don't understand the question. next-on-pages builds a worker for your Pages project, and it should all be deployed to one Pages project

JJames I don't understand the question. next-on-pages builds a worker for your Pages pr...

L

localλorse•12/31/23, 4:37 PM

What I mean is that the frontend is deployed as a page (static) while the backend code is deployed as a worker.
Can both be served from the same subdomain? (If yes, how?)

J

JamesOP•12/31/23, 4:38 PM

Ah so you're not using next-on-pages? In that case it'd probably be better to ask in pages-help or workers-and-pages-help

J

JamesOP•12/31/23, 4:39 PM

If you were using next-on-pages, the suggestion would be to move your backend logic to Next.js API routes/equivalent to achieve your use case.

JJames Ah so you're not using next-on-pages? In that case it'd probably be better to as...

L

localλorse•12/31/23, 4:40 PM

I'm deploying nextjs on cloudflare, my project is based on this template https://github.com/timothymiller/t4-app/tree/lucia.
And yes, the backend logic is using Next.js API routes.
The question is, how can I make both my frontend and backend be served on the same subdomain on cloudflare? Do I have to add the subdomain to both? Then what should the route be?

Yep, current theory is that there's some sort of runtime bug that causes the AsyncLocalStorage conte

Similar Threads

Similar Threads

Similar Threads