Skip to main content
Next.js API Routes can consume raw binary streams. Here is how to handle a ZON upload in the App Router.

​
Route Handler

Create a route handler at app/api/upload/route.ts.
app/api/upload/route.ts
import { NextRequest, NextResponse } from 'next/server';
// Note: You might need to dynamic import WASM in Next.js depending on config
import { ZonReader } from '@zon-lib/zon'; 

export async function POST(req: NextRequest) {
  // 1. Get the raw ArrayBuffer
  const blob = await req.blob();
  const arrayBuffer = await blob.arrayBuffer();
  
  // 2. Wrap it
  // Uint8Array is needed for the WASM bridge
  const uint8 = new Uint8Array(arrayBuffer);
  const reader = new ZonReader(uint8);
  
  const root = reader.rootOffset;
  const data = reader.readString(root);
  
  return NextResponse.json({ 
    received: data,
    length: uint8.length 
  });
}
WASM in Next.js: Ensure your next.config.js is configured to support WebAssembly if you encounter build issues.

​
Configuration (Webpack)

To enable WebAssembly in Next.js, you must update your config:
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};

module.exports = nextConfig;