KUN's BlogNextjs
今天看看 nextjs 在讲什么，写点理解
emmm，我自己的理解，不一定对
创建项目
npx create-next-app@latest创建好之后删掉 lock-file, 然后 pnpm i && pnpm dev
emmm，这个打开速度好慢，比起 Vite 来说的话
我继承了 Typescript 和 tailwindcss
项目结构
https://nextjs.org/docs/getting-started/project-structure
Nextjs 这个项目结构介绍的好明了，最开始学 Vue 的时候为了安排一个合理的项目结构费了我几天时间。。
emmm，因为我最开始还不知道诸如 utils, components, types 之类的文件夹里面的结构应该怎么安排好，啊哈哈哈
貌似在创建项目的时候会提示是否需要 src 文件夹，我点了需要，然后把 app 文件夹嵌套在 src 文件夹里面了，现在看来这个决定是正确的
Nextjs 应该还是用的 webpack，也可以在 next.config.js 里面配置
官网的这个 Parallel and Intercepted Routes 我还不是很理解
动态路由的话它的写法是 [folder], 这个写法还是第一次见
路由
定义路由
它这个定义居然是类比了树的结构
貌似这一节解释清楚了什么是平行路由和拦截路由了
并行路由就是多个页面在同一时间在不同的部分同时展示，在当前页面中显示其他路由的内容，而无需完全切换到新的页面，比如编辑的时候打开其它地方的内容在当前页面看一看
拦截路由就是把路由拦截住导航到指定的地方了，比如提醒用户保存草稿。
啊？这样理解对吗？我也不知道啊，因为我今天刚开始看
页面和布局
页面
Nextjs 的每个页面，就是 app 文件夹下面的 page.tsx 文件，然后这个文件夹的路径名就是它的路由
意思就是随便创建一个文件夹 kun，然后在 kun 文件夹新建一个 page.tsx 文件，这样访问 /kun 的时候就会返回 page.tsx 的内容
怎么这么简单。。Vue 还要在路由里面配。。
布局
每个页面里面还可以放一个 layout.tsx 文件，这个文件是布局文件，将会在这个路由下面所有页面共享
这个用的话把 TopBar 和 Aside 放到根布局不就蛮好的嘛
根目录必须有 <html> 和 <body> 标签
布局是不会被重新创建的，它只会被创建一次，并在路由跳转时保留状态
这个倒是很好理解
模板
每个页面中还可以放一个 template.tsx 文件，这是模板文件
这个东东和布局的不同在于切换页面时它会被重新创建一次，不保留状态
修改 <head>
改一下利于 SEO
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Next.js',
}
export default function Page() {
return '...'
}链接和导航
和 Vue 怎么这么像。。。
Next 是 Link 和 useRouter()
用法就是 <Link href={}>, const router = useRouter() ，哦天哪，简直一模一样
路由组
把文件夹命名成 (kun) 这样的形式就行
这个有什么用呢
文件夹的名字都要服从于根目录的共有布局，要脱离这个布局就可以这么用，这个一般用于组织路由
动态路由
这个概念貌似哪里都有
比如 topic/:tid
在 nextjs 里面写法就是
export default function Page({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>
}这是 page.tsx 文件嘛，我们上面说过的
加载 UI 和流式处理
这个就是骨架屏一类的效果，官网说的非常明白
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
讲的是 React 的 Suspense 组件在 Nextjs 里面怎么用
一般来说水合要等到全部结束之后才会呈现页面，然后这么用的话就会逐渐呈现页面，提升用户体验
错误处理
每个页面还能放一个 error.tsx 文件，这个文件就是错误处理文件
用处就是保持页面细粒度以及重载页面
什么是细粒度
这个问题 Solidjs 貌似讲的更加清楚，通俗的说就是精准的找到出错的那个地方，不影响其它的界面
原理
这个错误处理会把这个错误的组件用一个 <ErrorBoundary> 包装一下，然后呈现一个预设的 <Error> 页面，这个 <Error> 页面可以在回调函数中定义
这个错误可能是暂时的，所以还有一个 reset() 函数，调用一下成功的话就会把错误界面替换为渲染成功的界面
处理根组件的错误需要命名为 global-error.tsx
这个组件不会处理 layout.tsx, template.tsx 这种重要组件的错误
服务器错误
服务端错误时这个错误会被脱敏并被抛出到一个最近的 error.tsx 文件中呈现
脱敏时为了保护重要的服务端敏感信息