To make using Scale Functions with Next.js Edge Functions easier, we’ve created a
Next.js Adapter that allows you to import a Scale Function
directly into your Next.js App.
It is not currently possible to use the Scale Registry to import a Scale Functions into a Next.js App at runtime because of
the way Vercel deploys Next.js Edge Functions. However, you can still use the Scale Registry to deploy your
Scale Functions and use the Next.js Adapter to import them into your Next.js App at build time. Getting Started
First, you’ll need a Next.js App with Vercel Edge Functions
enabled. If you don’t have one, you can create one with the following command:
npx create-next-app@latest --typescript
npm install @loopholelabs/scale @loopholelabs/scale-http-adapters
next.config.js file to use the Scale HTTP Adapter Webpack Loader:
const nextConfig = {
reactStrictMode: true,
}
const adapter = require('@loopholelabs/scale-http-adapters/nextjs');
module.exports = adapter.WithScale(nextConfig)
Embedding a Scale Function
To get started, let’s create a Scale Function that returns a simple ‘Hello World’ message. This is as simple as
running the following command:
We’re implicitly using the Go Guest Language in this example, but you can use any of the supported
Guest Languages. To use a different Guest Language, you can use the --language flag when creating a new Scale Function. scale.go file that gets generated. The Scale Function is a simple HTTP handler that returns a Hello World message:
//go:build tinygo || js || wasm
package scale
import (
signature "github.com/loopholelabs/scale-signature-http"
)
func Scale(ctx *signature.Context) (*signature.Context, error) {
ctx.Response().SetBody("Hello, World!")
return ctx
}
scale build && scale function export hello:1.0.
hello-latest.scale file in the current directory. Because of the way Next.js
deploys Edge Functions, we also need to export a raw version of the Scale Function. To do this, we can use the
--raw flag with the previous export command:
scale function export hello:latest . --raw
hello-latest.wasm file in the current directory. Now we have everything we need to import
the Scale Function into our Next.js App.
Check out the Scale CLI documentation for more information on how to use the Scale CLI to build and export
Scale Functions. import statement:
import { NextRequest } from 'next/server';
import { NextJS } from '@loopholelabs/scale-http-adapters';
import { New, Func } from "@loopholelabs/scale";
// @ts-ignore
import example from "./hello-latest.scale"
// @ts-ignore
import exampleModule from "./hello-latest.wasm?module"
export const config = {
runtime: 'edge',
};
const fn = new Func(example, exampleModule);
// @ts-ignore
const runtime = New([fn]);
const handler = (new NextJS(runtime)).Handler();
export default async (req: NextRequest) => {
// @ts-ignore
return await handler(req);
}
export const config = { runtime: 'edge' }; line to your API route. This tells Vercel to deploy
the API route as an Edge Function, which is required for WebAssembly modules to work.
You’ll also need to add the // @ts-ignore comments to the import statements to tell TypeScript to ignore the
.scale and .wasm file imports since webpack will handle them at build time.
The ?module query parameter is required when importing a raw Scale Function (WebAssembly Module) into a Next.js App. This tells
Vercel to treat the file as a WebAssembly module and compile it to WebAssembly before deploying it. Vercel explicitly
disables compiling WebAssembly modules at runtime, which is why we need to import the raw .wasm module at build time.
import { useState, useEffect } from 'react'
export default function Home() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('/api/hello')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading...</p>
return (
<div>
<h1>{data}</h1>
</div>
)
}
Next.js App on http://localhost:3000
