can server actions work on NextJS CF Pages? i only get a 405 Method Not Allowed when I do a POST du

F

FiruOP•2/5/24, 3:56 AM

the server actions utilize Supabase and the edge runtime on server components

F

FiruOP•2/5/24, 3:59 AM

Codebase: https://github.com/Luzefiru/cf-todo

These are the deployments

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....

Cloud Task

A task tracker app hosted on the Cloudflare Pages platform, built with NextJS.

Cloud Task

A task tracker app hosted on the Cloudflare Pages platform, built with NextJS.

R

ReyhanAbizar•2/5/24, 5:05 AM

Hello, I'm having trouble connecting to the neon database using

@neondatabase/serverless

@neondatabase/serverless

@neondatabase/serverless

@neondatabase/serverless with the error message

Reflect.get called on non-object

Reflect.get called on non-object

Reflect.get called on non-object

Reflect.get called on non-object. I've checked the issue raised on this page https://github.com/cloudflare/next-on-pages/issues/499.

I'm curious if there's a workaround or an alternative method to connect to the Neon database in the meantime. Any suggestions or insights would be appreciated.

GitHub

Issues · cloudflare/next-on-pages

CLI to build and develop Next.js apps for Cloudflare Pages - Issues · cloudflare/next-on-pages

R

Raiyan•2/5/24, 5:42 AM

I tried the docs but couldn't make KV work in local, haven't checked in prod, anyone with a github repo?

W

webstorms•2/5/24, 6:42 AM

SSG does not seem to work for me. I found some docs saying getStaticPaths fallback has to be false (https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/gotchas.md#getstaticpaths) Is true and blocking not supported?

GitHub

next-on-pages/packages/next-on-pages/docs/gotchas.md at main · clou...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

FFiru can server actions work on NextJS CF Pages? i only get a 405 Method Not Allowed...

F

FiruOP•2/5/24, 1:03 PM

do people use Server Actions when working with CF Pages, particularly forms? Or do you handle your mutations via Cloudflare Functions with a custom route handler? (this will require a client component)

FFiru do people use Server Actions when working with CF Pages, particularly forms? Or ...

B

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

I use server actions

BBefus I use server actions

F

FiruOP•2/5/24, 2:38 PM

do you have a sample website up & running? I want to check what the Network request looks like. my server actions POST the same URL of the page, which leads to a 405 Method Not Allowed error.

B

Befus•2/5/24, 3:31 PM

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

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

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

R

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

yes

R

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

kv is undefined in runtime

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

F

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

just server actions assigned to a

<form action={myServerAction} />

<form action={myServerAction} />

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

B

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

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

F

FiruOP•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....

F

FiruOP•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('/');
}

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('/');
}

F

FiruOP•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>
  );
}

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>
  );
}

B

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

looks fine tbh

F

FiruOP•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

BBefus looks fine tbh

F

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

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

F

FiruOP•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

F

FiruOP•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?

B

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

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

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

F

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

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

F

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

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

F

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

making sure they work on

npm run dev

npm run dev

and Vercel

F

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

npm run pages:preview

npm run pages:preview

and CF pages prod breaks it

B

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

I will send you in PM

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

F

FiruOP•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

FiruOP•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

Befus•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?

can server actions work on NextJS CF Pages? i only get a 405 Method Not Allowed when I do a POST du

Similar Threads

Similar Threads

Similar Threads