react技术栈更新到uptodate,我现在五笔打字还是蛮快的，一分钟得几百字了吧

现在许多东西更新了，react全家桶可能我的技术栈也要更新一下，于是查询官网，先找个方便点的直接起飞，然后看能不能冲出宇宙

首先安装一下 next去， 这个东西是个桶， npx会执行远端的命令，如果本地没有的话，它会自动搜索无端npm的包下载然后执行 

npx create-next-app@latest

接下来就能会next了，许多选项，里面会用typescript, tailwindcss, react,es6主要就是这个主体了

 然后 npm run build, 再npm run start， 这样就可以跑起来了, 不过要开发还是npm run dev。

看一下基本结构，大致就是一定要有layout和page.js, 然后还有layout里面可以包含template模板，元数据看一下export 出去后会在html的头部添加meta 标签，利于seo. 大概每个目录下面有一个page.js作为这个页面，进行导航。

从这里看，next.js 给出了react app构建的页面布局和导航，还有模板，里面的页面是用react写的， 然后主要要基于它开发的话就是写react的组件，一个页面里面导入react组件，然后就可以了。 路由交给next.js这样子。

这样就随便建一个component folder, 里面添加上如下代码， 然后在page.js里面引入这个组件，再声明组件的tag，就可以直接显示了

import React from "react"

export default function HelloWorld(props:any){
    return (<h1>Hello world!{props.name}</h1>)

}

 当我创建一个template.tsx之后，只要导入到page.tsx里面，这个页面就会使用template.tsx里面定义的布局了，生成结果就是布局下面template里面替换成页面内容。

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

 

10-19 21:38

上次看到基础，接着要看完nextjs的使用。

链接和导航，动态导航, 路由的slug弹头传参

拦截器

suspect概念，忙时加载

并行路由同时加载

错误处理和全局错误处理 error.js global-error.js

模态框modal

路径处理器 http请求返回json不返回页面，添加在根目录， 跳转，路径参数slug弹头， 查询参数querystring, 大数据流流式片段式加载

中间件middleware在根目录

项目组织目录结构

国际化和本地化， 使用middleware中间件

静态生成， 根据语言生成静态页面

 注意： next.js的布署，因为它是服务端的，需要用nodejs布署的， 就比如前面提到的生成静态页面, 这里包括加载css等，

至此nextjs这个部分算是可以说结束

 

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

https://react.dev/learn/passing-props-to-a-component