nextjs（1）

公司有个 dify 的项目，想法是前端能不能做一个 UI 修改，后期可能还有业务逻辑修改。下载源码后发现技术栈为 nextjs，是基于 react 的，所以就先学习一下。

基础知识

1. react 存在的问题：js 环境、首屏加载慢、安全问题、SEO，nextjs 解决了这些问题，具体方式是渲染后移，SSR 服务端渲染和 SSG 服务端生成，将原来在浏览器中渲染（将数据渲染成 DOM，并不是 DOM 渲染成图像）的动作后移到服务器上去。
   getServerSideProps 用来做服务端渲染（每个请求的时候运行）
   getStaticProps/getStaticPaths 用来做服务端生成（build 生成静态页面的时候运行）
2. 默认为服务端组件，使用”use client”转换成客户端组件。
3. React的useEffect ：
   是React Hooks API中的一个重要Hook，用于在函数组件中处理副作用。副作用是指那些不直接与组件的渲染逻辑相关，但需要在组件的生命周期中执行的操作，例如数据获取、订阅事件、手动操作DOM等。
   它可以替代类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。useEffect 可以根据传入的依赖数组来决定何时执行副作用函数。如果依赖数组为空（[]），则副作用函数只会在组件挂载后执行一次，并在组件卸载时执行清理函数（如果有）；如果依赖数组中有值，则副作用函数会在组件挂载后以及依赖项变化时执行。

安装

npx create-next-app@latest

附录
nextjs中文网
tw组件参考