storybook next/image 오류 해결 : next.config.js로 도메인을 설정해도 안됩니다.

전제

환경

package.json

"dependencies": {
    "next": "^11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
"devDependencies": {
  "@babel/core": "^7.14.8",
  "@storybook/addon-actions": "^6.3.5",
  "@storybook/addon-essentials": "^6.3.5",
  "@storybook/addon-links": "^6.3.5",
  "@storybook/addon-postcss": "^2.0.0",
  "@storybook/react": "^6.3.5",
  "@testing-library/react": "^12.0.0",
  "@types/jest": "^26.0.24",
  "@types/node": "^15.6.1",
  "@types/react": "^17.0.6",
  "@types/react-dom": "^17.0.5",
  "@typescript-eslint/eslint-plugin": "^4.28.4",
  "autoprefixer": "^10.3.1",
  "babel-jest": "^27.0.6",
  "babel-loader": "^8.2.2",
  "eslint": "^7.31.0",
  "eslint-config-next": "^11.0.1",
  "eslint-config-prettier": "^8.3.0",
  "husky": "^7.0.1",
  "identity-obj-proxy": "^3.0.0",
  "jest": "^27.0.6",
  "jest-watch-typeahead": "^0.6.4",
  "lint-staged": "^11.1.0",
  "postcss": "^8.3.6",
  "prettier": "^2.3.2",
  "tailwindcss": "^2.2.6",
  "typescript": "^4.2.4"
  }

오류 내용

Next.js에서 구성 요소를 개발하는 동안 스토리 북에서 다음 오류가 발생했습니다.



next/image component, you passed a src value that uses a hostname in the URL that isn't defined in the images config in next.config.js.

이것을 보면 next/image 구성 요소를 활용하는 페이지에서 next.config.js의 images에 정의되지 않은 URL을 src에 사용할 수없는 것 같습니다.

그러나 next.config.js를 만들고 위의 링크와 같이 설정해도 오류는 해결되지 않았습니다.

touch next.config.js

next.config.js

module.exports = {
  images: {
    domains: ['example.com'],
  },
};

해결된 방법

.storybook/preview.js에 다음을 추가

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props => <img {...props} />
});

수정 후 (.storybook/preview.js)

import '../src/styles/globals.css';
import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props => <img {...props} />
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

참조