How can I interact with my production R2 buckets from next-on-pages? I need a way to upload an image

SSeeringPhil ^ Anyone familiar with using the suspense cache (*basic fetch request caching, c...

N

Nob•4/11/24, 9:20 PM

you can't cache request at build time for ssr

N

Nob•4/11/24, 9:21 PM

and wdym by "static pages", its not possible to have both static pages and ssr on same project

NNob and wdym by "static pages", its not possible to have both static pages and ssr o...

S

SeeringPhil•4/11/24, 9:46 PM

We have that working fine right now, so yes, I'm pretty sure it's possible to have some of our routes render pages statically and some other routes be SSR!

The pages we built statically do not call the workers and simply serve what was rendered at build time, while pages using the edge runtime are SSRd just fine! (well, except for the issue I'm tackling right now regarding the sharing of data

)

NNob and wdym by "static pages", its not possible to have both static pages and ssr o...

J

James•4/11/24, 10:04 PM

it is. only routes marked as edge runtime will be SSR. other routes will be prerendered at build time.

Tthipperz How can I interact with my production R2 buckets from next-on-pages? I need a wa...

一

一块木头•4/12/24, 12:51 AM

This https://dub.co/blog/image-hosting-r2

Building a Scalable & Affordable Image Hosting Pipeline with Cloudf...

We recently migrated our image hosting from Cloudinary to Cloudflare R2. This post details the reasons behind the switch, the pros and cons of Cloudflare R2, and how we implemented it in our codebase.

K

Kaze•4/12/24, 12:52 AM

Hello! Is there any special configuration to run a fullstack application (with some pages on the server) on cloudflare? Everything is well installed, but when entering the web everything is black

JJames `.vercel/output/static`

一

一块木头•4/12/24, 12:52 AM

Can you take a look at my problem? I saw that other people have encountered the same problem https://github.com/cloudflare/next-on-pages/issues/740

GitHub

[🐛 Bug]: nextjs local preview succeeded, deployment succeeded, but ...

next-on-pages environment related information System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64 CPU: (16) x...

一一块木头 Can you take a look at my problem? I saw that other people have encountered the ...

J

James•4/12/24, 5:54 AM

i would recommend posting in pages-help or creating a support ticket. it will probably need an employee to check your deployment's logs to see if there is something going wrong there. it's possible your worker bundle might be too big for your plan (e.g. 1mb on workers/pages free)

JJames it is. only routes marked as edge runtime will be SSR. other routes will be prer...

N

Nob•4/12/24, 9:20 AM

are you sure ?
I get this error when not adding edge to routes
ERROR: Failed to produce a Cloudflare Pages build from the project.
12:27:51.712

12:27:51.712

The following routes were not configured to run with the Edge Runtime:
12:27:51.712

/ark-survival-ascended
12:27:51.712
12:27:51.713 Please make sure that all your non-static routes export the following edge runtime route segment config:
12:27:51.713 export const runtime = 'edge';
12:27:51.713
12:27:51.713 You can read more about the Edge Runtime on the Next.js documentation:
12:27:51.713 https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

Rendering: Edge and Node.js Runtimes | Next.js

Learn about the switchable runtimes (Edge and Node.js) in Next.js.

NNob are you sure ? I get this error when not adding edge to routes ERROR: Failed to...

T

thanhle•4/12/24, 1:10 PM

yes. only edge route will have ssr, other route will be static prerendering at build time. you can check the static rendered page on .vercel output dir

NNob are you sure ? I get this error when not adding edge to routes ERROR: Failed to...

S

SeeringPhil•4/12/24, 1:10 PM

"

Please make sure that all your non-static routes export the following edge runtime route segment config:"

^ The error is stating that you are trying to render a dynamic page statically, that's what isn't working

SSeeringPhil "⚡️ Please make sure that all your *non-static routes* export the following edge...

N

Nob•4/12/24, 1:58 PM

that page is static

N

Nob•4/12/24, 1:59 PM

export default async function Page() {
    return (
        <div
            className={
                "flex flex-col justify-center items-center min-h-screen py-2 w-full"
            }
        >
            test
        </div>
    );
}

export default async function Page() {
    return (
        <div
            className={
                "flex flex-col justify-center items-center min-h-screen py-2 w-full"
            }
        >
            test
        </div>
    );
}

export default async function Page() {
    return (
        <div
            className={
                "flex flex-col justify-center items-center min-h-screen py-2 w-full"
            }
        >
            test
        </div>
    );
}

export default async function Page() {
    return (
        <div
            className={
                "flex flex-col justify-center items-center min-h-screen py-2 w-full"
            }
        >
            test
        </div>
    );
}

P

paulc•4/12/24, 2:04 PM

does anyone have authjs sample code working using the app/api/auth/[...nextauth] approach you can point to? When I deploy to pages and view the site I get nextjs' 500 internal server error page .

K

Kaze•4/12/24, 2:39 PM

hi all!

K

Kaze•4/12/24, 2:39 PM

I have a problem with @cloudflare/next-on-pages CLI

K

Kaze•4/12/24, 2:40 PM

When I try to run "npm run deploy" this message appears:

Warning: It seems like you're on a Windows system, the Vercel CLI (run by @cloudflare/next-on-pages

to build your application) seems not to work reliably on Windows so if you experience issues during

