Yeah, I'll debug it more on my own (wasn't aware of the `deployment tail` trick) and create an issue

J

James•2/4/24, 5:00 PM

Sounds good!

B

Befus•2/4/24, 5:15 PM

I am using cf-bindings-proxy but when getting my namespace / list it doesn't seem to work. Am I doing anything wrong here?

export async function generateStaticParams() {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return [];
  }

  return projects.map((project) => ({
    name: project.name.toLowerCase().replaceAll(" ", "-"),
  }));
}

const Project = async ({ params }: { params: { name: string } }) => {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return <div>No projects available</div>;
  }

  const specificProject = projects.find(
    (project) => project.name.toLowerCase().replaceAll(" ", "-") === params.name
  );

  if (!specificProject) {
    return <div>Project not found</div>;
  }

  return <ProjectPage project={specificProject} />;
};

export default Project;

export async function generateStaticParams() {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return [];
  }

  return projects.map((project) => ({
    name: project.name.toLowerCase().replaceAll(" ", "-"),
  }));
}

const Project = async ({ params }: { params: { name: string } }) => {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return <div>No projects available</div>;
  }

  const specificProject = projects.find(
    (project) => project.name.toLowerCase().replaceAll(" ", "-") === params.name
  );

  if (!specificProject) {
    return <div>Project not found</div>;
  }

  return <ProjectPage project={specificProject} />;
};

export default Project;

export async function generateStaticParams() {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return [];
  }

  return projects.map((project) => ({
    name: project.name.toLowerCase().replaceAll(" ", "-"),
  }));
}

const Project = async ({ params }: { params: { name: string } }) => {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return <div>No projects available</div>;
  }

  const specificProject = projects.find(
    (project) => project.name.toLowerCase().replaceAll(" ", "-") === params.name
  );

  if (!specificProject) {
    return <div>Project not found</div>;
  }

  return <ProjectPage project={specificProject} />;
};

export default Project;

export async function generateStaticParams() {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return [];
  }

  return projects.map((project) => ({
    name: project.name.toLowerCase().replaceAll(" ", "-"),
  }));
}

const Project = async ({ params }: { params: { name: string } }) => {
  const response = await getRequest("PROJECTS");

  const projects: Project[] = await response.json();

  if (!projects || projects.length === 0) {
    return <div>No projects available</div>;
  }

  const specificProject = projects.find(
    (project) => project.name.toLowerCase().replaceAll(" ", "-") === params.name
  );

  if (!specificProject) {
    return <div>Project not found</div>;
  }

  return <ProjectPage project={specificProject} />;
};

export default Project;

B

Befus•2/4/24, 5:16 PM

TypeError: Cannot read properties of undefined (reading 'list')

B

Befus•2/4/24, 5:19 PM

It might have something to do with this:
Using edge runtime on a page currently disables static generation for that page

JJames It's trying to request all the assets at `chris.scholarcrafter.com/_next/...` wh...

W

webstorms•2/4/24, 5:49 PM

Any idea why this is happening? I am returning

return NextResponse.rewrite(
new URL(

https://scholarcrafter.com/chris/

https://scholarcrafter.com/chris/

https://scholarcrafter.com/chris/

https://scholarcrafter.com/chris/, req.url)
);

Should I be modifying any of the headers?

Wwebstorms Any idea why this is happening? I am returning return NextResponse.rewrite( ...

J

James•2/4/24, 6:08 PM

because next.js is loading the static assets relative to the domain you're visiting from, and the _next/* static assets are set to bypass invoking the worker by default, so they won't be hit by that rewrite

J

James•2/4/24, 6:09 PM

if you remove the worker invocation exclusion for them, that might get expensive quick, not sure

JJames because next.js is loading the static assets relative to the domain you're visit...

W

webstorms•2/4/24, 6:18 PM

Don't think I follow, any docs I can read more about this? How would implement this? Why would this be expensive? Is there no simple way to say load assets from this domain?

Wwebstorms Don't think I follow, any docs I can read more about this? How would implement t...

J

James•2/4/24, 6:48 PM

well if you want all requests to chris.scholarcrafter.com to go through the worker, you would need to remove any worker invocation exclude rules in the generated _routes.json in the output directory. This would mean removing the exclusion rule for /_next/*. That would be an extra 10 or so worker invocations for a request to a page on your site just to correctly rewrite a subdomain for static assets.

You should add your subdomain to your Pages project as a custom domain, then your assets should be able to be requested fine

F

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

can server actions work on NextJS CF Pages?

i only get a 405 Method Not Allowed when I do a POST due to the server action dispatch

meanwhile, my application works perfectly fine in Vercel

F

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

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

F

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

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

F

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

making sure they work on

npm run dev

npm run dev

and Vercel

F

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

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

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?

Yeah, I'll debug it more on my own (wasn't aware of the `deployment tail` trick) and create an issue

Similar Threads

Similar Threads

Similar Threads