nextjs 正确使用方式

38 条回复 • 2025-01-22 14:10:14 +08:00

1

NessajCN

288 天前

2

没啥问题，有些小的后端任务懒得用 go 写了就直接 nextjs 里搞定了

2

ryougifujino

288 天前

2

用 nextjs 可以用 trpc ，前端不用写接口请求 api 还能做到端到端类型安全

3

vczyh

288 天前

1

我感觉用 nextjs 挺好的，下可以只写写前端页面，上可以前后写一起全栈，我当时学 react 都是直接在 nextjs 干的。

4

loveshuyuan

288 天前

1

nextjs 一些轻量的后端可以做，但是要加上中间件、消息队列、授权等之类的话就比较乏力。

5

Cola98

OP

288 天前

@vczyh 嗯嗯，是的，主要看了几个都是做全栈。所以会比较好奇这样的搭配会不会重复，我对前端的理解不多，还停留在数据渲染这些，感谢！

6

Cola98

OP

288 天前

@loveshuyuan 了解，谢谢大佬解答，目前后端技术上是有中间件和消息队列这些，这样的话，能够明白了

7

terranboy

288 天前

3

还在以渲染为主，后端不建议交给前端框架，他们现在真的有点飘

8

terranboy

288 天前

早几年 prisma 吹得听牛逼用了下坑一大堆感觉跟后端的 ORM 还差得远现在不清楚

9

lstz

288 天前 via Android

纯粹渲染挺好的，至于更复杂一些的程序，我选择用 go 来实现

10

Cola98

OP

288 天前

@terranboy
@lstz

感谢，打算就渲染为主了，主要功能还是会用 Go 来实现

11

MrYELiex

288 天前

next 很擅长前端渲染重用户体验的场景前端部分偏向官网/营销/电商后端部分偏向接口拼接及面向前端的业务接口不适合传统意义上的后端和后台管理应用

12

horizon

288 天前

@MrYELiex #11
后台管理应用不适合，怎么说？

13

Track13

288 天前

看你要不要服务端渲染了。不要就 vite+react 。

14

fescover

288 天前 via iPhone

试试 remix spa
https://remix.run/docs/en/main/future/spa-mode

15

MrYELiex

288 天前

@horizon #12 你要硬用来写后台那也不是不行但是没必要啊后台管理是 spa 不管前端用什么路由模式相对服务端都是单页但是 next 默认你就是多页应用所有的设计思路都是多页建议上服务端渲染的后台应用上 ssr 和 mpa 不是脱裤子放屁吗 vite,cra 才是适合这种场景的解决方案

16

tianzx

288 天前

1

感兴趣可以看下我开源的 Saasfly 。https://github.com/saasfly/saasfly

17

horizon

288 天前

@MrYELiex #15
问题在于后台管理为什么就一定是 spa 。。
而且 nextjs 的 DX 很好啊，什么都给配好了，无脑写就行。
也没说用 nextjs 就一样要 ssr 啊。。我现在全部 dynamic import
我反而认为后台就适合用 nextjs 来写，因为不需要什么高并发、中间件
前后端一把梭了

18

oliveira

288 天前

1

Go 和 JS 两门语言切换不觉得会有心智负担吗？
nextjs + trpc + prisma 一把梭不香吗？

19

Makabaka01

288 天前

1

@terranboy 一般 nextjs 不做数据库操作，都是做 bff 拼 rpc 请求的

20

djkloop

288 天前

2

https://github.com/yyong008/remix-antd-admin

也有用 remix 的不过 remix 不如 nextjs 生态强大

21

Makabaka01

288 天前

@oliveira 我日常就是这俩，说实话这俩语言其实切换没啥心智负担，目前唯一遇到的就是 switch 循环 go 不需要 break ，这个有时候会写错

22

herozzm

288 天前

不知道 next.js 的 ORM 怎么样

23

epiloguess

288 天前

@horizon nextjs 写后台是没问题的,现在客户端导航 CSR , 非常完善, 纯 SPA 的优势在哪里我不知道...MPA 一样可以做到预读取,无缝渲染,路由权限也可以用并行路由/条件路由来实现...

