Cloudflare Developers•2y ago

Can you write your question please?

JJames getInitialProps can probably run on the server i imagine, so it will try to gene...

sathoro•1/27/24, 1:52 PM

the exceptions that should be getting logged are happening in the browser, but they seem to get swallowed up

JJames Can you write your question please?

drcolonel•1/27/24, 2:04 PM

My question is Do we use next api routes If we're creating next js application with cloudflare or we are using workers?!

JamesOP•1/27/24, 2:28 PM

Yes you use next.js API routes if you want to deploy a full stack next.js app to cloudflare

Ssathoro the exceptions that should be getting logged are happening in the browser, but t...

JamesOP•1/27/24, 2:30 PM

Would something like react-error-boundary help here perhaps?

JJames Yes you use next.js API routes if you want to deploy a full stack next.js app to...

drcolonel•1/27/24, 4:13 PM

What about workers what's the use case of it in Next js application, sorry If it seems basic questions but as I said I'm totally new to cloudflare

Ddrcolonel What about workers what's the use case of it in Next js application, sorry If it...

JamesOP•1/27/24, 5:25 PM

When you use

@cloudflare/next-on-pages

@cloudflare/next-on-pages

, it generates a worker that is deployed along with the static assets for your Pages project. That worker handles all incoming requests to your Next.js Pages project

JJames When you use `@cloudflare/next-on-pages`, it generates a worker that is deployed...

dev.Mohamed•1/27/24, 6:16 PM

i need to use Cloudflare API routes nested of next API routes, how to do it and access my end point inside functions directory

JamesOP•1/27/24, 6:25 PM

The functions directory doesn't work with next-on-pages as we generate our own worker for your route. You should be using next.js API routes if you're using next-on-pages

JJames The functions directory doesn't work with next-on-pages as we generate our own w...

dev.Mohamed•1/27/24, 6:29 PM

ok, should i add export const runtime = "edge" in the top level of my routes in next API routes to make it run on the edge servers

Ddev.Mohamed ok, should i add export const runtime = "edge" in the top level of my routes in ...

Deo Kumar•1/27/24, 6:37 PM

Yes, every api routes must have a export const runtime = "edge" in order to make it work on Cloudflare pages

JJames The functions directory doesn't work with next-on-pages as we generate our own w...

mohamed.adham•1/27/24, 6:37 PM

Does the Wrangler cli work in next-on-pages?

I create a project with next and cloudflare,
Added the wrangler.toml file in the root after installing Wrangler cli and trying to run the local host development server but it doesn't.
I use the command
Wrangler pages dev

DDeo Kumar Yes, every api routes must have a export const runtime = "edge" in order to make...

mohamed.adham•1/27/24, 6:38 PM

so in the next-on-pages we don't use the Functions directory for API routes nested we use Next API routes but adding at the top level
export const runtime="edge"

Mmohamed.adham so in the next-on-pages we don't use the Functions directory for API routes nest...

Deo Kumar•1/27/24, 6:40 PM

Yes, functions directory doesn't work when using next-on-pages.

Deo Kumar•1/27/24, 6:43 PM

It uses vercel to build your app and generates a _worker.js based on your routes if I am not wrong.

DDeo Kumar It uses vercel to build your app and generates a _worker.js based on your routes...

mohamed.adham•1/27/24, 6:44 PM

No I need to use cloudflare pages not vercel..
Explain it more please

DDeo Kumar It uses vercel to build your app and generates a _worker.js based on your routes...

mohamed.adham•1/27/24, 6:45 PM

You mean next-on-pages use vercel to build the app ?

mohamed.adham•1/27/24, 6:46 PM

So where is the cloudflare role in it ??
Just hosting ??

I tried to understand it from the documentation but I feel something is missing.

Mmohamed.adham No I need to use cloudflare pages not vercel.. Explain it more please

Deo Kumar•1/27/24, 6:47 PM

next-on-pages uses vercel-cli to build next.js application for the edge runtime and then do some extra tasks internally to make it compatible with Cloudflare pages.

DDeo Kumar next-on-pages uses vercel-cli to build next.js application for the edge runtime ...

mohamed.adham•1/27/24, 6:51 PM

so you mean when I use

npm create cloudflare@latest -- --framework=next

It uses vercel to build the project and make it compatible with cloudflare ??

Mmohamed.adham so you mean when I use npm create cloudflare@latest -- --framework=next It u...

Deo Kumar•1/27/24, 6:52 PM

GitHub

next-on-pages/packages/next-on-pages at main · cloudflare/next-on-p...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

mohamed.adham•1/28/24, 6:03 AM

Does wrangler work with 'next-on-pages' ??
or should I use the next localhost development server as usual

Mmohamed.adham Does wrangler work with 'next-on-pages' ?? or should I use the next localhost d...

Hello, I’m Allie!•1/28/24, 9:47 AM

It does work, in the sense that you can build your project then run it with Wrangler. But, if you want live changes to show up, run it with the

next

next

server

dev.Mohamed•1/28/24, 12:27 PM

when i'm trying to start development server with wrangler "wrangler pages dev" it gives me an error of static directory doesn't specified but I ensured that i build the application before and exported it's static to an Out directory and specified the out directory in the wrangler.toml file,

so can any one explain that to me?
or should I use next development server "npm run dev" nested of using wrangler?

Ddev.Mohamed when i'm trying to start development server with wrangler "wrangler pages dev" i...

