thanks CJ, I don't suppose there's a manual way to expire it in the meantime? - Cloudflare Developers

© 2026 Hedgehog Software, LLC

More

Communities Docs About Terms Privacy

Matt

MMatt thanks CJ, I don't suppose there's a manual way to expire it in the meantime?

C

cj•5/4/24, 8:07 AM

Time fixes everything

Frontline Genesis

F

Frontline Genesis•5/4/24, 12:03 PM

Hi everyone, I think this is the right place to post this. I'm currently in the process or migrating from Vercel to Pages, and everything has going super smooth so far, apart from Image optimization. I use the /cdn-cgi custom loader from the dev docs:

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

but all optimized images return a 404 (example below)

source image (works fine):

https://summit7-media.pages.dev/splash.png

https://summit7-media.pages.dev/splash.png

optimized image (404 error):

https://summit7-media.pages.dev/cdn-cgi/image/width=96/splash.png

https://summit7-media.pages.dev/cdn-cgi/image/width=96/splash.png

is there anything I am doing wrong here? Any and all help appreciated!

Frontline Genesis

FFrontline Genesis Hi everyone, I think this is the right place to post this. I'm currently in the ...

Nob

N

Nob•5/4/24, 12:46 PM

you can't use image optimization with pages.dev pages

Nob

N

Nob•5/4/24, 12:47 PM

its only with your domain

Nob

NNob you can't use image optimization with pages.dev pages

Frontline Genesis

F

Frontline Genesis•5/4/24, 1:02 PM

Oh right, thanks

Ccj Time fixes everything

Matt

M

MattOP•5/4/24, 6:27 PM

12 hrs later and my icon has no changed

why has time forsaken me?

Matt

MMatt 12 hrs later and my icon has no changed 😦 why has time forsaken me?

Frontline Genesis

F

Frontline Genesis•5/4/24, 7:42 PM

Add ?v=2 to the end for the time being, should get browser's to refetch it. The new path should be /favicon.ico?v=2

bun

B

bun•5/4/24, 9:01 PM

anyone using baselime with next-on-pages? if so, how?

James

J

James•5/4/24, 9:28 PM

nope

whois | API man

W

whois | API man•5/4/24, 9:45 PM

Hello! Someone told me it would be best to ask over here.

Would Dynamic Routing and Text Animations consume my daily CF Pages requests?

whois | API man

W

whois | API man•5/4/24, 9:46 PM

I could ask about using gifs but I think if I add them to my public directory it won’t affect

James

J

James•5/4/24, 9:50 PM

i'm not sure i understand what you're asking

James

J

James•5/4/24, 9:50 PM

it depends on how many requests your site gets

Walshy

W

Walshy•5/4/24, 9:51 PM

an animation shouldn't use any server-side stuff, sounds like regular css so no, doesn't use any Function requests

Walshy

W

Walshy•5/4/24, 9:51 PM

Dynamic routing depends on the framework, can be done client-side or server-side

Walshy

W

Walshy•5/4/24, 9:52 PM

If it's done server-side (so with Functions) then yes it would consume Function requestions

Walshy

WWalshy Dynamic routing depends on the framework, can be done client-side or server-side

whois | API man

W

whois | API man•5/4/24, 9:52 PM

Well… it would be NextJs lol

James

J

James•5/4/24, 9:52 PM

They're likely referring to dynamic routes, which would involve hitting the worker

Walshy

W

Walshy•5/4/24, 9:53 PM

i missed this being the next-on-pages channel

Walshy

WWalshy i missed this being the next-on-pages channel

whois | API man

W

whois | API man•5/4/24, 9:53 PM

ye lol…

Walshy

W

Walshy•5/4/24, 9:53 PM

Yeah, I think everything in next-on-pages is classed as server-side

Walshy

WWalshy Yeah, I think everything in next-on-pages is classed as server-side

whois | API man

W

whois | API man•5/4/24, 9:54 PM

Oh, so then for dynamic routing I must setup workers

James

J

James•5/4/24, 9:55 PM

@cloudflare/next-on-pages

@cloudflare/next-on-pages

creates the worker that is deployed to your Pages project for you

James

JJames `@cloudflare/next-on-pages` creates the worker that is deployed to your Pages pr...

whois | API man

W

whois | API man•5/4/24, 9:55 PM

I think I don’t have that yet… somehow my web is deployed without using that…

whois | API man

W

whois | API man•5/4/24, 9:56 PM

I will still know how to use it and implement it

James

JJames `@cloudflare/next-on-pages` creates the worker that is deployed to your Pages pr...

whois | API man

W

whois | API man•5/4/24, 9:56 PM

So basically I need to add it to my dynamic route file? “file/[id].tsx”?

James

J

James•5/4/24, 9:57 PM

No, it's a tool that you can use when building your app. It's typically used as part of the build command in your Pages project settings

James

JJames No, it's a tool that you can use when building your app. It's typically used as ...

whois | API man

W

whois | API man•5/4/24, 9:58 PM

Oh so then I don’t have to add anything?

whois | API man

W

whois | API man•5/4/24, 9:58 PM

It is automatic?

James

J

James•5/4/24, 9:59 PM

It depends on if you chose the Next.js option when creating your Pages project. You can go to your project -> settings -> build & deployments -> build configuration to check your build command

James

JJames It depends on if you chose the Next.js option when creating your Pages project. ...

whois | API man

W

whois | API man•5/4/24, 10:06 PM

Well uhh my build command is npx @cloudflare/next-on-pages@1

James

J

James•5/4/24, 10:06 PM

Then it should be all good

florent

F

florent•5/5/24, 2:20 PM

Do filesystem packages like

fast-glob

fast-glob

work on next-on-pages?

James

J

James•5/5/24, 2:41 PM

the node fs module will not work on workerd

James

J

James•5/5/24, 2:42 PM

so if it interacts with the filesystem, it wont work

bun

Bbun anyone using baselime with next-on-pages? if so, how?

vmg

V

vmg•5/6/24, 4:02 AM

How do i get this github action to deploy to production instead of preview?

name: Deploy
on:
  push:
    branches:
      - 'releases/**'
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      #
      # Build web app
      #
      - name: Build web
        run: pnpm run pages:build
      #
      # Deploy to Cloudflare Pages
      #
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: project-name
          directory: .vercel/output/static
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

name: Deploy
on:
  push:
    branches:
      - 'releases/**'
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      #
      # Build web app
      #
      - name: Build web
        run: pnpm run pages:build
      #
      # Deploy to Cloudflare Pages
      #
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: project-name
          directory: .vercel/output/static
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

vmg

Vvmg How do i get this github action to deploy to production instead of preview? ```...

bun

B

bun•5/6/24, 7:46 AM

First, you swap out pnpm with bun, then idk? Seems to be right

James

JJames so if it interacts with the filesystem, it wont work

florent

F

florent•5/6/24, 8:52 AM

so anything that uses

fs

fs

does not work within cloudflare pages?

florent

Fflorent so anything that uses `fs` does not work within cloudflare pages?

James

J

James•5/6/24, 10:23 AM

correct, next.js won't actually let you build if you're trying to use fs and using the edge runtime.

James

JJames correct, next.js won't actually let you build if you're trying to use fs and usi...

florent

F

florent•5/6/24, 10:56 AM

tysm!

whois | API man

W

whois | API man•5/6/24, 7:02 PM

Would it be a problem if I want to deploy a site that uses NextJs and Python?

vmg

V

vmg•5/6/24, 8:38 PM

I'm starting a greenfield project and am wondering if it makes sense to use api routes in nextjs when i could just use the functions directory which seems to have better first class support with bindings and cloudflare compatible libraries. Does anyone have an opinion on this?

vmg

Vvmg I'm starting a greenfield project and am wondering if it makes sense to use api ...

Hello, I’m Allie!

H

Hello, I’m Allie!•5/6/24, 8:44 PM

next-on-pages disables the Functions directory, so you should go with the API Routes

whois | API man

Wwhois | API man Would it be a problem if I want to deploy a site that uses NextJs and Python?

James

J

James•5/6/24, 9:07 PM

how would you use python in nextjs?

Original message was deleted

James

J

James•5/6/24, 9:08 PM

Have you tried creating your table? If this is when deployed, make sure you run your migrations against the remote DB. If this is local, make sure you run your migrations against your local db

James

JJames how would you use python in nextjs?

whois | API man

W

whois | API man•5/6/24, 9:09 PM

Python as backend

whois | API man

W

whois | API man•5/6/24, 9:09 PM

Well, not the whole backend

whois | API man

W

whois | API man•5/6/24, 9:09 PM

But part of it

James

J

James•5/6/24, 9:11 PM

But Next.js needs to run in a javascript environment so I'm not sure how that could work if you wanted to deploy them to the same worker. They'd need to be separate

James

JJames But Next.js needs to run in a javascript environment so I'm not sure how that co...

whois | API man

W

whois | API man•5/6/24, 10:32 PM

alr…

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;
};

export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};

name: Deploy
on:
  push:
    branches:
      - 'releases/**'
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      #
      # Build web app
      #
      - name: Build web
        run: pnpm run pages:build
      #
      # Deploy to Cloudflare Pages
      #
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: project-name
          directory: .vercel/output/static
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

name: Deploy
on:
  push:
    branches:
      - 'releases/**'
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      #
      # Build web app
      #
      - name: Build web
        run: pnpm run pages:build
      #
      # Deploy to Cloudflare Pages
      #
      - name: Publish
        uses: cloudflare/pages-action@1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: project-name
          directory: .vercel/output/static
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}