[Documentation]: Page needs to be updated for new Custom mocking method for next/image in Storybook v7

[yuxxxie]

Describe the problem

Below document page needs to be updated for new Custom mocking method for next/image in Storybook v7.

Try overriding the next/image option

The documentation says that you can create a custom mock for next/image by writing the following:
But when I tried it, 'image' does not exist in type 'FrameworkOptions'.
An error will appear.

Documentation: [Storybook for Next.js frameworks]

• https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs#documentation

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs'

const config: StorybookConfig = {
  framework: {
    name: '@storybook/nextjs',
    options: {
      // ErrorMessage on VSCode: 'image' does not exist in type 'FrameworkOptions'
      image: {
        loading: 'eager',
      },
    },
  },

---

Unresolved code that does not work with methods up to v6

As with the issue below, starting with v7, it is no longer possible to solve the problem using the previous v6 method.

Issue: [next.js NextImage's broken]

• next.js NextImage's broken #17950

.storybook/preview.ts

import * as nextImage from "next/image";

const NextImageMock = nextImage.default;

Object.defineProperty(nextImage, "default", {
  configurable: true,
  value: (props) => {
    const modifyProps = {
      ...props,

      // Write properties that override default next/image values
      priority: true,
      loading: undefined,
    };

    return <NextImageMock {...modifyProps} unoptimized />;
  },
});

---

Solved successful code

After arriving at the issue below and getting a hint, I was able to solve the problem.
This content is not written in the documentation, right?
If this method suits you or there is another solution, please add appropriate documentation.

Issue: [[Bug]: Using appDirectory in preview.ts causes reactdom.preload error with Next.js framework]

• [Bug]: Using appDirectory in preview.ts causes reactdom.preload error with Next.js framework #23661

This is also recommended in the issue below.

Issue: [Documentation]: Next.js integration page needs to be updated for new next/image handling

• [Documentation]: Next.js integration page needs to be updated for new next/image handling #23561

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs'
import path from 'path'

const config: StorybookConfig = {
  stories: ['../stories/**/*.stories.@(tsx|jsx|mdx)'],
  addons: ['@storybook/addon-essentials', 'storycap'],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public'],

  webpackFinal: async (config) => {
    // Resolve undefined with webpackFinal's config.resolve.
    config.resolve = config.resolve || {}

    // Write webpackFinal to read MockedNextImage instead of next/image.
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'next/image': path.resolve(
        __dirname,
        './MockedNextImage.tsx'
      ),
    }

    return config
  },
}

export default config

MockedNextImage.tsx

import Image, { ImageProps } from '../node_modules/next/image'

const NextImage = (props: ImageProps) => (
  // It is possible to pass props to Image as shown below.
  <Image {...props} priority={true} loading={undefined} unoptimized alt="" />
)

export default NextImage

Detailed my project information

package.json

"dependencies": {
  "next": "^13.4.2",
  "react": "18.2.0",
  "react-dom": "18.2.0",
},
"devDependencies": {
  "@storybook/nextjs": "^7.6.3",
  "@storybook/react": "7.6.3",
  "storybook": "7.6.3",
},

Tasks required of Storybook maintainers

1. Updates to applicable documentation

• @storybook/nextjs - README
• Integrate Next.js and Storybook

2. Add deprecated text or labels to legacy non-functional documents

[Get started with Storybook and Next.js]

• https://storybook.js.org/blog/get-started-with-storybook-and-next-js/#2-use-the-unoptimized-prop-for-nextjs-images-in-storybook

3. Adding custom image mocking functionality in the Storybook framework and documenting it in an easy-to-understand manner

• @storybook/nextjs - README

Additional context

No response