[create-cloudflare] next.js with ts fix

[beratbayram]

Fixes #7665.

WHAT: It changes the output of next.js with TS template.
WHY: Basic templating is broken.
HOW: Existing customers are not affected. New customers will have a better experience.

Related bug only appears when nextjs is used with TS because C3 generates a top-level await statement inside a .ts file which is illegal. So this PR doesn't change how JS version is generated but creates a new next.config.mjs file with new hardcoded content for TS version specifically.

Only TS version is hardcoded to minimize the impact of possible config file change by the next.js team but we can discuss to do that to JS version as well for simplicity.

Other possible solutions are discussed at the linked issue but to summarise:

• .mts file type can't be used because next config can't be a .mts file(1).
• Async config and transpilation is too complex for this simple config file.

---

• Tests
  • TODO (before merge)
  • Tests included
  • Tests not necessary because: already written
• E2E Tests CI Job required? (Use "e2e" label or ask maintainer to run separately)
  • I don't know
  • Required
  • Not required because: c3 change, and c3 e2e's will run regardless of the label
• Public documentation
  • TODO (before merge)
  • Cloudflare docs PR(s):
  • Documentation not necessary because: Changes the output not the usage

---

I've run tests and two fails as follows but I don't believe they are related to my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 20992d5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-cloudflare	Patch

Not sure what this means? Click here to learn what changesets are.

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

[beratbayram]

dario-piotrowicz (asking maintainer to run E2E tests separately)

[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/13243642388/npm-package-wrangler-7854

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

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

Or you can use npx with this latest build directly:

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

Additional artifacts:

cloudflare-workers-bindings-extension:

wget https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-workers-bindings-extension-7854 -O ./cloudflare-workers-bindings-extension.0.0.0-va059128b2.vsix && code --install-extension ./cloudflare-workers-bindings-extension.0.0.0-va059128b2.vsix

create-cloudflare:

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

@cloudflare/kv-asset-handler:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-kv-asset-handler-7854

miniflare:

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

@cloudflare/pages-shared:

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

@cloudflare/unenv-preset:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-unenv-preset-7854

@cloudflare/vite-plugin:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-vite-plugin-7854

@cloudflare/vitest-pool-workers:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-vitest-pool-workers-7854

@cloudflare/workers-editor-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-workers-editor-shared-7854

@cloudflare/workers-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-workers-shared-7854

@cloudflare/workflows-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/13243642388/npm-package-cloudflare-workflows-shared-7854

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

---

wrangler@3.107.3 includes the following runtime dependencies:

Package	Constraint	Resolved
miniflare	workspace:*	3.20250129.0
workerd	1.20250204.0	1.20250204.0
workerd --version	1.20250204.0	2025-02-04

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

[vicb]

@dario-piotrowicz do we need (process.env.NODE_ENV === 'development') here? (or could it be inside setupDevPlatform ?

(The code here is only moved from l42 so not directly related to the PR)

[dario-piotrowicz]

This check is totally unnecessary, moving it inside setupDevPlatform wouldn't actually accomplish anything

it's here to try to make it extra clear to the developer that this function is only needed in development, in reality this only has any effect during development anyways

I'm happy to get rid of it if you want 👍

[vicb]

This check is totally unnecessary

Then I would drop it.

And in next-on-pages as well

[vicb]

I took a quick look here but I don't really think the changes are optimal, there should be no reason to need both a TS and JS version of updateNextXConfig.

One thing that look weird is that we do not pass --js or --ts to create-next-app

workers-sdk/packages/create-cloudflare/templates/next/c3.ts

Line 27 in 6c2e943

await runFrameworkGenerator(ctx, [projectName]);

[beratbayram]

I took a quick look here but I don't really think the changes are optimal, there should be no reason to need both a TS and JS version of updateNextXConfig.

JS version only prepends some code to existing config while TS version removes the existing one completely and creates a new hardcoded one from scratch. I can make JS version also behave like TS version but in case of a possible config change by next.js team, both versions will be affected instead of only the TS version.

One thing that look weird is that we do not pass --js or --ts to create-next-app

workers-sdk/packages/create-cloudflare/templates/next/c3.ts

Line 27 in 6c2e943

await runFrameworkGenerator(ctx, [projectName]);

We don't need that, user decides that during next-cli prompt

[vicb]

We don't need that, user decides that during next-cli prompt

Thanks for the clarification here.

JS version only prepends some code to existing config while TS version removes the existing one completely and creates a new hardcoded one from scratch. I can make JS version also behave like TS version but in case of a possible config change by next.js team, both versions will be affected instead of only the TS version.

Could you expand on why the TS config would need to be fully replaced? (maybe add the generated TS config + explanation to the PR description). Thanks!

[beratbayram]

Thanks for the clarification here.

No problem

Could you expand on why the TS config would need to be fully replaced? (maybe add the generated TS config + explanation to the PR description). Thanks!

I've just edited the description. Please also check the conversation at the linked issue.

[vicb]

because C3 generates an await statement inside a .ts file which is illegal

I think we should drop the await, see:

https://github.com/cloudflare/next-on-pages/blob/2cd4c3c704a00e6b693229f1f14102abc6318d11/internal-packages/next-dev/src/index.ts#L6-L13

https://github.com/cloudflare/next-on-pages/blob/2cd4c3c704a00e6b693229f1f14102abc6318d11/internal-packages/next-dev/README.md?plain=1#L56-L59

@dario-piotrowicz what do you think?

[dario-piotrowicz]

because C3 generates an await statement inside a .ts file which is illegal

I think we should drop the await, see:

cloudflare/next-on-pages@2cd4c3c/internal-packages/next-dev/src/index.ts#L6-L13

cloudflare/next-on-pages@2cd4c3c/internal-packages/next-dev/README.md?plain=1#L56-L59

@dario-piotrowicz what do you think?

yeah I forgot about the awaiting not being actually necessary, yes probably removing it would be the simplest thing, I feel like awaiting the function provides a nice safety net (since we've seen that not awaiting the function is totally fine, but there is no hard guarantee about that, in theory it could no longer be true if Next.js changed how they run their dev server etc...), but since now it complicates the C3 logic here I think we might just get rid of it

[beratbayram]

I've reverted all of my previous work.

yeah I forgot about the awaiting not being actually necessary, yes probably removing it would be the simplest thing,

Removed await and added .catch(console.error)

it's here to try to make it extra clear to the developer that this function is only needed in development

Removed the if and improved the comment to emphasize that.

I hope it is OK now.

@vicb @dario-piotrowicz

[vicb]

LGTM, thanks for the PR and the updates!

I triggered the e2e

[beratbayram]

Thanks for your directions and your patience. It was fun to work on this.

[vicb]

@beratbayram it looks like the formatting is wrong, could you please run pnpm fix on the change?

[beratbayram]

@beratbayram it looks like the formatting is wrong, could you please run pnpm fix on the change?

done

[holopin-bot]

Congratulations @beratbayram, the maintainer of this repository has issued you a holobyte! Here it is: https://holopin.io/holobyte/cm6z97fao45380cl72xu6wqq0

This badge can only be claimed by you, so make sure that your GitHub account is linked to your Holopin account. You can manage those preferences here: https://holopin.io/account.
Or if you're new to Holopin, you can simply sign up with GitHub, which will do the trick!