do people use Server Actions when working with CF Pages, particularly forms? Or do you handle your m

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} />

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

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

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

setPreviewData

setPreviewData is not defined on the

WebNextResponse

WebNextResponse

WebNextResponse

WebNextResponse when using

experimental-edge

experimental-edge

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

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

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

do people use Server Actions when working with CF Pages, particularly forms? Or do you handle your m

Similar Threads

Similar Threads

Similar Threads