24

wuhao666

288 天前

有人用 sveltekit 吗

25

Cola98

OP

288 天前

@oliveira 还好，都学一点，发展看看能不能做全栈，哈哈哈哈

26

raw0xff

288 天前

1

对 next.js 一无所知，弱弱的问一下如果我用 next.js 写一个带页面的后端服务给别人用，是不是就相当于把源代码都给了别人？

27

qingyingwan

288 天前

后台管理：页面性能要求不高，业务复杂难度高、交互复杂度高。前后端分离，vite+react
博客官网：页面性能有要求，没啥业务难度。nestjs 一把梭。
问题不是渲染或者路由方案的事，而是有的复杂业务问题没有解决方案，你可以在大部分情况用的很爽，但一个核心问题没有现成方案或者不支持就是致命的

28

huijiewei

288 天前

1

@raw0xff bundle + minify 就好了

29

xiaohanyu

288 天前

1

用 Next.js 写了自己的 SaaS 产品： https://ppresume.com ，大概 13k 代码左右。

Go + Next.js 肯定是没有问题的。不过根据场景，也需要具体的技术选型。

- 纯 SPA 程序？用 react 就行
- 有搜索 SEO 需求？最好 next.js ，加上单独的后端
- 后端和 next.js 通信又有几种方式，可以采用 next.js 前端和 Go 直接通信，也可以 next.js 的前端 -> next.js server -> go server 通信

如果有比如重的 content management 需求，或者需求一个 admin dashboard ，可以考虑采用一些 headless CMS ，如 strapi 这种直接生成后端，这就是非 Go 的后端方案了。

30

xiaohanyu

288 天前

@raw0xff 并不是的，next.js 的代码有一部分会在前端浏览器里运行，另一部分是在后端运行的，后端的就不用说了，前端的代码也是经过编译和混淆的，基本上也是不可读的状态。

31

xiaohanyu

288 天前

1

前后端都用 JS/TS 还有一个好处，就是利用 npm/yarn workspace 这种功能，可以将部分前后端共享的代码抽出来共享，比如一些数据类型定义，一些 utility 等等（楼上也有人提到了 trpc 这种方案，我没有用过）。

32

Cola98

OP

288 天前

@xiaohanyu 多谢大佬解答！

33

DesnLee

287 天前

@oliveira 我 go ts 切换没负担

34

kailpony4396

287 天前

go+htmx 挺有趣的

35

opentrade

287 天前

相比前后端分离，效率并没有提高，反倒引入了更多复杂性，使用一个月后的观感

36

lstz

287 天前

@Cola98 #10 最近被 Next.js 的 abortIncoming 给弄得有点无奈了，时不时就自己退出程序了。现在感觉到，只用 Node.js 拿来做 serverless 的渲染层+Go 核心服务才是绝配，Nextjs 挂了就重新启动，不太建议把一些重活或者关键的程序放到 Next.js 上

37

superhot

9 天前

@xiaohanyu 大佬好，想请教一下 TS Fullstack Monorepo 的话，具体怎样共享前后端通用的代码呢？
1. 配 tsconfig 的时候，因为共享部分的代码需要同时跑在浏览器和 Node 上，`target`，`moduleResolution` 之类的应该怎么配呢？
2. 在前后端分别引入共享代码的时候，是把共享部分单独打包成 npm 包，然后各自作为项目依赖引入？还是直接通过相对路径引入呢？相对路径的话，有些嵌套特别深的地方，会有很长一串 `../../`，想通过 `paths` 配别名，但这个配置不影响运行时行为，Node 下会不识别引入路径，该如何解决呢？
3. Monorepo 的 Git 提交记录会不会很乱？
提前谢过！

38

xiaohanyu

8 天前

2

@superhot

