首页 > 解决方案 > 如何在 Next JS 中使用代理进行 rest api 调用

问题描述

我在 Mern Stack 中开发了一个网络应用程序。现在我用 Next JS 更新它以改进 SEO。

我从 youtube 上学习了一些 Next JS 课程并阅读了文档。

我对 pages 文件夹中的 api 文件夹感到困惑。语法看起来像 express。

它是干什么用的?我必须在那里再次创建我的 REST Api 吗?

我可以在 package.json 中为 Next JS 中的 React 之类的 api 调用添加代理吗?

这是 mern 应用程序的文件夹结构:

client
  public
  src
    actions
    components
    constants
    reducers
    screens
    App.js

server
  config
  controllers
  middlewares
  models
  routes
  utils
  server.js

这是客户端对其余 api 的示例请求

  useEffect(() => {
    const getTestimonails = async () => {
      try {
        const res = await fetch("/api/testimonials/");

        return await res.json();
      } catch (err) {
        console.error(err);
      }
    };

    getTestimonails().then((data) => {
      setTestimonials(data);
    });
  }, []);

休息 API server.js

app.use('/api/testimonials', testimonialRoutes);

路线

router.route('/').get(getTestimonials).post(protect, createTestimonial);

router
  .route('/:id/')
  .get(checkObjectId('id'), getTestimonialById)
  .put(protect, checkObjectId('id'), updateTestimonial)
  .delete(protect, checkObjectId('id'), deleteTestimonial);

标签: javascriptreactjsnext.js

解决方案


推荐阅读