Does server actions works for anyone here? I am using Next 14.1.0 and all the server actions XHR req

S

sathoro•2/1/24, 12:22 PM

I finally got error reporting with Sentry working well with next-on-pages

I started from scratch and used the Loader Script instead of their "automatic" setup

this works for some errors but not the ones caught by the built-in NextJS error boundary in production

so, I used

react-error-boundary

react-error-boundary

to wrap my app like this, and now it catches everything and allowed us to customize the error page:

<ErrorBoundary
  onError={(error, errorInfo) => {
    if (window.Sentry) {
      window.Sentry.captureException(error);
    }
  }}
  fallbackRender={({ error, resetErrorBoundary }) => (
    // add your own UI
  )}
>
  <Component {...pageProps} />
</ErrorBoundary>

<ErrorBoundary
  onError={(error, errorInfo) => {
    if (window.Sentry) {
      window.Sentry.captureException(error);
    }
  }}
  fallbackRender={({ error, resetErrorBoundary }) => (
    // add your own UI
  )}
>
  <Component {...pageProps} />
</ErrorBoundary>

<ErrorBoundary
  onError={(error, errorInfo) => {
    if (window.Sentry) {
      window.Sentry.captureException(error);
    }
  }}
  fallbackRender={({ error, resetErrorBoundary }) => (
    // add your own UI
  )}
>
  <Component {...pageProps} />
</ErrorBoundary>

<ErrorBoundary
  onError={(error, errorInfo) => {
    if (window.Sentry) {
      window.Sentry.captureException(error);
    }
  }}
  fallbackRender={({ error, resetErrorBoundary }) => (
    // add your own UI
  )}
>
  <Component {...pageProps} />
</ErrorBoundary>

J

James•2/1/24, 6:30 PM

Nice!

Aashutosh Does server actions works for anyone here? I am using Next 14.1.0 and all the se...

J

James•2/1/24, 6:31 PM

Server actions should work. Please can you open a GitHub issue with a reproduction if they're not working for you?

JJames A minimal reproduction would be appreciated if possible

M

Morgan•2/2/24, 10:32 AM

On the surface it looks related to a route that generates an OG image.

M

Morgan•2/2/24, 10:34 AM

I have managed to get a Next.js 14 site working after changing all routes to "edge", but I'm getting errors on dynamic routes, how do I go about surfacing them?

Usually, with Vercel, I could add a console.log() and view the server logs to debug, how do I go about doing that with Cloudflare?

I've looked at realtime logs, but they only seem to contain headers.

J

James•2/2/24, 3:04 PM

You should be able to log errors and view them when tailing your deployment with wrangler

R

Raiyan•2/3/24, 5:52 AM

can anyone give me a link to a repository where latest nextjs is working with other features of cf like kv?

M

mohamed.adham•2/3/24, 10:57 AM

Hello

M

mohamed.adham•2/3/24, 10:57 AM

I have a small problem with cloudflare if anyone can help me...

M

mohamed.adham•2/3/24, 10:58 AM

I have a website made with next and cloudflare

M

mohamed.adham•2/3/24, 10:58 AM

But, the problem is that, when I use the next

<Image />

<Image />

component it doesn't work, and no images serve even the static in the public directory

M

mohamed.adham•2/3/24, 10:58 AM

How to solve this

RRaiyan can anyone give me a link to a repository where latest nextjs is working with ot...

J

James•2/3/24, 8:35 PM

If you do

pnpm create cloudflare

pnpm create cloudflare

it will initialise a new Next.js project for you. In there, you will find commented out example usage of KV. You can uncomment this in

next.config.mjs

next.config.mjs

,

env.d.ts

env.d.ts

, and

app/api/hello/route.ts

app/api/hello/route.ts

. Then if you run your app, you will see it putting + getting with kv

SSuchACharles Working with nextjs 14 and added the bindings for D1, when I run next dev, It do...

J

James•2/3/24, 11:01 PM

There are a variety of commands you can run with wrangler for d1, such as migrations or executing sql. i would recommend using the d1-database channel if you want help with d1.

J

James•2/3/24, 11:12 PM

Yeah I'm afraid the miniflare bindings for next dev are only local and won't be able to connect to a remote database

Ggreends so hey there, how are you guys doing? is cloudflare pages compatible with next 1...

B

Befus•2/4/24, 10:06 AM

yes it is

W

webstorms•2/4/24, 10:07 AM

NextResponse.rewrite from middleware does not seem to render the page correctly, anyone else experience this too?

W

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

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

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

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

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

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

webstorms•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/...

when they exist at

scholarcrafter.com/_next/...

scholarcrafter.com/_next/...

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

W

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

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

A

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

Hey, are there any plans to support

revalidateTag

revalidateTag

and/or

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

? 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

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

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?

Does server actions works for anyone here? I am using Next 14.1.0 and all the server actions XHR req

Similar Threads