给官方的一些建议希望能借鉴（持续输出建议）。

[lanmingle]

各位好！

我从事全栈架构工作，后端以java为主等，前端以ng为主，很久以前使用过react，后续基本上没有接触了，最近发觉自身技术上已经有点落后了，先从前端开始，哟！一个大大的坑等着我。

从新学习react，发现函数编程非常好，没有ng那样重，但发觉一系列的问题来。
在react上有丰富的UI库，图表等等，然后我如何工程化？能让团队快速使用以及学习成本等都不要那么高的要求，能快速做管理后台等。

主要目的要有以下的点：
1、工程化（从零开始建？别开玩笑了，没必要，能用社区就用社区，办法总会有的，得学会站在巨人上，目的就是搞钱）
2、微前端（ng已有自身的解决方案） -- 在 react中有 qiankun、无界等等
3、易学习，低成本，集成一系列约定，可配置
4、维护力支撑，现代化方案
5、等等

主要是做管理后台以及商户等，基于一系列的需求，从UI入手，看 antd 是主要的（以往用的是ng版），后续了解以及去试用，从 umi 到 nextjs 都不能让我觉得可以一直用下去，要么差了点，要么没有我想要的。

umi：它的维护力让我担忧（一堆不维护也不告知等等），耦合太严重了，调试等等问题，虽然和antd、qiankun等结合很好，但是要的是基础架子（吐槽：还是ng的工程化6）
nextjs：让我眼前一新，很奈斯，可是约定得太厉害了，没法让我自定义，微前端（多区域）的方案还是刚开始，太不完善了。

之前在 nextjs 的讨论中看到有提： modern 的，但是网站打不开，后放弃了，今天，又看到，试着打开看看，文档大概看完了，奈斯！
有着 nextjs 和 umi 的优点，也很便利，在学习和测试 nextjs 中，发现有些功能还是很好，所以向官方提一下意见，希望能接受。

[lanmingle]

1、希望官方能实现 react 的 全栈架构愿景 并能写进官方推荐中

如：如果可以能不能不使用 NoSSR 这样？使用 'use client'

[zllkjc]

这是两个不同的概念，Server Component / Server Action 还在规划中，预期在明年年中会发布。

[lanmingle]

只是举一下例子，今天才扫一次文档，对了！文档中好像不太清晰，是否提供一个目录结构的文档以及文件说明？
如：https://nextjs.org/docs/getting-started/project-structure 和 https://nextjs.org/docs/app/api-reference/file-conventions
如果我没有先去了解 nextjs ，我觉得这个文档我是 get 不到的，多多少少有点懵逼。

[zllkjc]

很好的建议，之前是放在 https://modernjs.dev/apis/app/hooks/src/app.html 这里文件约定。但看起来缺少一些 overview
最近我在做文档优化相关的事情，会将这个问题解决 https://github.com/web-infra-dev/modern.js/discussions/5927，如果有其他想法也可以添加在这里。

[lanmingle]

2、在学习 nextjs 中，app 路由其中，template.[jt]sx 是一个很好的约定。
如在这个文件中做客户端渲染（CSR）的某些逻辑，如包装路由事件的进度条等等。

[lanmingle]

3、在 nextjs 中我提交一个讨论，是说部分的约定文件是否可以配置使用外部公共的（没有回复）。
如根中：

• layout.tsx
• error.tsx
• loading.tsx
  等等，每一个微前端工程都复制拷贝一次（基本上是一致，左侧菜单），如果后续需要修改就很大工程，虽然可以这样实现，可是很烦的，另外就是不配置自定义路由，都是基于约定路由的方式。

import A from 'xx'

export default A

建议在配置中可以配置封装共享后的约定文件。

export default defineConfig({
  可配置约定路由: {
    layout: '@xx/库/'layout',
    error: '@xx/库/'error',
    loading: '@xx/库/'loading',
  },
});

[zllkjc]

配置 + 约定组合使用增加实现成本，阅读起来也很麻烦。如果想在 layout 外面在扩展还是要回到约定文件上。不过 remix 也有计划提供类似配置式的方式，但显然不是混用的 https://github.com/orgs/remix-run/projects/5/views/1?pane=issue&itemId=62153560。
@yimingjfe 你觉得呢。

[lanmingle]

的确是，我只是建议做顶层，或叫通用的，实在不行只能：import + export 这样。

[lanmingle]

4、既然状态管理也有推荐使用的方案，那么是否整个授权或权限方案？看到 arco pro 有相关的集成方案，是否整到这里中？虽然只是个 CSR 方案但很不错，另外是否可以提供一个类似 netxjs 的中间件方案？基于SSR方式授权或权限。

[zllkjc]

• 状态管理方案我们不准备继续提供了，社区上有很多更好的状态管理方案。
• 我不知道你说的是哪个方案，可以贴下链接。权限在另一个 issue 也有被开发者提到，我们会考虑一下，内部已经有相关实现了。
• 中间件方案 Modern.js 是有的，https://modernjs.dev/apis/app/runtime/web-server/unstable_middleware.html 参考这个

[lanmingle]

状态：https://modernjs.dev/guides/topic-detail/model/quick-start.html 这个看情况使用吧。
这个 Middleware 我看过了，意思是否有提供实现好的，没有的话只能自行实现了。

[zllkjc]

reduck 不太推荐使用，维护力度不大。
》 ps 我刚刚说链接是说 arco 的那个方案链接

权限现在还没有提供实现，我们近期去考虑一下，如果你有期望的方案也可以继续补充。

[lanmingle]

arco pro：https://arco.design/docs/pro/permission

如果为后缀长期的维护和跟进（服务器组件），我还是建议提供类似 arco pro 的，CSR做页面控制（如未登录跳转到未登录页面，没有权限就不显示某个按钮或页面），SSR就很难说了，这部分还是挺复杂的，虽然 nextjs 有 next-auth 实现，但是非国内需求（一般都是微信、抖音等等大厂登录方式）

[lanmingle]

5、约定路由中是否提供一个 404的约定？还有 error 能否提供支持到子级路由中？像 nextjs 那样？
因为还是真的有这样的需求，/xxx - > error.tsx 或 404.tsx ，/我的应用下路由（SPA）/ error.tsx 或 404.tsx，这两个 错误和404是和之前的不一样，现在只能通过获取路径渲染不同的

[lanmingle]

6、约定路由插座是否支持？类似 https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#slots 这样的功能？

[zllkjc]

目前没有哈

[lanmingle]

7、路由事件支持？是否有一个约定的方式用于监听路由的事件？开始、结束等等（参考：https://umijs.org/docs/api/runtime-config#onroutechange）

[lanmingle]

@zllkjc

[zllkjc]

https://reactrouter.com/en/main/hooks/use-location#uselocation