NextResponse.rewrite from middleware does not seem to render the page correctly, anyone else experie

W

webstormsOP•2/4/24, 10:08 AM

Also, console.log from middleware does not appear in my real-time logs, any ideas why?

Wwebstorms NextResponse.rewrite from middleware does not seem to render the page correctly,...

J

James•2/4/24, 11:32 AM

Just checked and it seems to be rewriting okay for me. Are you able to share more info?

JJames Just checked and it seems to be rewriting okay for me. Are you able to share mor...

W

webstormsOP•2/4/24, 12:17 PM

Just porting my site from vercel to cloudflare, lemme see if I can re-create the issue with less code

W

webstormsOP•2/4/24, 12:18 PM

Also, does cloudflare support on-demand ISR? Found a thread from half a year ago that says it doesn't (https://community.cloudflare.com/t/error-when-using-isr-with-cloudflare-pages-nextjs/525775). But maybe it is supported now?

J

James•2/4/24, 12:34 PM

Afraid not, that's a limitation from Vercel as they only generate those functions for Node.js and not the edge runtime. You can use the revalidate property in fetch requests though instead of the traditional page-level ISR

W

webstormsOP•2/4/24, 12:44 PM

thanks, not sure I know enough to understand, are there docs to showcase how to do this?

J

James•2/4/24, 12:46 PM

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

Data Fetching: Fetching, Caching, and Revalidating | Next.js

Learn how to fetch, cache, and revalidate data in your Next.js application.

JJames Just checked and it seems to be rewriting okay for me. Are you able to share mor...

W

webstormsOP•2/4/24, 4:16 PM

could you please share package versions and maybe sample project code (if it's available on Github?)

JJames Just checked and it seems to be rewriting okay for me. Are you able to share mor...

W

webstormsOP•2/4/24, 4:22 PM

I'm finding the NextResponse.rewrite to not correctly render the page content (only showing plain text without rendering all the css)

For example, this is the expected site: https://scholarcrafter.com/chris
When I visit https://chris.scholarcrafter.com/ (which rewrites to the expected site, you can see all the css is missing)

W

webstormsOP•2/4/24, 4:25 PM

here are the package versions I am using: https://gist.github.com/webstorms/f965c3ab635a446633a1c6fef7f48d37

Gist

package.json

GitHub Gist: instantly share code, notes, and snippets.

Wwebstorms I'm finding the NextResponse.rewrite to not correctly render the page content (o...

J

James•2/4/24, 4:26 PM

It's trying to request all the assets at

chris.scholarcrafter.com/_next/...

chris.scholarcrafter.com/_next/...

chris.scholarcrafter.com/_next/...

chris.scholarcrafter.com/_next/... when they exist at

scholarcrafter.com/_next/...

scholarcrafter.com/_next/...

scholarcrafter.com/_next/...

scholarcrafter.com/_next/...

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

W

webstormsOP•2/4/24, 4:29 PM

Ah thanks - seems like I need to modify some of the code for extracting domain and subdomain names

W

webstormsOP•2/4/24, 4:30 PM

My console.log from middleware are not popping up in my Real-time Logs under my CF page. Should I be able to see them there or somewhere else?

J

James•2/4/24, 4:31 PM

You can try tailing your deployment with wrangler -

npx wrangler pages deployment tail

npx wrangler pages deployment tail

npx wrangler pages deployment tail

npx wrangler pages deployment tail

A

alongubkin•2/4/24, 4:50 PM

Hey, are there any plans to support

revalidateTag

revalidateTag

revalidateTag

revalidateTag and/or

revalidatePath

revalidatePath

revalidatePath

revalidatePath? Currently I get an internal server error when trying to call them from Cloudflare Pages.

I saw this PR: https://github.com/cloudflare/next-on-pages/pull/606, will it fix

revalidateTag

revalidateTag

revalidateTag

revalidateTag? Any estimations for it?

J

James•2/4/24, 4:54 PM

both of those already work fine.

J

James•2/4/24, 4:55 PM

please can you share the error you receive?

J

James•2/4/24, 4:55 PM

if you try tailing your deployment, you should see it logged

A

alongubkin•2/4/24, 4:57 PM

@James

Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance

Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance

Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance

Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance

J

James•2/4/24, 4:59 PM

I don't believe we've seen this error before with next-on-pages. Are you able to share a reproduction?

A

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

Yeah, I'll debug it more on my own (wasn't aware of the

deployment tail

deployment tail

deployment tail

deployment tail trick) and create an issue if it's a next-on-pages bug. Thanks @James !

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

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

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

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

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

NextResponse.rewrite from middleware does not seem to render the page correctly, anyone else experie

Similar Threads

Similar Threads

Similar Threads