Compatible with Next 13?

[codaisa]

I am not able to configure the package very well in Next 13, is it already compatible with this version?

[Idlesome]

Running [email protected] here and found that next-env.d.ts getting overwritten causes this issue. I added my own types.d.ts at the root of my project and added:

/// <reference types="next/image-types/global" />
/// <reference types="optimized-images-loader" />

There instead of in next-env.d.ts and the "type error cannot find module *.jpg" (also referenced here) went.

I also had to add:

  images: {
    disableStaticImages: true,
+   unoptimized: true,
  },

To my next.config.js and use withOptimisedImages instead of using the plugins composer to get rid of next build error. My full next.config.js for reference:

const withOptimizedImages = require("next-optimized-images");

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    disableStaticImages: true,
    unoptimized: true,
  },
};

module.exports = withOptimizedImages(nextConfig);

All seems to working fine for me now :) FYI I'm using canary build 3.0.0-canary.10

[wonrax]

It works for me in dev mode but not in build mode with {output: "export"}. The out directory doesn't seem to contains any generated images. "next": "^13.4.1".

Edit: Fixed it by using @hashicorp/next-optimized-images (https://github.com/hashicorp/web-platform-packages/tree/main/packages/next-optimized-images).

My next.config.js (do note that I use export mode):

const { withContentlayer } = require("next-contentlayer");
const withOptimisedImages = require("@hashicorp/next-optimized-images");

const nextConfig = {
  output: "export",
  images: {
    disableStaticImages: true,
    unoptimized: true,
  },
};

module.exports = withContentlayer(
  withOptimisedImages({
    ...nextConfig,
    // responsive: {
    //   adapter: require("responsive-loader/sharp"),
    //   sizes: [320, 640, 960, 1200, 1800, 2400],
    //   placeholder: true,
    //   placeholderSize: 20,
    // },
  })
);