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

[dcsuibian]

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

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

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

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

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

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

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

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

[maolon]

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

[zed1018]

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

[zed1018]

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

[NessajCN]

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

[zhudapaooo]

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

[karott7]

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

[zhwithsweet]

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

[7inFen]

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

[lilei2023]

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

[hevi]

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

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

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

[anoyi]

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

[angrylid]

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


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

[Nyeshuai]

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

[liberty1900]

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

[amlee]

暂时不要用 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]

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

[gogogo1203]

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

[Lesenelir]

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

[nullcache]

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

[dcsuibian]

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