首页 > 其他分享 >【最新版】Next.JS极简教程

【最新版】Next.JS极简教程

时间:2024-12-14 13:31:28浏览次数:15  
标签:极简 JS 静态 Next 最新版 路由

【最新版】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">
      <body
        className={`${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 中,路由可以静态或动态呈现。
在静态路由中,组件在构建时在服务器上呈现。工作的结果被缓存并在后续请求中重用。
在动态路由中,组件在请求时在服务器上呈现。

标签:极简,JS,静态,Next,最新版,路由
From: https://www.cnblogs.com/KooTeam/p/18606605

相关文章