next学习笔记

JAY.LIN 收录于 React

2025-03-09 约 469 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=146133094

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">
      <body
        className={`${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>
}