nextjs 正确使用方式

2024-04-17 13:46:15 +08:00
 Cola98

目前在用 Go 做后端开发,前端打算使用 next.js ,但是看了几个帖子下来说 next.js 做全栈会更好一点,还有建议使用 vite 创建 react 项目的。所以比较好奇,这样的技术栈搭配会不会有什么问题?

6515 次点击
所在节点    程序员
38 条回复
Makabaka01
2024-04-17 19:04:42 +08:00
@oliveira 我日常就是这俩,说实话这俩语言其实切换没啥心智负担,目前唯一遇到的就是 switch 循环 go 不需要 break ,这个有时候会写错
herozzm
2024-04-17 19:11:37 +08:00
不知道 next.js 的 ORM 怎么样
epiloguess
2024-04-17 19:32:21 +08:00
@horizon nextjs 写后台是没问题的,现在客户端导航 CSR , 非常完善, 纯 SPA 的优势在哪里我不知道...MPA 一样可以做到预读取,无缝渲染,路由权限也可以用 并行路由/条件路由来实现...
wuhao666
2024-04-17 19:36:39 +08:00
有人用 sveltekit 吗
Cola98
2024-04-17 19:38:55 +08:00
@oliveira 还好,都学一点,发展看看能不能做全栈,哈哈哈哈
raw0xff
2024-04-17 19:55:31 +08:00
对 next.js 一无所知,弱弱的问一下如果我用 next.js 写一个带页面的后端服务给别人用,是不是就相当于把源代码都给了别人?
qingyingwan
2024-04-17 20:07:08 +08:00
后台管理:页面性能要求不高,业务复杂难度高、交互复杂度高。前后端分离,vite+react
博客官网:页面性能有要求,没啥业务难度。nestjs 一把梭。
问题不是渲染或者路由方案的事,而是有的复杂业务问题没有解决方案,你可以在大部分情况用的很爽,但一个核心问题没有现成方案或者不支持就是致命的
huijiewei
2024-04-17 21:28:26 +08:00
@raw0xff bundle + minify 就好了
xiaohanyu
2024-04-17 21:30:35 +08:00
用 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 的后端方案了。
xiaohanyu
2024-04-17 22:02:28 +08:00
@raw0xff 并不是的,next.js 的代码有一部分会在前端浏览器里运行,另一部分是在后端运行的,后端的就不用说了,前端的代码也是经过编译和混淆的,基本上也是不可读的状态。
xiaohanyu
2024-04-17 22:10:14 +08:00
前后端都用 JS/TS 还有一个好处,就是利用 npm/yarn workspace 这种功能,可以将部分前后端共享的代码抽出来共享,比如一些数据类型定义,一些 utility 等等(楼上也有人提到了 trpc 这种方案,我没有用过)。
Cola98
2024-04-17 22:30:17 +08:00
@xiaohanyu 多谢大佬解答!
DesnLee
2024-04-18 10:20:18 +08:00
@oliveira 我 go ts 切换 没负担
kailpony4396
2024-04-18 14:06:29 +08:00
go+htmx 挺有趣的
opentrade
2024-04-18 15:52:58 +08:00
相比前后端分离,效率并没有提高,反倒引入了更多复杂性,使用一个月后的观感
lstz
2024-04-18 21:19:13 +08:00
@Cola98 #10 最近被 Next.js 的 abortIncoming 给弄得有点无奈了,时不时就自己退出程序了。现在感觉到,只用 Node.js 拿来做 serverless 的渲染层+Go 核心服务才是绝配,Nextjs 挂了就重新启动,不太建议把一些重活或者关键的程序放到 Next.js 上
superhot
166 天前
@xiaohanyu 大佬好,想请教一下 TS Fullstack Monorepo 的话,具体怎样共享前后端通用的代码呢?
1. 配 tsconfig 的时候,因为共享部分的代码需要同时跑在浏览器和 Node 上,`target`,`moduleResolution` 之类的应该怎么配呢?
2. 在前后端分别引入共享代码的时候,是把共享部分单独打包成 npm 包,然后各自作为项目依赖引入?还是直接通过相对路径引入呢?相对路径的话,有些嵌套特别深的地方,会有很长一串 `../../`,想通过 `paths` 配别名,但这个配置不影响运行时行为,Node 下会不识别引入路径,该如何解决呢?
3. Monorepo 的 Git 提交记录会不会很乱?
提前谢过!
xiaohanyu
166 天前
@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

以上

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1033244

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX