guys do cloudflare support dynamic page

guys do cloudflare support dynamic page like "app/profile/[id]"? Here is the code for that dynamic page's page.tsx

export const runtime = 'edge';

const UserProfilePage = () => {
  return <div className='px-6 text-primary-foreground'>User Profile Page</div>;
};

export default UserProfilePage;

export const runtime = 'edge';

const UserProfilePage = () => {
  return <div className='px-6 text-primary-foreground'>User Profile Page</div>;
};

export default UserProfilePage;

And i am getting

Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

this error in cloudflare deployment build. Here is the provider that is wrapping the main layout.tsx file

 'use client';

import { Theme } from '@radix-ui/themes';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'next-themes';
import React from 'react';

const Provider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false,
            retry: false,
            staleTime: 60 * 1000,
          },
        },
      })
  );
  return (
    <ThemeProvider
      attribute='class'
      defaultTheme='system'
      enableSystem
      disableTransitionOnChange
    >
      <Theme appearance='inherit'>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </Theme>
    </ThemeProvider>
  );
};

export default Provider;

 'use client';

import { Theme } from '@radix-ui/themes';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'next-themes';
import React from 'react';

const Provider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false,
            retry: false,
            staleTime: 60 * 1000,
          },
        },
      })
  );
  return (
    <ThemeProvider
      attribute='class'
      defaultTheme='system'
      enableSystem
      disableTransitionOnChange
    >
      <Theme appearance='inherit'>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </Theme>
    </ThemeProvider>
  );
};

export default Provider;

2 Replies

James•13mo ago

Yes, dynamic pages work fine. Your error is from your worker being bigger than the free tier's 1mb limit. Note that the limit is higher for Workers paid ($5/mo). If you look in the .vercel/output/static/_worker.js directory after building your application locally, you will get an idea of what builds up your site's worker. This would be a good place to start to figure out what's taking up so much space. Please can you do a build using the latest beta release of next-on-pages - npx @cloudflare/next-on-pages@beta and send the nop-build-log.json file located at .vercel/output/static/_worker.js/nop-build-log.json, and we can try and figure out together what's taking up so much space in your worker?

simpson•13mo ago

It works great for us, mind you a lot of apps even small if not optimized will be over 1mb

Gaming

Programming

guys do cloudflare support dynamic page