Next.js: Add avif support

code/frameworks/nextjs/README.md

@@ -14,7 +14,6 @@
   - [Next.js's Image Component](#nextjss-image-component)
     - [Local Images](#local-images)
     - [Remote Images](#remote-images)
-    - [AVIF](#avif)
   - [Next.js Font Optimization](#nextjs-font-optimization)
     - [next/font/google](#nextfontgoogle)
     - [next/font/local](#nextfontlocal)
@@ -220,10 +219,6 @@ export default function Home() {
 }
 ```
 
-#### AVIF
-
-This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
-
 ### Next.js Font Optimization
 
 [next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `next/font/google` and `next/font/local` are supported.

code/frameworks/nextjs/package.json

@@ -100,14 +100,15 @@
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
     "image-size": "^1.0.0",
-    "loader-utils": "^3.2.0",
+    "loader-utils": "^3.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
     "semver": "^7.3.5",
+    "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
     "styled-jsx": "5.1.1",
     "ts-dedent": "^2.0.0",
@@ -119,6 +120,7 @@
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
+    "@types/loader-utils": "^2.0.5",
     "next": "^14.0.0",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"

code/frameworks/nextjs/src/next-image-loader-stub.ts

@@ -1,29 +1,52 @@
-// @ts-expect-error (loader-utils has no webpack5 compatible types)
 import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
 import type { NextConfig } from 'next';
+import sharp from 'sharp';
+import { cpus } from 'os';
 
 interface LoaderOptions {
   filename: string;
   nextConfig: NextConfig;
 }
 
-const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (content) {
+if (sharp.concurrency() > 1) {
+  // Reducing concurrency reduces the memory usage too.
+  const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
+  sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+}
+
+const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function NextImageLoader(
+  content
+) {
   const { filename, nextConfig } = this.getOptions();
-  const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), {
+  const opts = {
     context: this.rootContext,
     content,
-  });
+  };
+  const outputPath = interpolateName(this, filename.replace('[ext]', '.[ext]'), opts);
+  const extension = interpolateName(this, '[ext]', opts);
 
   this.emitFile(outputPath, content);
 
-  const { width, height } = imageSizeOf(this.resourcePath);
-
   if (nextConfig.images?.disableStaticImages) {
     return `const src = '${outputPath}'; export default src;`;
   }
 
+  let width;
+  let height;
+
+  if (extension === 'avif') {
+    const transformer = sharp(content);
+    const result = await transformer.metadata();
+    width = result.width;
+    height = result.height;
+  } else {
+    const result = imageSizeOf(this.resourcePath);
+    width = result.width;
+    height = result.height;
+  }
+
   return `export default ${JSON.stringify({
     src: outputPath,
     height,

code/frameworks/nextjs/template/stories/Image.stories.jsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import { waitFor } from '@storybook/testing-library';
 
 import Accessibility from '../../assets/accessibility.svg';
+import AvifImage from '../../assets/avif-test-image.avif';
 
 export default {
   component: Image,
@@ -14,6 +15,13 @@ export default {
 
 export const Default = {};
 
+export const Avif = {
+  args: {
+    src: AvifImage,
+    alt: 'Avif Test Image',
+  },
+};
+
 export const BlurredPlaceholder = {
   args: {
     placeholder: 'blur',