V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dcsuibian
V2EX  ›  程序员

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

  •  
  •   dcsuibian · 178 天前 · 3636 次点击
    这是一个创建于 178 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想仿一下VGtime这个新闻网站,练练手(不想做 xxx 管理系统)。

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

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

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

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

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

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

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

    32 条回复    2023-09-09 00:53:13 +08:00
    maolon
        1
    maolon  
       178 天前 via Android
    nextjs 官方网站有一个 template,里面基本都是 github 上开源模板,你可以选个自己喜欢的模板然后参考他。https://vercel.com/templates/next.js
    zed1018
        2
    zed1018  
       178 天前   ❤️ 2
    nextjs 本身就能写后端建议直接按全栈做,install 一个 prisma 就能连数据库了
    zed1018
        3
    zed1018  
       178 天前
    如果你想把 nextjs 当成纯前端框架,那就直接 swr+fetch 或者 use+fetch 就完事了
    NessajCN
        4
    NessajCN  
       178 天前
    app router 就是用 route.ts 代替 page.tsx (这俩不能共存), 这样可以接收 POST 或者自定义接收请求后的行为
    zhudapaooo
        5
    zhudapaooo  
       178 天前
    https://movies.nuxt.space 这个怎么样
    karott7
        6
    karott7  
       178 天前
    看了下,目前官网就是介绍 app router 的
    zhwithsweet
        7
    zhwithsweet  
       178 天前   ❤️ 2
    nextjs 目标是全栈应用;你前后端分离还是直接 vite 起个 react 项目吧
    7inFen
        8
    7inFen  
       178 天前
    试试 tRPC + Nextjs 吧,这是最近比较热门的技术
    https://trpc.io/docs/example-apps
    lilei2023
        9
    lilei2023  
       178 天前
    @zhudapaooo 这不是 vue 么?也不是 react 啊?
    hevi
        10
    hevi  
       178 天前
    nextjs app router 坑挺多的(文档看得很辛苦,主要是我菜),还有一些不兼容的问题,

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

    哪天想做管理系统了,再开坑
    anoyi
        11
    anoyi  
       178 天前
    你是第一个说 nextjs 缺乏文档的,哈哈
    angrylid
        12
    angrylid  
       178 天前   ❤️ 2
    一不要用 App Router 直接用 Next12 就行了。
    二参考 t3stack ,NextJS+prisma+trpc+tailwindcss+@shadcn/ui 应该是现在最 in 的排列组合
    三我觉得 NextJS 正确打开方式就是直接通过 prisma 或者 typeorm 直接连数据库


    现成项目看看 civitai/civitai 这个 repo
    meta575
        13
    meta575  
       178 天前
    @angrylid 借位置问下,仅使用 prisma ,是不是一定要通过 route handler 了,也只能在里面用,就只满足下基础的数据返回,需要些自主业务逻辑还是要另外集成个 server 把?
    liberty1900
        14
    liberty1900  
       178 天前
    Next.js 以前是 SSR 现在加了个 RSC ,俺这个前端也还在摸索它到底如何工作
    amlee
        15
    amlee  
       178 天前
    暂时不要用 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
        16
    gogogo1203  
       178 天前
    我建议直接看 https://github.com/gothinkster/realworld 太多 stack 可以学习。React 可以学习一下这个 https://github.com/sldk-yuri/realworld-react-fsd 新的 nextjs 太多东西要重弄,但是我还搞不清具体重弄了有什么具体的好处。 我觉得没有必要限制得太死,还不如多学习一下 react 的其他生态,zustand, framer-motion ,tanstack-query 等等。
    gogogo1203
        17
    gogogo1203  
       178 天前
    @liberty1900 不用 nextjs ,基本不能用 RSC. 首先要有特殊 bundler 去区分 client vs server, 然后还有有新的服务器去区分和执行 RSC 。 我烦的是以前学的全部颠覆了,所有的东西都是新的。最烦的是好处和代价是未知的。
    Lesenelir
        18
    Lesenelir  
       178 天前   ❤️ 1
    既然你后端都用 Java 了,就不需要再用 Nextjs 了,可以直接 vite 起个 react 项目开始写。
    如果你要用 Nextjs 写一个全栈项目,参考 12 楼的 T3 Stack 。
    nullcache
        19
    nullcache  
       178 天前
    @Lesenelir vite 起的,ssr 、路由什么的都得自己来啊
    dcsuibian
        20
    dcsuibian  
    OP
       178 天前
    @zed1018
    @zhwithsweet
    @Lesenelir
    我大概理解了,Next.js 偏全栈了。而我确实就只需要一个前端框架,但问题是如果直接用 vite 起的话,ssg 的功能还是实现吗?
    liberty1900
        21
    liberty1900  
       178 天前
    @gogogo1203 https://www.thearmchaircritic.org/mansplainings/react-server-components-vs-server-side-rendering

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

    MD ,这些 3 个字母的缩写俺是忍够了
    EthanLiu1993
        22
    EthanLiu1993  
       178 天前   ❤️ 1
    @dcsuibian 虽然偏全栈但是它可以纯前端,实在不行它还可以直接静态打包都可以
    pannanxu
        23
    pannanxu  
       178 天前   ❤️ 1
    用 nextjs 也可以导出静态页面,相当于拿它做脚手架,很不错的,我就准备把脚手架用 nextjs 重构,react router 用不习惯。如果后端不用 nextjs ,那就和平常写代码没啥区别的,纯粹当脚手架即可。类似 umijs ,但不喜欢 umi
    gogogo1203
        24
    gogogo1203  
       178 天前
    @liberty1900 当初用 react 是因为不想用 jquery 去一个个 DOM element 改和 state 管理更方便。 我以前后端用 go, 服务器用 ngnix, react 就是 static asset. React server component 不应该这么叫, 应该叫 full stack nextjs server component. 除非是新项目和完全拥抱 vercel , 不然我不会花太多精力去弄明白 RSC.
    angrylid
        25
    angrylid  
       178 天前 via Android
    @meta575 不是 NextJS 非得和 JS 的 ORM 一起用,而是这样用才达到了一个 JS 程序员干前后端两份活的目的。
    heoizokdung
        26
    heoizokdung  
       178 天前
    'use client';
    fescover
        27
    fescover  
       178 天前
    dyllen
        28
    dyllen  
       178 天前
    和后端交互,直接在组件的 mount 事件里面请求 api 加载数据,用原生的 fetch 都可以,nextjs 有个 swr ,专门用了做获取远程数据的,用这个不需要在 mount 事件里面搞。
    jlak
        29
    jlak  
       177 天前 via iPhone
    app router 官方文档很完整 建议看官方文档 基本什么答案都有
    wordx
        30
    wordx  
       177 天前
    最近在用 nextjs 的 app router 这一套写,拥抱 vercel ,多看看文档还是不错的,
    项目: https://github.com/yesmore/meetu
    g1vemep0wer
        31
    g1vemep0wer  
       177 天前
    你可以看看我的网站,就是用 ts + react + nextjs13 + tailwindcss + mdx 实现的

    https://xiaojun.im
    sima675
        32
    sima675  
       175 天前
    @7inFen t3 的那套技术栈吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2596 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:13 · PVG 19:13 · LAX 03:13 · JFK 06:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.