I'm starting a greenfield project and am wondering if it makes sense to use api routes in nextjs whe

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

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

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

J

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

how would you use python in nextjs?

Original message was deleted

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

JJames how would you use python in nextjs?

W

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

Python as backend

W

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

Well, not the whole backend

W

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

But part of it

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

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

W

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

alr…

W

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

Well uhh

W

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

It’s not like the whole NextJs project will be Python

W

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

Only a small folder

W

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

And it works as an API

W

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

which means I fetch the data from the Python files to the js framework

J

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

yeah not sure how you'd run that

P

preett•5/7/24, 3:06 AM

My next js website works with pages.dev domain but it's not working in custom domain what the hell

P

preett•5/7/24, 3:06 AM

K

kalaivanan•5/7/24, 8:21 AM

I'm trying to user D1 with drizzle orm in next js, currently using next auth 5, and using drizzle adapter for that.. How to get the DB instance during build?
export const {
handlers: { GET, POST },
auth,
signIn,
signOut,
} = NextAuth({
adapter: DrizzleAdapter(getDBInstance()),
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID ?? "",
clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
}),
],
});

This is method to get db instance

export const getDBInstance = () => {
console.log("getRequestContext", getRequestContext);

const DB = getRequestContext().env.AI_FORM_GENERATOR_DB;

return drizzle(DB, { schema });
};

How to get access to Binding variable AI_FORM_GENERATOR_DB during build process?

K

kian•5/7/24, 8:24 AM

You can't, the build process is just a Ubuntu container separate to Workers/Pages. You'd need to hit the D1 REST API or make your own Worker that serves as an API.

Kkian You can't, the build process is just a Ubuntu container separate to Workers/Page...

H

Hello, I’m Allie!•5/7/24, 8:25 AM

Clarifying from the thread in No Access, they appear to be calling this within the scope of a Next route, but for some reason it still tries to call it at build time

K

kalaivanan•5/7/24, 8:42 AM

Its works in dev environment, but when I try build and deploy it fails on this point

K

Kyzer•5/7/24, 11:20 AM

src/types/cloudflare-env.ts

interface CloudflareEnv {
  DB: D1Database;
}

interface CloudflareEnv {
  DB: D1Database;
}

interface CloudflareEnv {
  DB: D1Database;
}

interface CloudflareEnv {
  DB: D1Database;
}

src/db/db-connection.ts

import { D1Database } from "@cloudflare/workers-types";
import { drizzle } from "drizzle-orm/d1";
import { getRequestContext } from "@cloudflare/next-on-pages";

export const db = drizzle(
  process.env.NODE_ENV === "development"
    ? getRequestContext().env.DB
    : (process.env as unknown as CloudflareEnv).DB,
);

import { D1Database } from "@cloudflare/workers-types";
import { drizzle } from "drizzle-orm/d1";
import { getRequestContext } from "@cloudflare/next-on-pages";

export const db = drizzle(
  process.env.NODE_ENV === "development"
    ? getRequestContext().env.DB
    : (process.env as unknown as CloudflareEnv).DB,
);

import { D1Database } from "@cloudflare/workers-types";
import { drizzle } from "drizzle-orm/d1";
import { getRequestContext } from "@cloudflare/next-on-pages";

export const db = drizzle(
  process.env.NODE_ENV === "development"
    ? getRequestContext().env.DB
    : (process.env as unknown as CloudflareEnv).DB,
);

import { D1Database } from "@cloudflare/workers-types";
import { drizzle } from "drizzle-orm/d1";
import { getRequestContext } from "@cloudflare/next-on-pages";

export const db = drizzle(
  process.env.NODE_ENV === "development"
    ? getRequestContext().env.DB
    : (process.env as unknown as CloudflareEnv).DB,
);

src/auth.js

import NextAuth, { type DefaultSession } from "next-auth";
import AzureAD from "next-auth/providers/azure-ad";
import { NextResponse } from "next/server";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { db } from "@/db/db-connection";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  secret: process.env.NEXTAUTH_SECRET as string,
  trustHost: true,
  session: {
    strategy: "database",
  },
  adapter: DrizzleAdapter(db),
  providers: [
    //...provider stuff
  ],
  callbacks: {
    //...callback stuff
  },
});

import NextAuth, { type DefaultSession } from "next-auth";
import AzureAD from "next-auth/providers/azure-ad";
import { NextResponse } from "next/server";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { db } from "@/db/db-connection";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  secret: process.env.NEXTAUTH_SECRET as string,
  trustHost: true,
  session: {
    strategy: "database",
  },
  adapter: DrizzleAdapter(db),
  providers: [
    //...provider stuff
  ],
  callbacks: {
    //...callback stuff
  },
});