the build process please try switching to a different operating system or running

@cloudflare/next-on-pages under the Windows Subsystem for Linux

K

Kaze•4/12/24, 2:40 PM

then a bash terminal opens, and I run again the "npm run deploy" and again, the same message and opens again a new bash terminal

K

Kaze•4/12/24, 2:40 PM

an so on

K

Kaze•4/12/24, 2:40 PM

is there a solution for this? thanks for the help!

P

paulc•4/12/24, 2:49 PM

Install WSL https://learn.microsoft.com/en-us/windows/wsl/install

Install WSL

Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine, and more are available.

P

paulc•4/12/24, 2:50 PM

It's reliable and if you're familiar with linux, is very close experience to working in a linux environment.

Ppaulc 👋 does anyone have authjs sample code working using the app/api/auth/[...nexta...

J

James•4/12/24, 4:50 PM

Are you using v5 of next-auth, which is currently under next-auth@beta?

JJames Are you using v5 of next-auth, which is currently under next-auth@beta?

P

paulc•4/12/24, 5:13 PM

Yes - next-auth@5.0.0-beta.16 to be exact.

Ppaulc 👋 does anyone have authjs sample code working using the app/api/auth/[...nexta...

O

oreq•4/12/24, 8:26 PM

Hi, use this command to see error

npx wrangler pages deployment tail

npx wrangler pages deployment tail

O

oreq•4/12/24, 8:32 PM

Have any of you used next-auth with middleware on next-on-pages without error? I'm trying to do that and everything works good on

npm run dev

npm run dev

but when I try to start it with

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static",

"preview": "npm run pages:build && wrangler pages dev .vercel/output/static",

req.auth starts be always null and I don't know why because I don't getting any error.

middleware.ts

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

import { NextResponse } from "next/server"

import { auth } from "./auth"

export default auth((req) => {
  const isAuth = req.auth // always returning null when it is run on wrangler pages dev

I use drizzle orm with d1 for database

J

James•4/12/24, 9:09 PM

What is req.auth and why are you trying to modify the request object?

J

James•4/12/24, 9:10 PM

Is what you're trying to do modify the request object in the middleware and trying to access that extra property in a route?

JJames What is req.auth and why are you trying to modify the request object?

O

oreq•4/12/24, 9:44 PM

req.auth is user session and

auth((req) => {

auth((req) => {

is wrapper for middleware from next-auth v5 that looks something like this under the hood

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

import { NextResponse } from "next/server"

import { auth } from "./auth"

export async function middleware(req: NextResponse) {
  const session = await auth()

this code too doesn't give me user session on wrangler pages dev

I'm trying to redirect user based on his session.

J

James•4/12/24, 9:54 PM

ah I've found the syntax in the docs now. interesting, this is the first time I'm seeing it - it looked like something custom at first!

J

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

if that's not giving you a user session, I would query whether there is an active user session, or whether something is misconfigured

Ooreq req.auth is user session and `auth((req) => {` is wrapper for middleware from ne...

T

thipperzOP•4/12/24, 11:44 PM

Is that

req: NextResponse

req: NextResponse

supposed to be like that? (maybe you meant

(req) : NextResponse

(req) : NextResponse

)

T

thipperzOP•4/12/24, 11:49 PM

my middleware looks like this but I'm not using any adapters:

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

import { NextResponse } from 'next/server'
import { auth } from './auth'
export default auth((req) => {
    const isAuthenticated = !!req.auth

    if (isAuthenticated && req.nextUrl.pathname.startsWith(/* */)) {

        return NextResponse.redirect(/* */)
    }
})

Ppaulc Install WSL https://learn.microsoft.com/en-us/windows/wsl/install

K

Kaze•4/13/24, 2:32 AM

I already have WSL installed, but when I run the cloudflare cli command on my linux system this message appears: "CMD.EXE was started with this path as the current directory. UNC paths are not allowed.
UNC paths are not allowed. Defaults back to the Windows directory."

K

Kaze•4/13/24, 2:33 AM

And everything stays stuck for a few seconds until it continues, but it's as if the command is still running by default in windows

K

Kaze•4/13/24, 2:37 AM

because this error: Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Windows\package.json'

K

Kaze•4/13/24, 2:55 AM

Fixed: I need to reinstall node in WSL, otherwise WSL will use the npm installed on Windows and that causes an error

Ooreq Hi, use this command to see error `npx wrangler pages deployment tail`

P

paulc•4/13/24, 3:53 AM

Thanks for the tip! wrangler tail tells me I'm missing AUTH_SECRET. However, I put it in the environment using wrangler secret. Am guessing nextjs doesn't know to look there. Any idea on where AUTH_SECRET should be stored on cloudflare pages?

F

faye•4/13/24, 12:37 PM

Heyo!

It seems that using 14.2.1 (so far I know), I am suddenly getting a weird error.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented.

Error: The 'cache' field on 'RequestInitializerDict' is not implemented.

, when googling this, I found some supabase stuff, which I don't use.

However, my code contains a fetch on the page, which is for example:

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/v1/databases/hp_db/collections/userdata/documents`,
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Appwrite-Project': `${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`,
        'X-Appwrite-Response-Format': '1.4.0',
      },
      cache: 'no-cache',
    }
  )

The issue here, is the

cache

cache

part, if I remove it, it works fine. What's wrong with the no-cache? Is there a reason why it suddenly does not work anymore?

F

faye•4/13/24, 12:40 PM

Using the

appwrite

appwrite

sdk, I am also getting:

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

F

faye•4/13/24, 12:45 PM

Seems to be the same issue on 14.1.3 :/

Ooreq Have any of you used next-auth with middleware on next-on-pages without error? I...

O

oreq•4/13/24, 12:47 PM

I can't get user in api routes in preview too but on local works

Edit:
I added

  useSecureCookies: process.env.NODE_ENV === "development" ? false : true,

  useSecureCookies: process.env.NODE_ENV === "development" ? false : true,

to next-auth config and now everyting works

O

oreq•4/13/24, 1:08 PM

it works on deployment but doesn't on local build

Ffaye Heyo! It seems that using 14.2.1 (so far I know), I am suddenly getting a weird...

T

thanhle•4/13/24, 1:57 PM

try to use cache:no-store instead.

Tthanhle try to use cache:no-store instead.

F

faye•4/13/24, 2:00 PM

Then there's also the appwrite SDK, which looks like this:

T

thanhle•4/13/24, 2:02 PM

the reason here Worker detect the cache in the request. if you dont set the cache it will failed.

F

faye•4/13/24, 2:02 PM

But for the appwrite sdk, I get this error:

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

Error: The 'credentials' field on 'RequestInitializerDict' is not implemented.

F

faye•4/13/24, 2:02 PM

Does that still have to do with the cache store?

Ppaulc Thanks for the tip! wrangler tail tells me I'm missing AUTH_SECRET. However, I p...

P

paulc•4/13/24, 2:56 PM

Got the issue fixed - boiled down to me thinking I could use $ wrangler secret put to create secrets in cloudflare pages

. My secret for authjs didn't exist in production env. Had to manually add. cc @James

N

neoney•4/13/24, 3:04 PM

my dev server often times seems to lag behind the actual code after I fix an issue and doesn't wanna work until I restart it

How can I interact with my production R2 buckets from next-on-pages? I need a way to upload an image

Similar Threads

Similar Threads

Similar Threads