Update Next.js template to support bindings

[irvinebroque]

What

Updates starter template that running npm create cloudflare and selecting Next.js creates, to make use of bindings proxy, as implemented in next-on-pages.

Why

Provides a starting point that shows how to work with bindings in local dev, even when local dev server is in Node.js.

Before merging

• Why can't next.config.js file be written? https://github.com/cloudflare/workers-sdk/pull/4688/files#r1439845985
• Release next-on-pages version where https://github.com/cloudflare/workers-sdk/pull/4688/files#diff-4dee5291b07de23139f615744ec0043e550865a2d726144daa7309df02c05bbaR77 is no longer experimental @dario-piotrowicz
• make sure that @cloudflare/workers-types is installed as a dev dependency for apps using TS
• update package.json scripts, we want to have:
  • the standard Next.js scripts:
    • dev for local development
    • build for building the application
  • the pages scripts
    • pages:preview for previewing the pages app locally (basically the current pages:dev)
    • pages:deploy for deploying the pages app
    • pages:build for building the pages application (run as a pre-set by pages:preview and pages:deploy)
  • and we need to remove:
    • pages:dev (since users should just use dev now)
• see if we can update jsonc tsconfig.json files (see comment)
• update README

refs irvinebroque/next-bindings-test#1
refs #4523

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9621aee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/7534950857/npm-package-wrangler-4688

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/7534950857/npm-package-wrangler-4688

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/7534950857/npm-package-wrangler-4688 dev path/to/script.js

Additional artifacts:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/7534950857/npm-package-miniflare-4688

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/7534950857/npm-package-cloudflare-pages-shared-4688

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/7534950857/npm-package-create-cloudflare-4688 --no-auto-update

Note that these links will no longer work once the GitHub Actions artifact expires.

---

wrangler@3.22.4 includes the following runtime dependencies:

Package	Constraint	Resolved
miniflare	workspace:*	3.20231218.1
workerd	1.20231218.0	1.20231218.0
workerd --version	1.20231218.0	2023-12-18

|

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (8d6b3ee) 75.63% compared to head (9621aee) 75.70%.
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4688      +/-   ##
==========================================
+ Coverage   75.63%   75.70%   +0.06%     
==========================================
  Files         243      243              
  Lines       13210    13222      +12     
  Branches     3393     3396       +3     
==========================================
+ Hits         9992    10010      +18     
+ Misses       3218     3212       -6     

see 7 files with indirect coverage changes

[dario-piotrowicz]

@irvinebroque another thing that needs to be updated in c3 for Next.js (which I was planning to do as soon as the next-dev submodule isn't experimental anymore) is to update the package.json scripts, we should updated them to something along these lines:

    "pages:build": "npx @cloudflare/next-on-pages",
    "pages:deploy": "npm run pages:build && wrangler pages deploy .vercel/output/static",
-   "pages:watch": "npx @cloudflare/next-on-pages --watch",
-   "pages:dev": "npx wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat"
+   "pages:preview": "npm run pages:build && npx wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat"

so that then developers can follow the recommended workflow and:

• develop locally using dev,
• preview using pages:preview
• and deploy using pages:deploy

As I said I was planning to do this as soon as next-dev's ready, so I am really happy to do it in a followup PR, or maybe the change could be included here, whatever you prefer 🙂 (in any case I thought you'd want to be aware of this)

[admah]

@dario-piotrowicz is there an ETA on when then module might not be experimental? Is it possible to ship while it's experimental?

[dario-piotrowicz]

@dario-piotrowicz is there an ETA on when then module might not be experimental? Is it possible to ship while it's experimental?

Yeah it'd be possible to ship this while the package is experimental, but anyways as ETA for making the module non-experimental I'd say in the next few days, next week at the very very latest, it's just a matter of merging this PR: cloudflare/next-on-pages#612 and making a next-on-pages release 🙂

[dario-piotrowicz]

@irvinebroque @admah the next-on-pages next-dev sub-module is no longer experimental 🙂👍

[dario-piotrowicz]

I implemented this quick solution just to get things working with Next.js, before merging I should explore if we can also, without too much complications, handle jsonc tsconfigs

[dario-piotrowicz]

Updating jsonc files doesn't seem very simple, I can see that in wrangler it was already considered not worth it:

workers-sdk/packages/wrangler/src/init.ts

Lines 462 to 465 in ccf14dd

	// We don't update the tsconfig.json because
	// it could be complicated in existing projects
	// and we don't want to break them. Instead, we simply
	// tell the user that they need to update their tsconfig.json

Here as well a generic solution might end up too complex and not worth it...

I did try to experiment a bit with json5 here but mixed success (the tsconfig can get parsed by during the parsing the comments are lost)

I think would keep this as is for now (since currently it is good enough for Next.js) and improve things later if need be 🤔

[petebacondarwin]

I pulled this PR down and used it to create a Next.js application locally.
I uncommented the various KV binding bits and added to the pages:preview script.
Then npm run dev and npm run pages:preview all work as expected.
I can also see that the typings are working as expected!

Nice!