import NextAuth, { type DefaultSession } from "next-auth";
import AzureAD from "next-auth/providers/azure-ad";
import { NextResponse } from "next/server";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { db } from "@/db/db-connection";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  secret: process.env.NEXTAUTH_SECRET as string,
  trustHost: true,
  session: {
    strategy: "database",
  },
  adapter: DrizzleAdapter(db),
  providers: [
    //...provider stuff
  ],
  callbacks: {
    //...callback stuff
  },
});

import NextAuth, { type DefaultSession } from "next-auth";
import AzureAD from "next-auth/providers/azure-ad";
import { NextResponse } from "next/server";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { db } from "@/db/db-connection";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  secret: process.env.NEXTAUTH_SECRET as string,
  trustHost: true,
  session: {
    strategy: "database",
  },
  adapter: DrizzleAdapter(db),
  providers: [
    //...provider stuff
  ],
  callbacks: {
    //...callback stuff
  },
});

K

Kyzer•5/7/24, 11:21 AM

That works for me @kalaivanan, using next-on-pages, auth.js v5, D1, drizzle orm

K

kalaivanan•5/7/24, 2:35 PM

Awesome

@Kyzer

J

jo1tar0•5/7/24, 2:54 PM

anyone got reacthottoast source

N

Nextify•5/7/24, 3:26 PM

process.env.HYPERDRIVE.connectionString can't get value in next-on-page ,any recommendations ？

R

Rabid•5/7/24, 3:50 PM

Anyone ever have this problem with next on pages?

09:47:38.194    ⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
09:47:38.194    ⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
09:47:38.194    ⚡️ Build completed in 2.80s
09:47:38.257    Finished
09:47:38.257    Note: No functions dir at /functions found. Skipping.
09:47:38.257    Validating asset output directory
09:47:38.258    Error: Output directory " .vercel/output/static" not found.
09:47:39.593    Failed: build output directory not found

09:47:38.194    ⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
09:47:38.194    ⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
09:47:38.194    ⚡️ Build completed in 2.80s
09:47:38.257    Finished
09:47:38.257    Note: No functions dir at /functions found. Skipping.
09:47:38.257    Validating asset output directory
09:47:38.258    Error: Output directory " .vercel/output/static" not found.
09:47:39.593    Failed: build output directory not found

09:47:38.194    ⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
09:47:38.194    ⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
09:47:38.194    ⚡️ Build completed in 2.80s
09:47:38.257    Finished
09:47:38.257    Note: No functions dir at /functions found. Skipping.
09:47:38.257    Validating asset output directory
09:47:38.258    Error: Output directory " .vercel/output/static" not found.
09:47:39.593    Failed: build output directory not found

09:47:38.194    ⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
09:47:38.194    ⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
09:47:38.194    ⚡️ Build completed in 2.80s
09:47:38.257    Finished
09:47:38.257    Note: No functions dir at /functions found. Skipping.
09:47:38.257    Validating asset output directory
09:47:38.258    Error: Output directory " .vercel/output/static" not found.
09:47:39.593    Failed: build output directory not found

R

Rabid•5/7/24, 3:51 PM

Copy and pasted config and site from another deployment that works fine, and I'm getting this

V

vmgOP•5/7/24, 4:09 PM

how would i add things like durable objects to my next-on-pages project? would i need to setup have a separate folder for workers that is deployed separately? could i get some guidance on what that would look like?

Sstevefrench hi <@94508156243161088> can I use HTMLRewriter in next-on-pages middleware?

J

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

not sure, I haven't tried it

K

kilros•5/8/24, 9:24 AM

Hi, guys!
How can I deploy nextjs app to cloudflare ipfs?

K

kilros•5/8/24, 10:49 AM

so that I can access it using https://cloudflare-ipfs.com/ipfs/[CID of the project]

L

laurent•5/8/24, 12:08 PM

-> Just throwing it out there, my honest feedback on my cloudlare experience.

I tried to go full cloudflare for my project https://fullwindcss.com/

I learnt it's called cutting edge because it will cut you

I went with

nextjs (next-on-pages) app router, server components, server actions, edge runtime
drizzle + D1 for database

OK:

all the static parts work fine.
if you have a blog it will be great and free up to 1mb for your site's bundle which is turned into a worker function. I was just over 1mb and had to switch to workers paid for 5$ a month (which is very fair)
you get the benefits of serverless, the site can handle usage spikes without you having to worry about anything (non issue during the product hunt launch).

MEH:

