I will send you in PM

FFiru i tried doing `export const runtime = 'edge'` on both files and it still wouldn'...

F

Firu•2/5/24, 5:37 PM

as per https://community.cloudflare.com/t/next-js-server-action-error-405/601134

BBefus I will send you in PM

F

Firu•2/5/24, 5:37 PM

alright, cheers

RReyhanAbizar Hello, I'm having trouble connecting to the neon database using `@neondatabase/s...

J

James•2/5/24, 6:21 PM

Afraid not, this is a problem in workerd. There's a workaround on the workerd issue, but I don't think you'll be able to use it since it's the neon library where this is happening

JJames Afraid not, this is a problem in workerd. There's a workaround on the workerd [i...

R

ReyhanAbizar•2/6/24, 12:13 AM

Oh, I see. Thanks for the info. So I need to wait for a fix from either the neon library or workerd?

J

James•2/6/24, 6:03 AM

Most likely yeah

R

ReyhanAbizar•2/6/24, 10:32 AM

alright, thanks @James !

P

P.•2/6/24, 3:30 PM

Hi guy! I'm migrating a nextjs app from vercel to cf pages. Do you have an idea how to have the preview mode? The method

setPreviewData

setPreviewData

is not defined on the

WebNextResponse

WebNextResponse

when using

experimental-edge

experimental-edge

runtime

J

James•2/6/24, 6:16 PM

What's that?

PP.Hi guy! I'm migrating a nextjs app from vercel to cf pages. Do you have an idea ...

P

P.•2/6/24, 9:03 PM

OK I've found the issue, and not cf pages issue... It's just the nextjs documentation is not clear on that subject.

R

Rabid•2/7/24, 1:02 AM

How to handle api routes with edge runtime? I'm getting

res.status is not a function

res.status is not a function

R

Rabid•2/7/24, 1:02 AM

export const config = {
  runtime: 'edge',
}

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

export const config = {
  runtime: 'edge',
}

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

export const config = {
  runtime: 'edge',
}

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

export const config = {
  runtime: 'edge',
}

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

R

Rabid•2/7/24, 1:05 AM

Or is there a way I can combine the edge runtime with hono router?

J

James•2/7/24, 6:03 AM

You can use the Request and Response web APIs. The function only accepts a request parameter in the edge runtime

KKelsie Hi folks, I have a NextJS application with Supabase that I had deployed on Verce...

B

BefusOP•2/7/24, 3:45 PM

Did you set the env variables in the settings on cloudflare?

L

localλorse•2/7/24, 5:10 PM

