cloudflare / cloudflare/vinext

feat: support assetPrefix in next.config

Open
#472 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
406
Avg merge
2d 6h
Merged PRs (30d)
120

Description

## Summary

`assetPrefix` from `next.config` is currently not read or used anywhere in vinext. Setting it is silently ignored.

## Current behavior

In production, all static assets (fonts, JS chunks, etc.) are always served from:

```
{basePath}/assets/[file]-[hash].[ext]
```

The URL is generated by Vite's asset pipeline with no way to inject a CDN prefix.

## Expected behavior

When `assetPrefix` is set in `next.config`:

```ts
// next.config.ts
const nextConfig: NextConfig = {
assetPrefix: 'https://assets.example.com',
};
```

All asset URLs should be prefixed accordingly:

```
https://assets.example.com/assets/Font-[hash].woff2
https://assets.example.com/_next/static/chunks/...
```

## Why this matters

When deploying to Cloudflare Workers with a gateway pattern (a hub Worker routing requests to multiple service Workers), every request — including static assets like fonts and images — goes through the gateway Worker and incurs an invocation.

With `assetPrefix` support, static assets could be served from a dedicated subdomain (e.g. `assets-app.example.com`) backed by a Cloudflare Workers Assets-only deployment with `run_worker_first: false`. This would serve fonts, CSS, and JS bundles **directly from Cloudflare's edge with zero Worker invocations**.

## Investigation

Verified by reading `dist/config/next-config.js` — `resolveNextConfig` never extracts `assetPrefix`. The `vinext:local-fonts` Vite plugin (index.js lines 3153–3219) rewrites font paths to Vite static asset imports, but Vite's `base` (driven by `basePath`) is the only configurable prefix — there is no `assetPrefix` injection at any stage.

## Suggested approach

In `resolveNextConfig`, extract `assetPrefix` and pass it through to the Vite plugin. The plugin would then configure Vite's [`experimental.renderBuiltUrl`](https://vitejs.dev/guide/build#advanced-base-options) to prefix resolved asset URLs:

```ts
// vite.config equivalent
build: {
rollupOptions: {},
},
experimental: {
renderBuiltUrl(filename) {
return assetPrefix + '/' + filename;
}
}
```

This would cover JS/CSS chunks, font files, and images processed through Vite's asset pipeline.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.