关于 React 和 Next.js 的一些问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 450 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想仿一下VGtime这个新闻网站，练练手（不想做 xxx 管理系统）。

我本身是后端开发，稍微会点前端。

后端想使用 Java+Spring Boot+RESTful API ，前端想使用 React+TypeScript+Next.js

但是目前在学习 Next.js 的时候遇到了点问题：

一是最新的 Next.js 推荐使用 App Router ，比较新，缺乏文档和视频，不知道如何上手比较好。

二是我目前还没有找到优质的参考项目或最佳实践。

三是我在 Github 找到的的 Next.js 项目大多不涉及后端交互，缺少与后端集成的实例。

希望大家能推荐一些适合的参考项目给我。

React

TypeScript

GitHub

33 条回复 • 2024-03-03 22:03:09 +08:00

maolon

2023-09-06 03:04:59 +08:00 via Android

nextjs 官方网站有一个 template,里面基本都是 github 上开源模板，你可以选个自己喜欢的模板然后参考他。https://vercel.com/templates/next.js

zed1018

2023-09-06 08:44:43 +08:00

nextjs 本身就能写后端建议直接按全栈做，install 一个 prisma 就能连数据库了

zed1018

2023-09-06 08:45:54 +08:00

如果你想把 nextjs 当成纯前端框架，那就直接 swr+fetch 或者 use+fetch 就完事了

NessajCN

2023-09-06 08:58:26 +08:00

app router 就是用 route.ts 代替 page.tsx （这俩不能共存）, 这样可以接收 POST 或者自定义接收请求后的行为

zhudapaooo

2023-09-06 09:31:37 +08:00

https://movies.nuxt.space 这个怎么样

karott7

2023-09-06 09:37:58 +08:00

看了下，目前官网就是介绍 app router 的

zhwithsweet

2023-09-06 09:47:20 +08:00

nextjs 目标是全栈应用；你前后端分离还是直接 vite 起个 react 项目吧

7inFen

2023-09-06 11:29:37 +08:00

试试 tRPC + Nextjs 吧，这是最近比较热门的技术
https://trpc.io/docs/example-apps

lilei2023

2023-09-06 11:37:36 +08:00

@zhudapaooo 这不是 vue 么？也不是 react 啊？

hevi

2023-09-06 11:48:23 +08:00

nextjs app router 坑挺多的（文档看得很辛苦，主要是我菜），还有一些不兼容的问题，

如果不做后台 xx 管理系统，可以去试试 astro

哪天想做管理系统了，再开坑

anoyi

2023-09-06 11:48:47 +08:00

你是第一个说 nextjs 缺乏文档的，哈哈

angrylid

2023-09-06 11:57:52 +08:00

一不要用 App Router 直接用 Next12 就行了。
二参考 t3stack ，NextJS+prisma+trpc+tailwindcss+@shadcn/ui 应该是现在最 in 的排列组合
三我觉得 NextJS 正确打开方式就是直接通过 prisma 或者 typeorm 直接连数据库

现成项目看看 civitai/civitai 这个 repo

Nyeshuai

2023-09-06 12:51:02 +08:00

@angrylid 借位置问下，仅使用 prisma ，是不是一定要通过 route handler 了，也只能在里面用，就只满足下基础的数据返回，需要些自主业务逻辑还是要另外集成个 server 把？

liberty1900

2023-09-06 12:54:17 +08:00

Next.js 以前是 SSR 现在加了个 RSC ，俺这个前端也还在摸索它到底如何工作

amlee

2023-09-06 13:04:54 +08:00

暂时不要用 app router ，就用 pages router

app router 是 nextjs 为了 react 的 server component 做的，目前生态还没有跟上，大量的 react 库都还是 client component 。

server component 本身是新提出来的一个概念，我看了 app router 的文档，感觉目前很混乱，你得时刻记着自己的组件是 server 的还是 client 的，有时候你用了一个 api ，它自动把 server 转成了 client ，总之就是很乱

总之，目前不要趟 app router 这个坑

gogogo1203

2023-09-06 13:07:18 +08:00

我建议直接看 https://github.com/gothinkster/realworld 太多 stack 可以学习。React 可以学习一下这个 https://github.com/sldk-yuri/realworld-react-fsd 新的 nextjs 太多东西要重弄，但是我还搞不清具体重弄了有什么具体的好处。我觉得没有必要限制得太死，还不如多学习一下 react 的其他生态，zustand, framer-motion ，tanstack-query 等等。

gogogo1203

2023-09-06 13:32:55 +08:00

@liberty1900 不用 nextjs ，基本不能用 RSC. 首先要有特殊 bundler 去区分 client vs server, 然后还有有新的服务器去区分和执行 RSC 。我烦的是以前学的全部颠覆了，所有的东西都是新的。最烦的是好处和代价是未知的。

Lesenelir

2023-09-06 13:58:37 +08:00

既然你后端都用 Java 了，就不需要再用 Nextjs 了，可以直接 vite 起个 react 项目开始写。
如果你要用 Nextjs 写一个全栈项目，参考 12 楼的 T3 Stack 。

nullcache

2023-09-06 14:01:21 +08:00

@Lesenelir vite 起的，ssr 、路由什么的都得自己来啊

dcsuibian

2023-09-06 14:05:44 +08:00

@zed1018
@zhwithsweet
@Lesenelir
我大概理解了，Next.js 偏全栈了。而我确实就只需要一个前端框架，但问题是如果直接用 vite 起的话，ssg 的功能还是实现吗？

liberty1900

2023-09-06 14:07:02 +08:00

@gogogo1203 https://www.thearmchaircritic.org/mansplainings/react-server-components-vs-server-side-rendering

昨天看了这篇文章，大意是 CSR 的问题是 FCP ，SSR 解决了 FCP 但是因为水合的原因带来了 TTI 的问题，RSC 解决了 FCP 并且在很大程度上缓解了 TTI

MD ，这些 3 个字母的缩写俺是忍够了

EthanLiu1993

2023-09-06 14:11:05 +08:00

@dcsuibian 虽然偏全栈但是它可以纯前端，实在不行它还可以直接静态打包都可以

pannanxu

2023-09-06 14:16:42 +08:00

用 nextjs 也可以导出静态页面，相当于拿它做脚手架，很不错的，我就准备把脚手架用 nextjs 重构，react router 用不习惯。如果后端不用 nextjs ，那就和平常写代码没啥区别的，纯粹当脚手架即可。类似 umijs ，但不喜欢 umi

gogogo1203

2023-09-06 14:27:31 +08:00

@liberty1900 当初用 react 是因为不想用 jquery 去一个个 DOM element 改和 state 管理更方便。我以前后端用 go, 服务器用 ngnix, react 就是 static asset. React server component 不应该这么叫，应该叫 full stack nextjs server component. 除非是新项目和完全拥抱 vercel ，不然我不会花太多精力去弄明白 RSC.

angrylid

2023-09-06 15:40:53 +08:00 via Android

@meta575 不是 NextJS 非得和 JS 的 ORM 一起用，而是这样用才达到了一个 JS 程序员干前后端两份活的目的。