• npm init next-app nextjs-blog-1
• cd nextjs-blog-1
• yarn dev
• yarn add —dev @types/react @types/react-dom

运行之后 打开localhost:3000

说明成功了

加页面

路径对应上就可以了。

Link快速导航

• 用法
  • 把 <a href=xxx>点击跳转</a> 改成 <Link href=xxx><a>点击跳转</a></Link>
  • 用link标签把a标签包住
• 优点
  • 页面不会刷新，用AJAX请求新页面内容
  • 不会请求重复大的HTML，CSS，JS
  • 自动在页面插入新内容，删除旧内容
  • 因为省了很多请求和解析过程，所以速度极快

传统导航

1. 打开page1时，浏览器要请求page1的html，css，js。
2. 在page1点击跳转到page2时
3. 浏览器又要向服务器请求page2的html，css，js。

快速导航

1. 同样是从page1到page2
2. 打开page1时，是没法改的，一样要请求page1的html，css，js。
3. 但是js对导航做了劫持（Link）
4. 当点击跳转到page2时，js会请求page2.js(是一个把page2的html，css，js全部都包含的js)
5. page2.js就会返回到page1这个页面
6. page1就会把page2.js的html,css,js更新到page1上，现在已经不叫page1了，已经是page2了
7. 这个是对页面的一次迭代和替换，整个过程中只需要请求一个文件，就是page2.js（图片除外）
8. 实际上浏览器没有亲自去访问过page2，而是由page1通过AJAX去得到page2的内容的

同构代码

• 代码运行在两端
  • 在组件写一句console.log(执行了)
  • 会发现在Node控制台会输出这句话
  • 会发现chrome控制台也会输出这句话

• 注意差异
  • 不是所有的代码都会运行，有些需要用户触发
  • 不是所有的API都能用，比如window在Node里报错