使用 next-images 和 imagemin-webp-webpack-plugin 这两个包来优化 Next.js 应用程序，具体步骤如下：

1. 安装依赖

npm i next-images imagemin-webp-webpack-plugin -D

2. 在 Next.js 配置文件中 next.config.js 中进行配置

const withImages = require('next-images');
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');

module.exports = withImages({
  webpack(config, options) {
    config.plugins.push(
      new ImageminWebpWebpackPlugin({
        config: [{
          test: /\.(jpe?g|png)/,
          options: {
            quality: 75
          }
        }]
      })
    )
    return config
  }
})

3. 在 src 文件夹下创建一个 .webp 文件夹，并将需要预转换的图片放入其中。例如：

src
├── components
├── pages
└── public
    ├── images
    └── webp
        ├── logo.webp
        ├── image1.webp
        └── image2.webp

4. 修改代码中的图片路径，将原来的 .jpg 或 .png 后缀的图片路径改成 .webp。例如：

import Logo from '../public/webp/logo.webp'

function Header() {
  return (
    

      
        
          
        
      
    
  )
}

经过这样的配置后，Next.js 在编译时会自动将 .webp 文件夹中的图片预转换成 .webp 格式的图片，从而减少图像转换，提高应用程序性能。