If you're using Next.js API routes, you should be using `@cloudflare/next-on-pages` when building th

If you're using Next.js API routes, you should be using

@cloudflare/next-on-pages

@cloudflare/next-on-pages

when building the application, which builds a your Next.js app in a format that can be deployed as a full-stack app on Cloudflare Pages. There should be not be a separate worker from your Pages project if you're using Next.js API routes.

From the looks of things, that repo does not use Next.js API routes. It looks like it has a static Next.js app to deploy as it's own Pages project, and a separate API that is deployed as a worker that the static Next.js app makes API calls to. Looking at it, not sure I would recommend doing what they do if you wanted a full-stack Next.js app. That repo looks designed to have a separate place for your API, whereas if you wanted the API in the same place as everything else, you would be doing a full-stack Next.js app that should use next-on-pages.

In either case, I would suggest using one of the other help channels if you want to know about using the same subdomain for a workers project and a pages project, since this channel is specifically for next-on-pages related stuff.

JJames If you're using Next.js API routes, you should be using `@cloudflare/next-on-pag...

localλorse•12/31/23, 4:57 PM

ah ok, I hadn't heard of @cloudflare/next-on-pages before.. Does it work with the pages router or just with the app router way of structuring a nextjs app?

JamesOP•12/31/23, 4:58 PM

It works with both pages and app router

DDeo Kumar In next js build, wasm binaries are resolved by webpack when they are imported w...

Donnager•12/31/23, 6:31 PM

wow fascinating and had no idea, thank you again for the information sir!!

DDonnager wow fascinating and had no idea, thank you again for the information sir!!

Deo Kumar•12/31/23, 7:15 PM

I deployed it on Cloudflare pages

https://themes.fineshopdesign.com/api/image?url=%2Flogos%2Flogo-512x512.png&w=260&q=75&f=webp

Deo Kumar•12/31/23, 7:29 PM

Is it possible to access ExecutionContext in next js api route? So that I can call methods like ctx.waitUntil([promise]);

JamesOP•12/31/23, 8:13 PM

Still waiting on Dario's team to come to an agreement on how it should be exposed to devs

JJames Opt your route into the edge runtime and it will be SSR'd

Befus•12/31/23, 8:20 PM

How would I do this, im not really familiar

BBefus How would I do this, im not really familiar

JamesOP•12/31/23, 9:11 PM

https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#segment-runtime-option

JJLK T4 stack is also made by next-on-pages, which is utilized during deployment in t...

JamesOP•1/1/24, 3:11 AM

in that case, they should really consider moving the api routes into the nextjs app

DDeo Kumar I deployed it on Cloudflare pages https://themes.fineshopdesign.com/api/image?u...

Donnager•1/1/24, 5:48 AM

dude sickkkk, okay i def need to give this a go!

JJames https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-...

Befus•1/1/24, 10:27 AM

So I put edge runtime in my layout and in all my api routes, still no luck. It happens when I send a put request to update my date and then refresh to see the new results, its updated in the KV but not in my front end.

Befus•1/1/24, 10:27 AM

JamesOP•1/1/24, 10:53 AM

the following two scenarios come to mind

the kv data might not be being fetched and/or updated as you imagine
you have some sort of caching on your domain

Befus•1/1/24, 11:08 AM

import { FunctionComponent } from "react";
import AgendaAdminPage from "./AgendaAdminPage";
import { Package } from "@/types/package";
import { Calendar } from "@/types/calendar";

const Agenda: FunctionComponent = async () => {
  const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Calendar[];
  console.log(dates);

  const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Package[];
  console.log(packages);

  return <AgendaAdminPage dates={dates} packages={packages} />;
};

export default Agenda;

import { FunctionComponent } from "react";
import AgendaAdminPage from "./AgendaAdminPage";
import { Package } from "@/types/package";
import { Calendar } from "@/types/calendar";

const Agenda: FunctionComponent = async () => {
  const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Calendar[];
  console.log(dates);

  const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", {
    headers: {
      "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID,
      "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET,
    } as HeadersInit,
  })
    .then((res) => res.json())
    .catch((err) => console.log(err))) as Package[];
  console.log(packages);

  return <AgendaAdminPage dates={dates} packages={packages} />;
};

