b站视频
next官网中文 next纯中文 英文
第一课：
服务端渲染，全栈
node版本20
npx create-next-app@latest创建一个next项目
npm run dev 运行， npm run build打包 打包后会生成.next文件夹 （最好把本地的dev运行关掉）， npm start会本地运行打包后的包
第二课
文件路由这里的page类似于index.js文件名，默认的
在vscode中的插件市场安装es7 在空白的页面输入rfc会生成函数式代码
第三课
layout（布局）在多个路由切换共享的ui
1、root layout根布局,每个项目必须要有个html，其他的业务代码会塞入到children里面
src\app\layout.tsx
<html lang="en"><bodyclassName={`${geistSans.variable} ${geistMono.variable} antialiased`}>这是根layout{children}</body></html>2、普通的layout,不需要html，所有的同目录的文件都会塞入到这个layOut中的children中去
src\app\dashboard\layout.tsx
import React from 'react'export default function dashboardlayout({ children }) {return (<div>这是dashboardlayout{children}</div>)
}
第四课
template.tsx 在根组件layout.tsx文件同级新建template.tsx 他是在layout和业务组件中间的一层
src\app\template.tsx
export default function Template({ children }: React.ReactNode) {return <div>这是template组件{children}</div>
}
第五课
template和layout的关系
layout内容在路由切换的时候状态会保留
template内容在路由切换的时候状态不会保留
在 Next.js 13及更新版本中，如果你正在使用新的 app 目录结构（introduced in Next.js 13), 创建 layout 和 template 文件时确实不需要显式导入这些文件。Next.js 会根据特定的文件名自动识别并应用相应的布局或模板。
-
Layouts: 当你创建一个名为
layout.tsx或layout.js的文件时，Next.js 自动将其识别为布局组件。这个布局组件会在指定路由及其子路由中包裹页面内容。这意味着你无需手动导入这个布局组件；只要文件命名和位置正确，它就会被自动应用。 -
Templates: 类似地，当你创建一个名为
template.tsx或template.js的文件时，Next.js 也会自动识别它作为模板组件。模板与布局不同之处在于每次导航到新页面时模板中的内容都会重新渲染，而布局中的内容则不会。
这种基于文件系统的路由和配置方式是 Next.js 的一个核心特性，使得项目结构更加直观，并减少了样板代码。确保你的文件按照官方文档的指导进行命名和放置，以便充分利用框架的功能。如果你使用的是较早版本的 Next.js 或者传统的 pages 目录结构，则需要遵循不同的约定和配置方法。