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

[Atralbus]

Describe the problem

Starting from Next.js 13.4.8, it was not possible to redefine the Image component. This issue is fixed with #23296. In Next.js documentation page there is a codeblock to unoptimize the Image component which still depends on redefining the component;

// .storybook/preview.js
import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

Additional context

No response

[jonniebigodes]

@Atralbus, thanks for reaching out to us and letting us know of that issue. So that you know that the blog post you're referring to is quite outdated, more even as Storybook now has a Next.js framework integration. Also, so that you're aware, the most accurate documentation is located in the integration's README. At some point, we're going to update the documentation accordingly and feature the information provided.

Let us know if you spot any issues in the documentation I mentioned so that we can adjust it accordingly.

Hope you have a fantastic weekend.

Stay safe

[valentinpalkovic]

@jonniebigodes: @Atralbus has a point! These blog articles are listed on search engine searches pretty high! We have to either remove them or update them as soon as possible to add a preface, which links to newer documentation. We have this problem with lots of blog articles, which confuses users

[Atralbus]

@jonniebigodes My bad. I probably used that documentation before switching to @storybook/nextjs and that configuration was absolute. But @valentinpalkovic is right, when I was first integrating storybook to a nextjs project, those were probably the first results that came up on google.

[jonniebigodes]

@Atralbus, no worries, and I'm glad that you surfaced this. And to your point @valentinpalkovic we can start by vetting the articles and prefacing them with the updated documentation location. Sounds good?

[valentinpalkovic]

@jonniebigodes sounds perfect. Let me know if you need any support

[jonniebigodes]

Will do @valentinpalkovic, will do 🙏

[Tanosimboangy]

This is solved by removing the strict mode:
Instead of:

import * as NextImage from "next/image"

Do it this way:

import NextImage from "next/image";