export default Agenda;

My fetching is like this, I'm not aware of any caching on my domain

BBefus ```tsx import { FunctionComponent } from "react"; import AgendaAdminPage from "....

JamesOP•1/1/24, 11:11 AM

Try putting

cache: 'no-store'

cache: 'no-store'

in your fetch. by default, nextjs tries to cache fetch requests

JamesOP•1/1/24, 11:11 AM

possible that may be the cause

JJames Try putting `cache: 'no-store'` in your fetch. by default, nextjs tries to cache...

Befus•1/1/24, 11:14 AM

That was it, thanks a lot!

Befus•1/1/24, 11:14 AM

Not really a fan of all the standard caching nextjs is doing

JamesOP•1/1/24, 11:17 AM

no worries, yeah, it catches some people out

subscriptions•1/2/24, 12:17 PM

This might be an old issue, but I deployed my next js site as static export with next on pages, when I refresh any dynamic route it's giving 404, is there any workaround to fix this?

Ssubscriptions This might be an old issue, but I deployed my next js site as static export with...

subscriptions•1/2/24, 4:03 PM

I have fixed this, in case anyone faces a similar issue I wrote an article here https://medium.com/@devakrishna33/eliminating-404-errors-on-dynamic-urls-with-cloudflares-next-on-pages-887c73ca649f

Medium

Eliminating 404 Errors on Dynamic URLs with Cloudflare’s ‘Next on P...

Cloudflare Pages is an efficient and affordable solution for developers to quickly deploy their static websites. It has a solution for…

Ssubscriptions I have fixed this, in case anyone faces a similar issue I wrote an article here ...

JamesOP•1/2/24, 4:14 PM

For what it's worth, that's not using next-on-pages if you're just deploying a static export.

@cloudflare/next-on-pages

@cloudflare/next-on-pages

generates a worker that would handle incoming requests to your app, and properly route requests to dynamic routes.

JJames For what it's worth, that's not using next-on-pages if you're just deploying a s...

subscriptions•1/2/24, 4:16 PM

I think we can still use _redirects with next-on-pages when SSR is not required for some routes.

Ssubscriptions I think we can still use _redirects with next-on-pages when SSR is not required ...

JamesOP•1/2/24, 4:20 PM

_redirects

_redirects

wouldn't work because the worker takes priority over the redirects in that file

mr nooli•1/3/24, 11:01 AM

Is anyone else running into a memory limit on large NextJS apps? pages-helpbuild exceeded memory limit (on a very large NextJS app)

mr nooli•1/3/24, 11:01 AM

is there any way to request more memory?

Mmr nooli Is anyone else running into a memory limit on large NextJS apps? https://discord...

Erisa•1/3/24, 11:22 AM

We're aware of other reports, if I remember correctly theres a github issue with next somewhere which had the root cause on it

Mmr nooli + is there any way to request more memory?

Erisa•1/3/24, 11:23 AM

If you're a paying customer you can submit a support ticket requesting that, making sure to mention the problem and the impact

mr nooli•1/3/24, 11:23 AM

I took a look at that but it mentioned that it could happen still for larger applications

mr nooli•1/3/24, 11:24 AM

I am paying for the workers plan but to submit a ticket it says I need to be on a business plan or higher (?)

Erisa•1/3/24, 11:24 AM

Should be Pro plan or higher for ticket, but theres also a certain threshold of Workers usage that allows you to submit one anyway (the default $5 is not enough)

mr nooli•1/3/24, 11:25 AM

Ah well then I’m a bit stuck now

Erisa•1/3/24, 11:25 AM

I think your only other option is https://forms.gle/ukpeZVLWLnKeixDu7 but I'm not sure on the timeline for a response on those

Google Docs

Cloudflare Developer Platform: Limit Increase Request Form

Want to increase the limits of your current plan? Let us know what your requirements are here.

mr nooli•1/3/24, 11:26 AM

Cheers for that, I’ll submit a ticket

Mmr nooli Is anyone else running into a memory limit on large NextJS apps? https://discord...

Village (Josef)•1/3/24, 3:01 PM

Yup, I’m currently paying for GitHub Actions large runners because I need at least 16GB, maybe even 32GB because Next doesn’t know how to use memory efficiently

JJames `_redirects` wouldn't work because the worker takes priority over the redirects ...

subscriptions•1/3/24, 4:18 PM

ok thank you

VVillage (Josef)Yup, I’m currently paying for GitHub Actions large runners because I need at lea...

subscriptions•1/3/24, 4:19 PM

If you have experience with AWS you can setup self hosted runners using this https://github.com/philips-labs/terraform-aws-github-runner, it's pretty cheap if you use spot instances

Village (Josef)•1/3/24, 4:21 PM

I’ll take a look, but at the moment GitHub just takes care of it and I pay a couple cents every build so I’m happy

mr nooli•1/3/24, 4:24 PM

Oh fr @Village (Josef) ? Have you got a link to setting up GH actions w/ CF and NextJS? - I don't have too much experience working on CI platforms so might be a bit of a challenge for me

mr nooli•1/3/24, 4:26 PM

cos realistically I push like 10-20 times a week (depending on how busy I am) so I've had to start looking into setting up NextJS on AWS w/ OpenNext although I'm running into a bunch of issues there too

Village (Josef)•1/3/24, 4:45 PM

Yeah, the hardest part was just that I had to sign up for GitHub Team, then get a runner working

Village (Josef)•1/3/24, 4:45 PM

There's a hidden button somewhere to run large runners on public repos I didn't know about so I spent like an hour trying to figure out why my runner wasn't working

Village (Josef)•1/3/24, 4:46 PM

After that it was really easy, I just set up the following workflow file and it works like a charm! (NODE_OPTIONS is just set up to give it a higher memory limit)

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

name: Deploy Production

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: pages-build
    name: Deploy
    steps:
      - uses: actions/checkout@v3
      - name: Build
        shell: bash
        run: npm ci && npm run pages:build
        env:
          NODE_OPTIONS: ${{ vars.NODE_OPTIONS }}
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

mr nooli•1/3/24, 4:47 PM

Ah can you not use github actions on a free org account?

Bram•1/3/24, 6:44 PM

pfff, have been debugging for an hour why my binding was undefined (local dev with next-devnext-dev package). Turns out I was calling a server action from a page where I forgot to set the runtime to "edge"...

I wish there was a way to set the default edge runtime to edge instead of nodejs....

mr nooli•1/3/24, 7:33 PM

@Bram you can - depending on what you need just mark the root layout file as edge and everything above it will automatically use the edge runtime

import { FunctionComponent } from "react"; import AgendaAdminPage from "./AgendaAdminPage"; import { Package } from "@/types/package"; import { Calendar } from "@/types/calendar"; const Agenda: FunctionComponent = async () => { const dates = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/agenda", { headers: { "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID, "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET, } as HeadersInit, }) .then((res) => res.json()) .catch((err) => console.log(err))) as Calendar[]; console.log(dates); const packages = (await fetch(process.env.NEXT_PUBLIC_HOST + "/api/package", { headers: { "CF-Access-Client-Id": process.env.CF_ACCESS_CLIENT_ID, "CF-Access-Client-Secret": process.env.CF_ACCESS_CLIENT_SECRET, } as HeadersInit, }) .then((res) => res.json()) .catch((err) => console.log(err))) as Package[]; console.log(packages); return <AgendaAdminPage dates={dates} packages={packages} />; }; export default Agenda;

name: Deploy Production on: push: branches: - master jobs: deploy: runs-on: pages-build name: Deploy steps: - uses: actions/checkout@v3 - name: Build shell: bash run: npm ci && npm run pages:build env: NODE_OPTIONS: ${{ vars.NODE_OPTIONS }} - name: Deploy uses: cloudflare/wrangler-action@v3 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} command: pages deploy .vercel/output/static --project-name=PROJECT_NAME_HERE

If you're using Next.js API routes, you should be using `@cloudflare/next-on-pages` when building th

Similar Threads

Similar Threads

Similar Threads