Nextjs基础-基础概念
（每次都输入Next Js太累了，下面全都用Next代替）
不老生常谈的讲
——为什么是Next而不是react
众所周知，Next是SSR，即服务器渲染，那么渲染阶段是在服务器上操作的。这个时候你是不是想到了Java Web 这种古老的渲染方式，并且感叹互联网是个圈，兜兜转转的一切都回去了。并且想到，明明前后端分离的好处是让程序员更专注的做一件事，现在拿一份工资前后端都做了，越来越卷。前端已死看来是被同行卷死的。
那么掌握Next是不是就掌握后端了呢？据我来看，很遗憾，并没有。当你掌握了Next你依然不能说自己是一个全栈工程师。因为Next是UI向的。你可以把它当作一个可以操纵数据库的react。可以做一少部分后端可以做的事，能做的事情甚至没有express做的多。
那么这么一个 高不成低不就的框架 能带来什么呢？
完全不需要配置
当你使用脚手架生成项目后，理论上你可以直接使用的。使用的方式很简单，你只需要会创建文件夹和使用JSX就可以了，不需要考虑创建路由什么的。
优雅的进行服务端动态渲染与静态渲染
react项目只要稍微大点，首页就会有白屏。你尝试用Vite打包，速度是快了不少但还是有白屏，你尝试用骨架屏增加体验，但还是治标不治本。你向十年开发大佬问，他说当年他用JSP的时候从来没有这种问题，你开始琢磨服务端渲染。express加模板引擎是治本了，却不优雅了。项目就是增删改查，完全没难度，一模一样的接口写了一大堆，渲染出来又极其难看。你想如果有一个框架能写简单的接口，又能向react一样模块化的渲染就好了，如果我没数据的情况下，能实现静态渲染就更好了
回想起刚学html的时候，写一个官网页面做练习。每个页面都要复制一个一模一样的Head和Foot标签。当时就在想，如果重复标签可复用就好了。尤其是服务端渲染，服务端渲染一次后就会缓存下来，体验不要太好
知识点
知识点一 布局
为什么要关注布局
在UI部分我认为最重要的是布局，因为无论是路由，页面都与布局息息相关，它需要你思考什么地方用什么渲染方式
在做一个程序前一定要想好，需要几个页面，分别要干什么，哪些经常变化，哪些不会变化。
举个例子：在使用react的时候，我们可以通过使用antd等组件库的layout布局。一个中后台项目，往往有一个头部、菜单、内容的布局，头部和菜单不会变化，变化的往往是内容区。那我们可以在内容区添加一个插槽，为其配置一个路由表。当url变换，里面的组件也跟着变换。
我们会发现，头部和菜单不变化，那么这个部分，可以使用服务器预渲染，减少白屏时间。
那么在Next中，可以将头部和菜单部分放到根布局中，把需要变换的页面放到内容区中。
Next 支持同构，也就是一个页面部分客户端渲染，部分服务器渲染。比如一个登录界面，登录框部分可以使用客户端渲染，其他部分服务器渲染。那么，客户端只用处理一个模块，其他的交给服务端去做。那么服务端应该去渲染哪些地方？
所以在开发的过程中，第一步肯定要对每个模块做定位，如果是长时间存在，且没有交互的部分应该交给服务端。
比如说页面中导航菜单，页脚友情链接部分。这些往往不会进行改变，而且在不同页面都会保持存在。或者写一篇文章，文章的整体一般保持不变，也无需交互也可以服务端渲染。如果文章下面有点赞或者评论。这个部分单独用客户端渲染即可。
注意：在Next中必须有一个根布局（root layout）
export defaule function RootLayout ( {children} ) {
return <html lang="en">
<body> {children} </body>
</html>
}
export defaule function Page ( ) {
return <div> hellow next </div>
}
知识点二 路由
每个程序都是由路由支撑起来的，路由是Next 最重要的特点，没有之一。现在大部分文章告诉你的都是Next 12版本以前的路由方式，这里不做研究。针对针对Next 13的App路由做介绍。
在开发中有一句话，约定大于配置，Next使用的就是约定式路由，即创建文件夹就是路由地址。当然，如果你是一个资深的Reacter，恰好你对阿里的生态圈比较熟悉，你也不会感到稀奇，毕竟Umi就是这么做的。
那Next 13的路由有哪些特点呢？
一、App路由器
在版本 13 中，Next 引入了基于 React Server 组件构建的新 App Router，它支持共享布局、嵌套路由、加载状态、错误处理等。
这官方文档中的话，已经很简介了。在Next中，有一个/src文件夹，下面有一个/app文件夹，里面每一个文件名，就是url中的其中一部分。
这个应该很好理解，不多做赘述。注意：安装的时候一定要选择App路由
如何安装？
二、动态路由
以上可以称之为静态路由，那么如果路由段是个id呢？
假如你有一个购物网站，当点击商品的时候会到商品详情页。我相信你会用react实现，因为你有useRouter这样的hooks，可以提前配置。那么在约定式路由应该怎么实现呢？答案是利用[]建立文件夹实现动态路由
比如：你有一个文件夹/app/blog/[id]那么你打开网站大概长这样localhost:3000/blog/1234
那么你如何接受传递过来的1234这个id呢？
// 路径： /app/blog/[id]/page.js
export default function Page({ params }) {
return <div>My Post: {params.id}</div>
}
是不是超级简单。
三、路由组与布局关系
我相信你已经对Next有所理解，那么你想一下，如果你想在一个网站中有多种布局应该怎么样？如果你觉得有点抽象，那么举个例子：
网站有两个页面，一个是首页与详情页，一个是登录与注册页。
首页和详情页都有导航栏和页脚，登录注册页没有导航栏和页脚而且除了登录框和注册框不一样外其他一样。这样是不是就两种布局。这种应该怎么样解决？
使用路由组，将两套布局分离开 这样就可以有两个根布局了。
可以通过将文件夹名称括在括号中来创建路由组：
(folderName)。这允许您将路由段和项目文件组织到逻辑组中，而不会影响 URL 路径结构。
是不是还挺有意思的。用路由组对页面功能进行多种的划分，非常方便。
在开发过程中，我认为越是大的项目，在根布局尽量减少模块。因为一个路由组下的根布局会影响到该文件夹下所有的页面。
三、路由跳转
路由跳转有两个方式，在服务器渲染使用<Link>标签，在客户端渲染即可以使用<Link>标签，又可以使用useRouter钩子函数。
服务器渲染
import Link from 'next/link'
export default function Page() {
return <Link href="/about">关于</Link>
}
携带参数和获取参数暂不赘述，这里只做简介
客户端渲染
'use client';
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/about')}>
跳转到关于
</button>
)
}
知识点三、页面
一、客户端渲染
文件夹组成了路由，最后都指向了page文件。页面中显示什么内容都是放在page中。如果说布局一般都是服务器渲染，那么页面既可以是服务器渲染，也可以是客户端渲染。
如果你需要一个中后台页面，那你则需要客户端渲染，因为服务端渲染不支持交互，切记。什么意思呢，在服务端渲染中点击事件、生命周期、state 、props，hooks 这些都没了，antd等ui组件不能引入了（可以但貌似很麻烦）。
那么怎么生命这是一个客户端组件呢？
"use client";
export default function Page () {
return < div> hellow page </div>
}
"use client"; 就是客户端渲染的标志。
二、嵌套布局
那么，一个文件夹下有一个布局，一个页面，如果我想使用组件来替换布局里的，也可以
这个图应该已经很明白了。
知识点四 请求
虽然你可能很熟练的使用axios,但这里我还是推荐使用fetch，因为fetch不仅作为数据请求，而且还有缓存和数据重新验证功能。
如：
fetch('https://...', { next: { revalidate: 3600 } })
在服务端使用fetch 尽管你发了两次请求，实际上只有一次
总结
了解了这些知识点，现在应该可以进行最基础的前端开发了。