Best way to setup Takumi in a Next.js Project on Cloudflare Workers?

[omaroubari]

In my project I have a custom /next/og endpoint (using Takumi core and returning a NextResponse) that I use to generate OG images for [...slug] catch all routes. I've been working on moving off of vercel to Cloudflare Workers via Opennextjs, however I haven't been able to get Takumi to work.

Apparently @takumi-rs/core doesn't work in Workers (process.report.getReport method is not implemented). Do you think I (beginner but willing to learn) should try getting it to work (if you're accepting PRs) or should I setup a separate worker based on @takumi-rs/wasm?

[kane50613]

Are you using Turbopack or Webpack now? I haven't figured out how to load wasm in turbopack as well.

I'd suggest a separated worker setup as temporary solution.

[omaroubari]

I'm using Webpack for now, but I haven't been able to load the WASM file from @takumi-rs/wasm despite following the docs. I had to pull out the WASM file to public/ to be able to use it. Here's what my route looks like currently:

import { container, text } from '@takumi-rs/helpers'
import { fromJsx } from '@takumi-rs/helpers/jsx'
import init, { Renderer } from '@takumi-rs/wasm'
import module from '@takumi-rs/wasm/takumi_wasm_bg.wasm'

await init(new URL(module, getServerSideURL()))

export async function GET(request: NextRequest) {
...

and webpack config:

 webpackConfig.module.rules.push({
      test: /\.wasm$/,
      type: 'asset/resource',
      generator: {
        filename: 'wasm/[name].[hash][ext]',
      },
    })

but I keep getting:

 ⨯ [TypeError: WebAssembly response has unsupported MIME type 'text/html; charset=utf-8'] {
  code: 'ERR_WEBASSEMBLY_RESPONSE',
  page: '/next/og'
}
 GET /_next/wasm/takumi_wasm_bg.6aa654263387f2f6.wasm 404 in 16959ms

[kane50613]

nextjs really doesnt have great support for loading wasm :(

[kane50613]

im guess maybe a way is to embed wasm file as a base64 string like what shiki did

[kane50613]

Btw takumi might use over free plan 10ms cpu limitation (depends on your image size and complexity)

[omaroubari]

Thanks for the heads up

[kane50613]

I've found ways to import for turbopack, will release later

[kane50613]

check again! https://takumi.kane.tw/docs#edge-runtime--browser

[omaroubari]

Hey @kane50613! Thanks for looking into this. I'm not sure if I'm missing something, but in my case I can't get it to work with any of the two (webpack & turbopack). I need takumi in a OG image API route in a Nextjs (v15.4.4) project on Cloudflare Workers (via Opennextjs).

Following the webpack config in the docs:

Next config:

import createNextIntlPlugin from 'next-intl/plugin'
import bundleAnalyzer from '@next/bundle-analyzer'
import redirects from './redirects.js'
import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare'

const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL
  ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
  : process.env.NEXT_PUBLIC_SERVER_URL
    ? process.env.NEXT_PUBLIC_SERVER_URL
    : undefined || process.env.__NEXT_PRIVATE_ORIGIN || 'http://localhost:3000'

const withNextIntl = createNextIntlPlugin()


/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
    remotePatterns: [
      ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
        const url = new URL(item)

        return {
          hostname: url.hostname,
          protocol: url.protocol.replace(':', ''),
        }
      }),
    ],
  },
  serverExternalPackages: [
    '@takumi-rs/core',
    '@takumi-rs/wasm',
    '@takumi-rs/image-response',
    'pg-cloudflare',
  ],
  reactStrictMode: true,
  redirects,
  webpack: (webpackConfig) => {
    webpackConfig.resolve.extensionAlias = {
      '.cjs': ['.cts', '.cjs'],
      '.js': ['.ts', '.tsx', '.js', '.jsx'],
      '.mjs': ['.mts', '.mjs'],
    }
    webpackConfig.module.rules.push({
      test: /\.wasm$/,
      type: 'asset/resource',
      generator: {
        filename: 'wasm/[name].[hash][ext]',
      },
    })
    return webpackConfig
  },
}

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})

export default withBundleAnalyzer(
  withPayload(withNextIntl(nextConfig), { devBundleServerPackages: false }),
)

/api/og/route.tsx:

import wasmUrl from '@takumi-rs/wasm/takumi_wasm_bg.wasm'
...
return new ImageResponse(html, {
  module: wasmUrl,
  fonts: [fontData],
})

I get:

  [cause]: [TypeError: Failed to parse URL from /_next/wasm/takumi_wasm_bg.1df98c1a83500f0f.wasm] {
    [cause]: [TypeError: Invalid URL] {
      code: 'ERR_INVALID_URL',
      input: '/_next/wasm/takumi_wasm_bg.1df98c1a83500f0f.wasm'
    }
  }
}

Following the new turbopack config in the docs:

Swapped import:

import { ImageResponse } from '@takumi-rs/image-response/wasm'
import module from '@takumi-rs/wasm/next'
...
  return new ImageResponse(image, {
    module: module,
    fonts: [fontData],
  })
}

Running pnpm dev --turbo, I get:

Failed to load external module @takumi-rs/wasm/next: Error [ERR_INTERNAL_ASSERTION]: WASM is currently unsupported by require(esm) This is caused by either a bug in Node.js or incorrect usage of Node.js internals. Please open an issue with this stack trace at https://github.com/nodejs/node/issues

[omaroubari]

Alright so I was able to resolve it following the turbopack config guidelines by adding export const runtime = 'edge'.

[kane50613]

If you want to deploy to Workers, you have to always use edge runtime

[omaroubari]

I'm confused. The Opennextjs docs literally say to remove any export const runtime = 'edge'. Link.

[kane50613]

I'm not exactly sure what it behaves in nextjs 15, the example project is built with nextjs 16

there might be some difference in how turbopack handles wasm module import

[omaroubari]

will try migrating to nextjs 16 and report back later

[omaroubari]

Alright, so I was able to get it to work by serving the Takumi ImageResponse from the Worker serving the nextjs project. Works like a charm!

[kane50613]

glad to hear!

[omaroubari]

Hi @kane50613 , I wonder if using the WASM renderer with a node instead of ImageResponse with React.ReactNode would help in reducing worker size. I'm thinking we could eliminate the need to import react components into the worker.

[kane50613]

yeah sure you can use helpers in @takumi-rs/helpers package and avoid importing @takumi-rs/helpers/jsx. The only downside is no style presets (like default margin).
https://github.com/kane50613/takumi/blob/master/takumi-helpers/src/helpers.ts#L31