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

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

W

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

Oh, so then for dynamic routing I must setup workers

J

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

@cloudflare/next-on-pages

@cloudflare/next-on-pages

@cloudflare/next-on-pages

@cloudflare/next-on-pages creates the worker that is deployed to your Pages project for you

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

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…

W

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

I will still know how to use it and implement it

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

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”?

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

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

W

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

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

W

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

It is automatic?

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

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

W

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

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

J

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

Then it should be all good

F

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

Do filesystem packages like

fast-glob

fast-glob

fast-glob

fast-glob work on next-on-pages?

J

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

the node fs module will not work on workerd

J

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

so if it interacts with the filesystem, it wont work

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

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 }}

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 }}

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

B

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

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

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

F

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

so anything that uses

fs

fs

does not work within cloudflare pages?

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

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.

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

F

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

tysm!

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?

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?

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

vmg•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?

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

Similar Threads

Similar Threads

Similar Threads