介绍

Next.js 是 react 写法的一个 ssr 渲染框架，算是前后端都有的一个框架，可以叫全栈框架，直接开始吧。

Next.js 可以带给我们什么？

Next.js 是一个 React web 应用框架，这是官方对自己的定义，然后它主要做的事情有以下几点：

1. 完善的工程化机制

2. 良好的开发和构建性能

3. 智能文件路由系统

4. 多种渲染模式来保证页面性能体验

5. 可扩展配置

6. 提供其他多方面性能优化方案

7. 提供性能数据，让开发者更好的分析性能。

8. 提供的其他常用功能或者扩展，比如使用 mdx 来编写页面的功能等等。

启动

创建新项目

pnpm create next-app --typescript

选项

npx create-next-app@latest --typescript new-name
ESLInt : YES
`src/` directory : YES 
`app/` directory : NO

先 build

pnpm build

再 启动

pnpm start

自动刷新

注意

react 18.0.0 版本 useEffect 将会执行两次，原因是之后将会有 离屏渲染, 让我们提前熟悉渲染-挂载-渲染 会有哪些问题，提前解决

1.定时器重复执行

全局定义并清除

  clearInterval(window.linearMotionTimer);


  window.linearMotionTimer = setInterval()

定义 window ts src 下新建 index.d.ts

declare interface Window {
  linearMotionTimer:NodeJS.Timeout
}