NextJS API路由没有url的“api”部分?

c9qzyr3d  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(154)

我可以在NextJS 13中有一个API路由。此端点可访问http://localhost:8080/api/foo/bar

// pages/api/foo/bar.ts

import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.status(200).json({ foo: "bar2" });
}

然而,我不想有“API”作为网址的一部分,如http://localhost:8080/foo/bar
如果没有'API'作为文件夹之一,例如:pages/foo/bar.ts然后对于上面的URL,我得到一个错误:
错误:对象作为React子对象无效(找到:[object Promise])。如果你想呈现一个子级集合,请使用数组代替。
我假设它的错误是因为它期望默认导出为React组件,但我不知道如何解决这个问题。

qyswt5oh

qyswt5oh1#

据我所知,如果你使用Nextjs API,你必须使用/api路由。因此,您可以创建自定义服务器并将路由/foo重定向到/api/foo
举个例子:

const http = require('http');
const url = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname === '/foo') {
      return app.render(req, res, '/api/foo', parsedUrl.query);
    }

    handle(req, res, parsedUrl);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:4000');
  });
});

相关问题