静态资源

next推荐所有的静态资源都放在public里，但是这会造成一些问题：

在页面直接引入一个png图片的话，如果以后需要更新图片是很麻烦的，因为已经自动缓存了。

如果自动缓存，也会造成cdn非常无力，不能更新。不加缓存，又要每次都请求png

解决方法：根据图片自动加一个hash就可以了。

现在新建一个文件夹/assets/images放图片

并改写index.js

但是报错了

它说你可能需要要给loader去加载jpg

找到next的文档是如何配webpack的

https://www.nextjs.cn/docs/api-reference/next.config.js/custom-webpack-config

新建一个next.config.js文件，复制上去，然后改成用file-loader去加载图片

file-loder怎么配：

百度file-loader，然后抄

https://www.webpackjs.com/loaders/file-loader/

改好之后就可以了。

但是浏览器报错：jpg找不到了

打印了一下图片的路径：console.log(png)

在node

在浏览器

发现在.next文件夹里面

而且是在static文件夹的外面

我们可以通过修改webpack 把图片放到static里面试试

怎么放呢 刚刚百度的file-loader的文档也有 https://www.webpackjs.com/loaders/file-loader/

找到outputPath那个option抄来改一下

改成这样，发现jpg变在static文件里面了

node里打印的路径：static/24a99489df15f6ec4ba7ddb5e3259e72.jpg

浏览器里打印的路劲：/_next/static/24a99489df15f6ec4ba7ddb5e3259e72.jpg

还是差了一个/_next

怎么才能做到两边的路径是一致的呢

说明我们需要区分一下是在nodejs的环境，还是在chorme的环境

options.isServer 可以判断是否处于node环境中，是则返回true

测试一下，生效了

node: /node/static/24a99489df15f6ec4ba7ddb5e3259e72.jpg

chorme: /_next//chorme/static/24a99489df15f6ec4ba7ddb5e3259e72.jpg

但是好像没什么用，用网页看下怎么才可以打开图片

发现在http://localhost:3000/_next/static/24a99489df15f6ec4ba7ddb5e3259e72.jpg这里可以打开图片

那就把outputPath改成static，

publicPath改成_next/static应该就可以了

成功了

总结

outputPath是硬盘路径

publicPath是网络路径

我们的网站实际上是要考虑.next目录的

为了让图片的名字不那么乱，可以改一下option里面的name，webpack文档也是可以看到的

module.exports = {
  webpack: (config,options) => {
    // const isServer = options.isServer
    config.module.rules.push({
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name:'[name].[contenthash].[ext]',
            outputPath: 'static',  //硬盘路径
            publicPath:'_next/static'  //网站路径
          }
        }
      ]
    })
    return config
  }
}

next-images插件

上面做了这么多东西，看上去很麻烦，实际上是有插件的。。。。

github https://github.com/twopluszero/next-images#readme

直接安装

yarn add next-images

next.config.js

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

看GitHub介绍直接用就可以了。

看了一下他的源码，核心上差不多，他多了更加多的功能。

所以也算学会了配loader

想要搞掂其他类型的文件，也是一样的。

自己找loader，然后配置next.config.js

或者看看有没有人封装成next插件。