Next.js - API 实用程序文件夹结构

Question

我正在使用Next JS和api routes创建我的API。如果有人能回答我的两个问题，我会很感激。

1. 如果我想使用一些实用函数或全局常量变量，并且需要在多个api文件中包含它们，最好的存储位置是什么？如何使用相对路径导入它们?

2. 是否有一个Next JS项目的示例，不仅仅是基本的api routes教程，可以从文件夹结构方面学习?

- Kabu

Answer 1

您可以将实用函数保存在项目文件夹的 utils 文件夹中。

|-root
  |-components
    |-Navbar.js
    |-Footer.js
  |-styles
    |-global.css 
    |-navbar.module.css   
    |-footer.module.css        
  |-pages
    |-api
      |-users.js
    |-index.js
  |-utils
    |- dbConnect.js

假设您想从 pages/api/user.js 导入 dbConnect.js

• 相对导入：

import dbConnect from '../../utils/dbConnect';

• 绝对导入：

import dbConnect from 'src/utils/dbConnect';

这是一个示例项目的链接，可能会帮到您：https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose

如果您有兴趣使用绝对导入，请查看此文档链接： https://nextjs.org/docs/advanced-features/module-path-aliases

- Kelvin Sánchez

---

我该如何确保 API 的 utils 不会捆绑到客户端中？ - Risadinha

回答自己：任何不是从客户端代码导入的内容（只在API代码中导入）默认情况下不应该打包进客户端。 - Risadinha

@Risadinha 谢谢你的跟进，这就是我在寻找的答案。 - ICeZer0

@Risadinha，你的评论帮了我很多——创建一个 utils/helpers.js 和一个 utils/api_helpers.js 来避免从同一文件导入客户端和 api 可以解决我的问题。 - Keith