I'm not really able to share my code, are you using api and server actions? - Cloudflare Developers

© 2026 Hedgehog Software, LLC

More

Communities Docs About Terms Privacy

Raiyan

RRaiyan I tried the docs but couldn't make KV work in local, haven't checked in prod, an...

Donnager

D

Donnager•2/5/24, 4:28 PM

kv works in local and in prod, don't have one off the top, but did you update your nextjs config following the docs? also make sure to add runtime edge on the page

Raiyan

R

Raiyan•2/5/24, 5:19 PM

yes

Raiyan

R

Raiyan•2/5/24, 5:19 PM

kv is undefined in runtime

Befus

BBefus I'm not really able to share my code, are you using api and server actions?

Firu

F

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

just server actions assigned to a <form action={myServerAction} /><form action={myServerAction} />

Firu

FFiru just server actions assigned to a `<form action={myServerAction} />`

Befus

B

BefusOP•2/5/24, 5:28 PM

that should work fine, how does your server action look like

Firu

F

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

i implemented it here in the main branch https://github.com/Luzefiru/cf-todo

GitHub

GitHub - Luzefiru/cf-todo: A task manager application built with Cl...

A task manager application built with Cloudflare Pages's Next.js Framework template tool. - GitHub - Luzefiru/cf-todo: A task manager application built with Cloudflare Pages's Next....

Firu

F

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

export async function createTask(formData: FormData) {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const rawFormData = Object.fromEntries(formData.entries());
  const newTaskData = {
    title: rawFormData.title,
    description: rawFormData.description,
    completed: rawFormData.status === 'true',
    due_date: rawFormData.due_date,
  };

  const { error } = await supabase.from('tasks').insert(newTaskData);

  if (error) {
    console.error('Error creating task:', error.message);
    throw error;
  }

  redirect('/');
}

export async function createTask(formData: FormData) {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const rawFormData = Object.fromEntries(formData.entries());
  const newTaskData = {
    title: rawFormData.title,
    description: rawFormData.description,
    completed: rawFormData.status === 'true',
    due_date: rawFormData.due_date,
  };

  const { error } = await supabase.from('tasks').insert(newTaskData);

  if (error) {
    console.error('Error creating task:', error.message);
    throw error;
  }

  redirect('/');
}

Firu

F

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

import Link from 'next/link';
import { createTask } from '@/app/lib/actions';

export default async function Page() {
  return (
    <div className="flex justify-center w-full">
      <div className="flex justify-center w-full px-2 sm:px-4 md:w-3/4">
        <form action={createTask} className="w-full lg:w-3/4">
         // form code
        </form>
      </div>
    </div>
  );
}

import Link from 'next/link';
import { createTask } from '@/app/lib/actions';

export default async function Page() {
  return (
    <div className="flex justify-center w-full">
      <div className="flex justify-center w-full px-2 sm:px-4 md:w-3/4">
        <form action={createTask} className="w-full lg:w-3/4">
         // form code
        </form>
      </div>
    </div>
  );
}

Befus

B

BefusOP•2/5/24, 5:30 PM

looks fine tbh

Firu

F

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

i tried doing

export const runtime = 'edge'

export const runtime = 'edge'

on both files and it still wouldn't run

Befus

BBefus looks fine tbh

Firu

F

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

my form would POST to the same URL as the page, leading to a 405 tho

Firu

F

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

based on this post, it makes total sense https://community.cloudflare.com/t/405-error-on-http-post-requests-with-cloudflare-pages-after-switching-from-netlify/286938

Firu

F

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

is there a way to make the server action be served on a separate URL & not in the page it's used in?

Befus

B

BefusOP•2/5/24, 5:33 PM

But for me it works so that isn't the problem

Befus

BBefus But for me it works so that isn't the problem

Firu

F

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

do you have any resources I can have a look to get a similar setup like yours?

Firu

F

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

i used to Cloudflare Pages docs' NextJS guide and then the Supabase Quickstart for NextJS and coded away

Firu

F

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

making sure they work on npm run devnpm run dev and Vercel

Firu

F

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

npm run pages:previewnpm run pages:preview and CF pages prod breaks it

Befus

B

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

I will send you in PM

Firu

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

Firu

F

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

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

Befus

BBefus I will send you in PM

Firu

F

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

alright, cheers

ReyhanAbizar

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

James

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

James

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

ReyhanAbizar

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?

James

J

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

Most likely yeah

ReyhanAbizar

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 setPreviewDatasetPreviewData is not defined on the WebNextResponseWebNextResponse when using experimental-edgeexperimental-edge runtime

James

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.

Rabid

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

Rabid

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!' })
}

Rabid

R

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

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

James

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

Kelsie

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

Befus

B

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

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

localλorse

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

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

Kelsie

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

James

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

James

J

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

is there some error that you're getting?

localλorse

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

James

J

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

try redeploying, looks like a temporary cloudflare api glitch

oof2win2

O

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

how does next-on-pages setupDevBindings work? when i run next devnext dev the bindings don't seem to exist which is weird as the docs say they should

James

J

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

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

James

J

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

can you share how you're configuring it?

oof2win2

O

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

yes

oof2win2

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;

oof2win2

O

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

from the docs just added logs

oof2win2

O

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

on 1.8.6 which is latest

oof2win2

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

James

J

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

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

oof2win2

O

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

yep

oof2win2

O

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

oh my bad, didnt specify runtime = edge

✨ 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

export async function createTask(formData: FormData) {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const rawFormData = Object.fromEntries(formData.entries());
  const newTaskData = {
    title: rawFormData.title,
    description: rawFormData.description,
    completed: rawFormData.status === 'true',
    due_date: rawFormData.due_date,
  };

  const { error } = await supabase.from('tasks').insert(newTaskData);

  if (error) {
    console.error('Error creating task:', error.message);
    throw error;
  }

  redirect('/');
}

export async function createTask(formData: FormData) {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const rawFormData = Object.fromEntries(formData.entries());
  const newTaskData = {
    title: rawFormData.title,
    description: rawFormData.description,
    completed: rawFormData.status === 'true',
    due_date: rawFormData.due_date,
  };

  const { error } = await supabase.from('tasks').insert(newTaskData);

  if (error) {
    console.error('Error creating task:', error.message);
    throw error;
  }

  redirect('/');
}

import Link from 'next/link';
import { createTask } from '@/app/lib/actions';

export default async function Page() {
  return (
    <div className="flex justify-center w-full">
      <div className="flex justify-center w-full px-2 sm:px-4 md:w-3/4">
        <form action={createTask} className="w-full lg:w-3/4">
         // form code
        </form>
      </div>
    </div>
  );
}

import Link from 'next/link';
import { createTask } from '@/app/lib/actions';

export default async function Page() {
  return (
    <div className="flex justify-center w-full">
      <div className="flex justify-center w-full px-2 sm:px-4 md:w-3/4">
        <form action={createTask} className="w-full lg:w-3/4">
         // form code
        </form>
      </div>
    </div>
  );
}

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;