我的项目架构 ( https://ppresume.com) 大概是这样的：

- ppresume
- packages/common
- packages/api
- packages/client

```sh
$ ls -l packages package.json pnpm-workspace.yaml pnpm-lock.yaml
-rw-r--r-- 1 hanyu staff 1485 Jan 14 21:09 package.json
-rw-r--r-- 1 hanyu staff 744184 Dec 30 10:49 pnpm-lock.yaml
-rw-r--r-- 1 hanyu staff 27 Jan 22 2024 pnpm-workspace.yaml

packages:
total 0
drwxr-xr-x 16 hanyu staff 512 Jan 14 21:09 api
drwxr-xr-x 24 hanyu staff 768 Jan 14 21:09 client
drwxr-xr-x 12 hanyu staff 384 Jan 14 21:09 common
```

- api: 后端 API
- client: 前端 next.js 实现
- common: 前后端共享的 data model/schema validation/utils 等等，不依赖 node.js 系统 API ，所以可以同时跑在两端上。

回复你的问题：

1. tsconfig 我没有特别配置过，common package 的 tsconfig:

```json
{
"compilerOptions": {
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"resolveJsonModule": true,

"declaration": true,
"declarationMap": true,
"sourceMap": true,
"types": ["node", "jest"],

"importHelpers": true,
"composite": true,
"target": "es5",

"rootDir": "src",
"outDir": "dist",

"baseUrl": "."
},

"include": ["**/*.ts", "**/*.json"]
}
```

2. 把 common package 当成一个单独的 npm/pnpm 包引入 api/client ，不需要用嵌套路径。npm/pnpm/yarn 都有相应的 workspace 特性，我最开始用的是 yarn ，后来转到了 pnpm ，参考： https://pnpm.io/workspaces

我的 pnpm-workspace 配置：

```
packages:
- 'packages/*'
```

顶层 `package.json` 配置：

```
{
"name": "ppresume",
"private": true,
"version": "0.7.0",
"dependencies": {
"concurrently": "^8.2.1",
"husky": "^8.0.2",
"lint-staged": "^13.1.0",
"prettier": "^2.8.1"
},
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
"commit-and-tag-version": "^12.4.0"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
"resolutions": {
"jackspeak": "2.1.1"
},
"scripts": {
"api": "pnpm --filter api",
"common": "pnpm --filter common",
"coverage": "pnpm common build && concurrently --kill-others-on-fail \"pnpm common coverage\" \"pnpm client coverage\" \"pnpm api coverage\"",
"client": "pnpm --filter client",
"build": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client build\" \"pnpm api build\"",
"dev": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client dev\" \"pnpm api dev\"",
"start": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client start\" \"pnpm api start\"",
"test": "pnpm common build && concurrently --kill-others-on-fail \"pnpm common test\" \"pnpm client test\" \"pnpm api test\"",
"release": "commit-and-tag-version --bumpFiles package.json packages/*/package.json",
"commitlint": "commitlint --edit"
},
"commit-and-tag-version": {
"writerOpts": {
"commitsSort": false
}
}
}
```

`common/package.json` 的配置：

```
{
"name": "common",
"version": "0.7.0",
"description": "common code shared by ppresume project",
"author": "Xiao Hanyu",
"private": true,
"devDependencies": {
"@types/jest": "^29.5.5",
"@types/lodash": "^4.14.202",
"@types/node": "^20.5.7",
"jest": "^29.7.0",
"ts-jest": "^29.1.1",
"typescript": "^5.2.2"
},
"main": "dist/index",
"types": "dist/index",
"scripts": {
"build": "tsc --build --force",
"coverage": "jest --coverage",
"test": "jest"
},
"dependencies": {
"escape-latex": "^1.2.0",
"tslib": "^2.6.2"
}
}
```

调用 `pnpm common build` 来完成 `common` package 的 build ，然后在 api/client 里直接 `import xxx from 'common'` 就可以了

3. mono-repo 有 mono-repo 的好处的，最大的好处是出了 regression 问题可以用 `git bisect` 找 bug ，commit log 的维护重点还是靠个人/团队守规则。

我个人项目的概况： https://x.com/hanyuxiao1988/status/1878625079829172510

以上