一起学习Next.js吧（上）

Next.js是什么

它是Node.js的全栈框架

• CSS要写在JS中；
• 可以页面预渲染 + SSR（Server Side Render服务端渲染）；
• 前后端同构（代码同时运行在两端）；
• 支持React 和 TypeScript;
• 不支持Vue（Vue对应的是Nust.js）；

Next.js的弱项

• 没有提供数据库相关功能，可自行搭配 Sequelize 或 TypeORM；
• 没有提供测试相关功能，可自行搭配 Jest 或 Cypress；
• 有一个 Blitz.js 框架正在完善以上内容；

安装

按照官网命令安装即可；
在.gitignore中添加上/.idea/和/.vscode（它两是编辑器的一些内容）这两个路径；
下面开始一点一点改动代码；

Link 快速导航

文档

加页面

创建pages/posts/my-post.js；

传统导航

• 假如从page1到page2，请求得到page2的html，解析html的时候发现有css和js，就再去请求css文件和js文件；

快速导航

• 快速导航从page1到page2，就只会得到page2的一个js文件，因为所有的HTML、CSS、JS都打包到这个js文件里了，然后再去更换页面里的内容；

  
  image.png

优点

• 页面不会刷新，而是发一个AJAX请求到新页面的内容（返回一个js，js中包含新页面的html、css和js）；
• 不会请求重复的HTML、CSS、JS（因为所有内容都打包成一个js了，就不用再去请求html和css了）；
• 自动在页面插入新页面的内容，删除旧页面的内容；
• 因为省了很多请求和解析过程，所以速度很快；

同构代码

代码会在两端同时运行

• 在组件里写console.log('winwin')，你会发现Node控制台和浏览器控制台都打印出这句话了；

注意差异

• 不是所有代码都会运行，例如一些需要用户去触发的操作；
• 也不是所有API都能用，例如window在Node里就会报错，因为只有浏览器里才有 window对象啊；

全局配置

文档

创建

• 创建/pages/_app.js来进行全局配置；

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

• 这个MyApp组件会注入到每个页面，是每个页面的根组件；
• 创建_app.js之后需要重启yarn dev

自定义Head

• 可以改页面的title和meta；
• 可以在各自组件定义，也可以在_app.js中全局定义；
• 若组件内有定义Head，优先显示组件内的Head；

全局CSS

• 在_app.js里import '../styles/globals.css'（css要放在styles目录下，styles与pages平级）；
• 其他地方不能import globals.css；
• 其他地方只能写局部CSS；

局部CSS

1、官方支持

• 使用styled-jsx，文档，但它不方便分离CSS和JS；
• 使用CSS Modules， 文档，它用起来有点麻烦，className={styles.error}，每个className都要写个styles；

2、第三方

• 也可以使用styled-components

更改基本路径

文档

• 在文件中你不想写import '../styles/globals.css'，想写成import 'styles/globals.css'
• 新建jsconfig.json文件，代码如下：

{
  "compilerOptions": {
    "baseUrl": "."    //意思是基于我的项目根目录来找
  }
}

使用scss

• 安装依赖yarn add sass；
• 直接把后缀.css改成.scss即可；

静态资源

• next推荐放在public/里，文档

其他类型文件

图片

• 可以自己配置file-loader；
• 当然可以直接用next封装好的next-images插件；
• 也可以用官方的<Image />组件，next/image；

更多类型

• 自己找loader，然后配置next.config.js；
• 或者看是否有封装成next插件；

扩展知识

• 对于webpack中loader的配置，outputPath输出路径是硬盘路径，publicPath公共路径是网站路径

{
    test: /\.png$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'static',
          publicPath: '_next/static'
        }
      }
    ]
 }

下篇：一起学习Next.js吧（下）