Next 12 - got next dev, next build and next export to work - update documentation

[saul-data]

Hi there 👋

Spent the whole morning getting this to work. First next dev wasn't working and then next build && next export - the solution was scattered across a number of comments on this repo - thought I'd summarise here. I think the documentation needs updating.

Need to use version 9 for imagemin-svgo:

"imagemin-svgo": "^9.0.0",

For building and dev, need to add custom loader and disable static images in next.config.js.

Here is my next.config.js that seems to be working:

const path = require('path')
const withOptimizedImages = require('next-optimized-images');
module.exports = withOptimizedImages({
  /* config for next-optimized-images */
  
  images: {
    loader: 'custom',
    disableStaticImages: true
  },

  sassOptions: {
    includePaths: [path.join(__dirname, 'src/assets/scss')],
  },

});

Error for next build && next export

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api

Error for version 10 of imagemin-svgo

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/.../node_modules/imagemin-svgo/index.js from /Users/.../node_modules/next-optimized-images/lib/loaders/img-loader.js not supported.

Error for next dev somewhere along the line

error - ./public/image/favicon.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[richarddd]

This does not work for me. Im getting: Error: Babel plugin 'react-optimized-image/plugin'