【最新版】Next.JS极简教程
https://www.bilibili.com/video/BV1do4y1K7BF 1 1
【最新版】Next.JS极简教程
02.项目结构_B站
03.定义路由_B站
04.页面与布局_B站
05.连接和导航_B站
06.路由组_B站
07.动态路由_B站
08.Loading UI and Streaming_B站
09.Error Handling_B站
10.Parallel Routes_B站
并行路由
目录@xx rootlayout加入
export default function RootLayout(params: Readonly<{children: React.ReactNode,team:React.ReactNode
}>) {return (<html lang="en"><bodyclassName={`${geistSans.variable} ${geistMono.variable} antialiased`}><Suspense fallback={<Loading/>}>RootLayout{params.children}{params.team}</Suspense></body></html>);
}
11.Intercepting Routes_B站
拦截路由
@modal/(.)photos/[id]/pages.tsx
12.Route Handlers_B站
13.Middleware_B站
路由守望
14.项目结构与国际化_B站
15.静态渲染和动态渲染_B站
16.数据获取_B站
17.部署_B站
2023
nuxt 乃x
nest neix
nest 乃st
npx create-next-app@latest 13.4.3
https://nextjs.org/
boss me ai error change
Tailwind CSS ds jdg 类似bootstrap css类
next 13.4.3 react18
Turbopack =vite=webpacks dsx
现在react19 next15
app/xx/xx/page.tsx
7+ 4+ 2 1+
组件传值 props
route传值
即使在内部路由(marketing)并共享相同的 URL 层次结构,您也可以通过在其文件夹中(shop)添加文件来为每个组创建不同的布局。layout.js 少一层访问
(marketing)随便起
生成静态参数
该功能可以与动态路由段generateStaticParams结合使用,以在构建时静态生成路由,而不是在请求时按需生成路由。
[arg] 接受arg参数
[...arg] 全部参数接受 /abc/a/c abcac
配置可以配置图片域名
静态和动态渲染
在 Next.js 中,路由可以静态或动态呈现。
在静态路由中,组件在构建时在服务器上呈现。工作的结果被缓存并在后续请求中重用。
在动态路由中,组件在请求时在服务器上呈现。