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

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

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

  1. // pages/api/foo/bar.ts
  2. import { NextApiRequest, NextApiResponse } from "next";
  3. export default async function handler(
  4. req: NextApiRequest,
  5. res: NextApiResponse
  6. ) {
  7. res.status(200).json({ foo: "bar2" });
  8. }

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

qyswt5oh

qyswt5oh1#

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

  1. const http = require('http');
  2. const url = require('url');
  3. const next = require('next');
  4. const dev = process.env.NODE_ENV !== 'production';
  5. const app = next({ dev });
  6. const handle = app.getRequestHandler();
  7. app.prepare().then(() => {
  8. const server = http.createServer((req, res) => {
  9. const parsedUrl = url.parse(req.url, true);
  10. const { pathname } = parsedUrl;
  11. if (pathname === '/foo') {
  12. return app.render(req, res, '/api/foo', parsedUrl.query);
  13. }
  14. handle(req, res, parsedUrl);
  15. });
  16. server.listen(3000, (err) => {
  17. if (err) throw err;
  18. console.log('> Ready on http://localhost:4000');
  19. });
  20. });
展开查看全部

相关问题