Next Auth on Drizzle + D1 + edge runtime has been a challenge (but manageable). Examples in the repo are much nicer than the documentation

NOPE:

Stripe payments that work in dev fail most of the time in prod. I tried to move from server actions to webhooks, still doesn't work and basically impossible to debug.
Error logs can be super cryptic, like "Error: The script will never generate a response."
you can't use cloudflare pages' sentry plug-in in a next-on-pages app, so no error reporting.
Log retention is not possible at the moment. You can either stream from your terminal or from the web dashboard. Good luck debugging prod in these conditions.
The team at cloudflare isn't super dedicated to next-on-pages. It's not a core product the way it is at Vercel. Github issues can stay unanswered for 2 weeks, and sometimes for ever. The Discord server is more active.

All things considered, I'm going to move away from a full next-on-pages app.
Maybe a mitigation is to use classic workers (not edge runtime nextjs api routes) to handle the backend? Hope Stripe works there.

I would have loved to have a great experience on cloudflare but we're not there yet.

fullwindcss

Build better apps with the whole tailwindcss color palette

W

WarlockJa•5/8/24, 12:27 PM

@laurent Hello. Can you provide a link to the repo example, you've mentioned, about "Next Auth on Drizzle + D1 + edge runtime". This is exactly the problem I am struggling at the moment.

WWarlockJa <@329986722823667714> Hello. Can you provide a link to the repo example, you've ...

L

laurent•5/8/24, 1:22 PM

My repo is private but happy to jump on a call and show you

Llaurent -> Just throwing it out there, my honest feedback on my cloudlare experience. I...

J

James•5/8/24, 5:43 PM

Error logs can be super cryptic, like "Error: The script will never generate a response."

This would be a bug that generally you should open an issue on our repo for. Another user raised an issue a couple days ago about this that we have fixed related to the fetch patch which may also solve the problem for you - I'll shoot dario a message about making a release.

Github issues can stay unanswered for 2 weeks

Please feel free to bump an issue or add additional context if it's also affecting you.

WWarlockJa <@329986722823667714> Hello. Can you provide a link to the repo example, you've ...

L

laurent•5/8/24, 6:18 PM

just re-read, I meant the next auth repo, examples folder https://github.com/nextauthjs/next-auth/tree/main/apps/examples/nextjs
I think I also took inspiration from another repo, this one I think https://github.com/yongyi520/cloudflare-nextjs-d1-error
still happy to show you how I did it

J

James•5/8/24, 7:05 PM

it's due to some logic in the react server code which is what i'm trying to hack around in that pr, although we're seeing weird behaviour with the e2es which i need to spend some time looking into

J

James•5/8/24, 7:05 PM

i believe it's a relatively recent thing (past few months)

J

James•5/8/24, 7:20 PM

if you wanted, you could even try using the prerelease in the PR to build with

J

JThiel•5/8/24, 8:38 PM

Hey there, looking for some help regarding some nasty and close to impossible to debug Error 1101 "Error: The script will never generate a response." errors.
We are developing quite a simple NextJS app that's bringing some APIs together. In particular we use Auth0 as an Auth Provider and then SWR to fetch data from multiple REST routes. Classic Customer Portal solution. It's still in the PoC level so we didn't even leverage KV or D1 yet. What drives us crazy is the fact that the same code runs perfectly fine on Vercel but constantly hits the 1101 on CF Pages.
We tried to run

wrangler pages dev

wrangler pages dev

locally in hope that it might give us some more information but it simply won't work on our Windows machines.
If anyone have some ways on how to demistify this generic error ... I am highly greatful.
For context: We had some issues in one of the dependencies of the project before. That was when we first deployed it to Vercel. Vercel gave us a perfect clear logging output regarding the issue. We fixed that library to make it Edge compatible. Not the app runs fine on Vercel but still not on CF Pages.
We have auto Github deployments configured on both platforms and use the same config (ENV vars) on both. So code and config are identical. It's just the platform that difers ...

TThomas prerelease for next-on-pages package itself right?

J

James•5/8/24, 10:20 PM

the prerelease link in the pr -

https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/8953244999/npm-package-next-on-pages-771

https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/8953244999/npm-package-next-on-pages-771

https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/8953244999/npm-package-next-on-pages-771

https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/8953244999/npm-package-next-on-pages-771.

we don't have a canary. the beta release has a recursive fetch patch bugfix but nothing for the cache property

J

James•5/8/24, 10:20 PM

if your stuff is working with the beta release, it's probably not fixed the problem, but just luck

I'm starting a greenfield project and am wondering if it makes sense to use api routes in nextjs whe

Similar Threads