Giter Site home page Giter Site logo

lusentis / workshop-next-on-pages Goto Github PK

View Code? Open in Web Editor NEW
13.0 1.0 2.0 94 KB

Example of a Next.js app (App Router) running on Cloudflare Pages and a D1 Datbase.

CSS 17.30% TypeScript 72.76% JavaScript 9.94%
cloudflare cloudflarepages nextjs

workshop-next-on-pages's Introduction

Next.js (App Router) on Cloudflare Pages

Example of a Next.js app (App Router) running on Cloudflare Pages. This commit contains all the changes needed to run a Next.js App Router app on Cloudflare Pages with a D1 database.

This guide has been created on 2024-02-20 with the latest React Canary and next-on-pages packages. Due to the beta nature of these packages, the information in this guide may be outdated. Please refer to the official documentation for the latest information.

Commands

pnpm i # install deps
pnpm exec wrangler d1 create pollo-4 # create the database (update the id in wrangler.toml)
pnpm exec wrangler d1 execute pollo-4 --file ./init.sql --local # init local db
pnpm exec wrangler d1 execute pollo-4 --file ./init.sql # init remote db (careful!)
pnpm run dev # run locally
pnpm exec next-on-pages # build
pnpm exec wrangler pages deploy .vercel/output/static # deploy

Caveats

As of today, you need to do the following manually:

  1. You must manually add the nodejs_compat compatibility flag from yhe Cloudflare Dashboard (Workers & Pages > [your app] > Settings > Functions > Compatibility flags) and deploy your app again.
  2. After you first deploy the app, you must manually bind the D1 database from the Cloudflare Dashboard (Workers & Pages > [your app] > Settings > Functions > D1 Database).

Please note that:

  1. Development is done via pnpm run dev; the development environment is not the same as the production environment, deploy frequently to detect issues early.
  2. D1 is in beta and not recommended for production use.
  3. next-on-pages is still early stage and might have breaking changes or unexpected behavior.
  4. Cloudflare Pages only supports the edge runtime. You must export const runtime = "edge" from all your page.tsx files.
  5. Help is available on the dedicated Discord channel on the Cloudflare Dev server.

References

Step-by-step Video (in English + subtitles): https://www.youtube.com/watch?v=Fcp-Mbvh424

Talk (in Italian): https://www.youtube.com/watch?v=wESngFYjQWA

Slides: https://docs.google.com/presentation/d/1UQnAhO4VKu9hst9BBbbsT9LAz_duuJgOVVVvttYHQvI/edit?usp=sharing

Documentation: https://b6f0a2e0.cloudflare-docs-7ou.pages.dev/pages/framework-guides/

Demo: https://pollo-4.pages.dev/

Support Channel: https://discord.com/invite/cloudflaredev

License

Public Domain (Unlicense)

workshop-next-on-pages's People

Contributors

lusentis avatar

Stargazers

Alex Zhukau avatar Liyd avatar  avatar HeisenBerg? avatar Yanqi Zong avatar  avatar azu avatar Richard Torcato avatar Pablo Cru Delhom avatar Lance Harper avatar Tenvi avatar Vincent avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.