reactjs - 如何/在何处将模型/ Controller 放入下一个 js 应用程序？

Question

使用 next.js 学习 javascript 开发。我创建了一个骨架项目，具有以下结构。什么是最好的发展方式。创建模型， Controller ？模型和 Controller 文件夹应该在哪里？还是在 react 世界中有不同的方法来做到这一点？

app
> .next
> node_modules
> pages
  > api
    > app.js
> public
> src

Answer 1

TL;DR 由于 nextjs 并未在此级别强加约定，因此完全由您和您的团队决定采用何种架构以及如何实现和组织架构。您可以从类似 MVC 的框架中汲取灵感，例如 https://blitzjs.com/ ，它成功地从现在陈旧乏味的 Ruby on Rails 中引入了许多概念。

如果你仔细想想，MVC在服务器端非常适合 nextjs。这是我从经典的模型- View - Controller 的角度来看它的方式:

Controller 根据用户交互操作您的模型，将结果拼接在一起并将它们传递给 View 。

在 nextjs 的术语中，pages 确实非常适合这一职责，尽管它们的作用远不止于此。您可以将模型放在任何您想要的地方，许多入门级教程将它们放在 lib/ 下。

考虑这个例子，我有一个页面来显示用户配置文件，在这种情况下，我也对生成静态网站感兴趣。旁注，我是随手写的，所以要注意复制和粘贴来运行它，它很可能不起作用。

// under app/pages/users/[userId].js

import UserProfile from 'components/user-profile';
import User from 'models/user';

export default UserProfile;

// both at request time and build time, preps the props passed to the View.
export const getStaticProps = async ({params}) => {
  const user = await User.find(params.id);
  return { 
    props: { user }
  }
}

// instructs next to render all user profiles using SSG
export const getStaticPaths = async () => {
  const users = await User.findAll();
  const paths = users.map(user => `/users/${user.id}`);
  return { paths, fallback: false }; 
}

我和我的团队喜欢更进一步，并遵循这种结构，虽然我们不连接数据库，但连接文件系统和一些第三方 API，基于 REST 和 GraphQL。小 secret :我们告诉nextjs which files to look for to load pages , 否则它会有点疯狂。

project
└── app
    ├── components
    │   ├── user-profile.test.tsx
    │   └── user-profile.tsx
    ├── models
    │   └── user.ts
    │   └── user.test.ts
    └── pages
        └── users
            ├── [userId].page.ts
            ├── get-static-paths.test.ts
            ├── get-static-paths.ts
            ├── get-static-props.test.ts
            └── get-static-props.ts