Next.js TypeScript 与 Cloudflare Pages 功能

我已经创建了一个使用 TypeScript 的最小化 Next.js 应用，并创建了一个 functions 文件夹，其中包含以下 API：

import { jsonResponse } from "../utils/jsonResponse";

export const onRequestGet: PagesFunction<{ FILES: KVNamespace }> = async ({ request, env }) => {
    return jsonResponse({
        time: new Date(),
    });
};

PagesFunction 类型是从示例图片应用复制的: https://github.com/cloudflare/images.pages.dev/blob/main/functions/types.d.ts

jsonResponse 工具函数来自同一个示例应用。

在 Cloudflare 上构建时，并且在本地使用 npx wrangler pages dev ./out 验证时，我得到了以下错误：

Error: Transform failed with 1 error:
<stdin>:3:25: error: Expected ";" but found ":"
    at failureErrorWithLog (/Users/martinnormark/.npm/_npx/8c55f4bc76fffd7b/node_modules/esbuild/lib/main.js:1475:15)
    at /Users/martinnormark/.npm/_npx/8c55f4bc76fffd7b/node_modules/esbuild/lib/main.js:1264:29
    at /Users/martinnormark/.npm/_npx/8c55f4bc76fffd7b/node_modules/esbuild/lib/main.js:611:9
    at handleIncomingPacket (/Users/martinnormark/.npm/_npx/8c55f4bc76fffd7b/node_modules/esbuild/lib/main.js:708:9)
    at Socket.readFromStdout (/Users/martinnormark/.npm/_npx/8c55f4bc76fffd7b/node_modules/esbuild/lib/main.js:578:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 25,
        file: '<stdin>',
        length: 1,
        line: 3,
        lineText: 'export const onRequestGet: PagesFunction<{ FILES: KVNamespace }> = async ({ request, env }) => {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Expected ";" but found ":"'
    }
  ],
  warnings: []
}

如果我删除 PagesFunction<> 和参数（在这个例子中我没有使用），它就能正常工作。

但这只是一个最小示例，在这里我没有使用 EventContext 中的任何内容。我有一些 API 需要通过 env.FILES 参数访问 KV 命名空间。

例如这个：

import { jsonResponse } from "../utils/jsonResponse";
import { Magic } from "@magic-sdk/admin";

// Initiating Magic instance for server-side methods
const magic = new Magic(process.env.MAGIC_SECRET_KEY);

export const onRequestPost = async (context: any) => {
    try {
        const req: Request = context.request;
        const didToken = req.headers.get("Authorization")?.substr(7);
        await magic.token.validate(didToken!);

        return jsonResponse({
            authenticated: true,
        });
    } catch (error: any) {
        return jsonResponse(
            { error: error.message },
            {
                status: 500,
            }
        );
    }
};

结果发现类型注解 context: any 不被喜欢。

这似乎与 functions 文件夹被放在 Next.js 应用程序内部有关。我尝试使用 React TS 模板构建一个 Vite 应用，并且运行良好。代码在这里：https://github.com/martinnormark/reactts-cf-pages-functions