Hello, I’m Allie!•1/28/24, 1:01 PM

You need to provide the output directory to the dev command, like so:

wrangler pages dev outdir

wrangler pages dev outdir

HHello, I’m Allie!You need to provide the output directory to the dev command, like so: ```sh wran...

dev.Mohamed•1/28/24, 2:20 PM

still have an error

Ddev.Mohamed still have an error

Hello, I’m Allie!•1/28/24, 2:27 PM

Rename the

wrangler.toml

wrangler.toml

so that wrangler doesn’t pick it up

HHello, I’m Allie!Rename the `wrangler.toml` so that wrangler doesn’t pick it up

dev.Mohamed•1/28/24, 2:29 PM

I renamed it but still same error

Ddev.Mohamed I renamed it but still same error

Hello, I’m Allie!•1/28/24, 2:29 PM

How about if you delete it?

HHello, I’m Allie!How about if you delete it?

dev.Mohamed•1/28/24, 2:32 PM

it gave me error of missing compatability date, should i add it to the command?

dev.Mohamed•1/28/24, 2:33 PM

another thing, where to define my bindings?

Ddev.Mohamed another thing, where to define my bindings?

Deo Kumar•1/28/24, 2:41 PM

In the command itself

DDeo Kumar In the command itself

mohamed.adham•1/28/24, 2:42 PM

What command I don't get it

Mmohamed.adham What command I don't get it

Deo Kumar•1/28/24, 2:43 PM

https://developers.cloudflare.com/pages/functions/bindings/

Bindings · Cloudflare Pages docs

A binding enables your Pages Functions to interact with resources on the Cloudflare developer platform. Use bindings to integrate your Pages Functions …

Deo Kumar•1/28/24, 2:47 PM

For

next dev

next dev

you can use
https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev

GitHub

next-on-pages/internal-packages/next-dev at main · cloudflare/next-...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

mohamed.adham•1/28/24, 2:49 PM

Yes, thanks

JJames When you use `@cloudflare/next-on-pages`, it generates a worker that is deployed...

mohamed.adham•1/28/24, 6:58 PM

@Hello, I’m Allie! @James

Can we use this worker to access the KV storage ??

Mmohamed.adham <@459755459117711362> <@94508156243161088> Can we use this worker to access th...

Hello, I’m Allie!•1/28/24, 7:15 PM

Yes

HHello, I’m Allie!Yes

mohamed.adham•1/28/24, 7:20 PM

How to access the KV storage with this worker from the next project.

Mmohamed.adham How to access the KV storage with this worker from the next project.

Hello, I’m Allie!•1/28/24, 7:27 PM

Check out the example: https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev#example

GitHub

next-on-pages/internal-packages/next-dev at main · cloudflare/next-...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

AAaronO Given how next-on-pages outputs a "worker"/"function" per route (roughly) is the...

Hello, I’m Allie!•1/28/24, 10:14 PM

They are actually all one Worker, though if you can add telemetry to the entire thing is outside my area of expertise

AAaronO Also is there a clear reason why `wrangler.toml` isn't supported at least in som...

Hello, I’m Allie!•1/28/24, 10:15 PM

As for the config thing, I believe they are working on something better atm, plus the merger of Workers and Pages

HHello, I’m Allie!They are actually all one Worker, though if you can add telemetry to the entire ...

Hello, I’m Allie!•1/28/24, 10:15 PM

Or well, each deployment is its own Worker, but all routes within a deployment are bundled into a single Worker

AAaronO Given how next-on-pages outputs a "worker"/"function" per route (roughly) is the...

JamesOP•1/29/24, 12:02 AM

There is only one entry point for the worker in the _worker.js directory. Feel free to wrap that entry point post-build if you want. I would advise against trying to wrap individual route functions or webpack chunks though, but wrapping the worker entrypoint should be perfectly fine.

nico•1/29/24, 1:04 PM

Google Search Console is getting on my nerves because I am using domain.eu and www.domain.eu for my on Cloudflare Pages hosted Next.js application. Is there a way to force www as a subdomain on Cloudflare Pages like on Vercel? I'm asking here because I think this is the place where the most expert answers my question.

const redirects = async () => {
  return [
    {
      source: '/:path*',
      destination: 'https://www.nicokempe.eu/:path*',
      permanent: true,
    },
  ]
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  images: {
    unoptimized: true
  },
  redirects,
}

const redirects = async () => {
  return [
    {
      source: '/:path*',
      destination: 'https://www.nicokempe.eu/:path*',
      permanent: true,
    },
  ]
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  images: {
    unoptimized: true
  },
  redirects,
}

I have already tried using the

_redirects

_redirects

file, but that changed nothing (no redirect). I have tried to put the file in my root-directory and of course (and initially) to my public directory.
My _redirects file in /public:

https://nicokempe.eu/* https://www.nicokempe.eu/:splat 301!

https://nicokempe.eu/* https://www.nicokempe.eu/:splat 301!

Any idea? The Google Search Console really gets on my nerves because of that domain...

carrot sticks•1/29/24, 1:12 PM

@nico
https://developers.cloudflare.com/rules/

carrot sticks•1/29/24, 1:16 PM

@nico if cloudflare are not managing your domain you should be able to do it through your provider

carrot sticks•1/29/24, 1:16 PM

Can you write your question please?

Similar Threads