Any idea why I'm getting this error when trying to deploy my nextjs app to Cloudflare via GH action?

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
✘ [ERROR] Received a malformed response from the API
  <!DOCTYPE html>
  <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
  <!--[if I... (length = 6434)
  POST /accounts/***/pages/projects/***/deployments -> 504 Gateway Time-out

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
✘ [ERROR] Received a malformed response from the API
  <!DOCTYPE html>
  <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
  <!--[if I... (length = 6434)
  POST /accounts/***/pages/projects/***/deployments -> 504 Gateway Time-out

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
✘ [ERROR] Received a malformed response from the API
  <!DOCTYPE html>
  <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
  <!--[if I... (length = 6434)
  POST /accounts/***/pages/projects/***/deployments -> 504 Gateway Time-out

✨ Compiled Worker successfully
✨ Uploading Worker bundle
✨ Uploading _routes.json
✘ [ERROR] Received a malformed response from the API
  <!DOCTYPE html>
  <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
  <!--[if I... (length = 6434)
  POST /accounts/***/pages/projects/***/deployments -> 504 Gateway Time-out

Full log: https://dpaste.com/BS3C42YFX

KKelsie Hi folks, I have a NextJS application with Supabase that I had deployed on Verce...

J

James•2/7/24, 5:42 PM

i would theorise that the environment variables aren't set for both preview and production in the dashboard, or there was a typo or something

J

James•2/7/24, 5:42 PM

is there some error that you're getting?

Llocalλorse Any idea why I'm getting this error when trying to deploy my nextjs app to Cloud...

J

James•2/7/24, 5:42 PM

try redeploying, looks like a temporary cloudflare api glitch

O

oof2win2•2/7/24, 5:43 PM

how does next-on-pages setupDevBindings work? when i run

next dev

next dev

the bindings don't seem to exist which is weird as the docs say they should

J

James•2/7/24, 5:44 PM

did you add the latest version of next-on-pages as a dev dependency?

J

James•2/7/24, 5:44 PM

can you share how you're configuring it?

O

oof2win2•2/7/24, 5:44 PM

yes

O

oof2win2•2/7/24, 5:44 PM

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

O

oof2win2•2/7/24, 5:44 PM

from the docs just added logs

O

oof2win2•2/7/24, 5:45 PM

on 1.8.6 which is latest

O

oof2win2•2/7/24, 5:46 PM

from the logs i get this which is weird since it should have created the binding

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

J

James•2/7/24, 5:46 PM

have you tried using the binding in an edge runtime route?

O

oof2win2•2/7/24, 5:46 PM

yep

O

oof2win2•2/7/24, 5:47 PM

oh my bad, didnt specify runtime = edge

O

oof2win2•2/7/24, 5:48 PM

thank you!

J

James•2/7/24, 5:59 PM

no worries

J

James•2/7/24, 8:27 PM

They should

L

localλorse•2/8/24, 1:39 PM

When import this

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

, miniflare complains:

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

BUT: This page says that both the

Buffer

Buffer

and

Streams

Streams

API are supported, and I have set

node_compat = true

node_compat = true

in my

wrangler.toml

wrangler.toml

.
So why doesn't it work? :)

L

localλorse•2/8/24, 1:40 PM

Do I also have to set

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

in addition to

node_compat = true

node_compat = true

?

L

localλorse•2/8/24, 1:41 PM

Same error if I try

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

instead btw

J

James•2/8/24, 6:18 PM

I think this might be a better question for functions or workers-and-pages-help or miniflare

G

gui.ohm•2/8/24, 11:51 PM

Is something like this available with next on pages? https://vercel.com/docs/observability/otel-overview/quickstart
If not, how is it possible to get observability and logs including the response information (next middleware doesn't have response data & status) https://www.answeroverflow.com/m/1125369447599845446
Logpush isn't available either?

Quickstart for using the Vercel OpenTelemetry Collector

Learn how to get started with OTEL on Vercel to send traces from your Serverless or Edge Functions to application performance monitoring (APM) vendors.

How to enable logpush for Pages? - Cloudflare Developers

Since Cloudflare Pages does not support

wrangler.toml

wrangler.toml

config files, how does one enable logpush for Pages?

The only documented way of configuring logpush for workers (https://developers.cloudflare.com/workers/platform/logpush/#enable-logging-on-your-worker) is to either configure the

wrangler.toml

wrangler.toml

file with

logpush = true

logpush = true

or to configure...

B

BefusOP•2/9/24, 4:22 PM

When using revalidatePath to update my cache, it is working locally but not in production. Anybody that is familiar with this?

J

James•2/9/24, 4:36 PM

Do you get any errors?

JJames Do you get any errors?

B

BefusOP•2/9/24, 6:50 PM

Not really, it just doesn't update

B

BefusOP•2/9/24, 6:50 PM

Would I have to change settings of cloudflare cache or does it work with the nextjs caching?

J

James•2/9/24, 7:01 PM

it uses the cache api in the worker

J

James•2/9/24, 7:02 PM

this is for a fetch request correct?

B

BefusOP•2/9/24, 7:02 PM

Not really, I am using server actions to get/put from my kv "directly"

J

James•2/9/24, 7:03 PM

I'm not sure I follow. What are you trying to revalidate with revalidatePath?

B

BefusOP•2/9/24, 7:04 PM

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

Similar Threads

Similar Threads

Similar Threads