Skip to content
This repository has been archived by the owner on Sep 26, 2023. It is now read-only.

docs: be more clear on what is supported with the image component and… #157

Merged
merged 1 commit into from
Dec 7, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
docs: be more clear on what is supported with the image component and…
… add exemption for stale job
  • Loading branch information
RyanClementsHax committed Dec 7, 2022
commit 50d2bfab2607834a36881de112418207eaf87eb1
1 change: 1 addition & 0 deletions .github/workflows/stale.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ jobs:
stale-pr-message: 'This PR has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.'
close-issue-message: 'This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.'
close-pr-message: 'This PR has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.'
exempt-issue-labels: keep
14 changes: 9 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
- [Partay](#partay)
- [Documentation](#documentation)
- [Options](#options)
- [Next.js's Image Component](#nextjss-image-component)
- [Next.js's Image Component (partial support)](#nextjss-image-component-partial-support)
- [Local Images](#local-images)
- [Remote Images](#remote-images)
- [Optimization](#optimization)
Expand All @@ -42,14 +42,14 @@
- [FAQ](#faq)
- [Statically imported images won't load](#statically-imported-images-wont-load)
- [This addon breaks when the .mjs extension for the next config is used](#this-addon-breaks-when-the-mjs-extension-for-the-next-config-is-used)
- [Module not found: Error: Can't resolve [package name]](#module-not-found-error-cant-resolve-package-name)
- [Module not found: Error: Can't resolve \[package name\]](#module-not-found-error-cant-resolve-package-name)
- [Similar Projects](#similar-projects)
- [Want to suggest additional features?](#want-to-suggest-additional-features)
- [Didn't find what you were looking for?](#didnt-find-what-you-were-looking-for)

## Supported Features

👉 [Next.js's Image Component](#nextjss-image-component)
👉 [Next.js's Image Component (partial support)](#nextjss-image-component-partial-support)

👉 [Next.js Routing](#nextjs-routing)

Expand All @@ -67,7 +67,7 @@

👉 [Custom Webpack Config](#custom-webpack-config)

👉 [Typescript](#typescript) (already supported out of the box by Storybook)
👉 [Typescript](#typescript)

## Requirements

Expand Down Expand Up @@ -160,10 +160,14 @@ module.exports = {

- `nextConfigPath`: The absolute path to the `next.config.js`

### Next.js's Image Component
### Next.js's Image Component (partial support)

[next/image](https://nextjs.org/docs/api-reference/next/image) is [notoriously difficult](https://github.com/vercel/next.js/issues/18393) to get working with storybook. This addon allows you to use Next.js's `Image` component with no configuration!

> Because the image component has features, like image optimization, configured by options that require the Next.js config file to be read and processed by the framework and there is no public function exposed by Next.js to resolve and those options, it is not possible to support those features stably.
>
> If you want to see this better supported, feel free to contribute to the [discussion on Next.js's side](https://github.com/vercel/next.js/discussions/40891) or [the discussion on our side](https://github.com/RyanClementsHax/storybook-addon-next/discussions/119)

#### Local Images

[Local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) work just fine with this addon! Keep in mind that this feature was [only added in Next.js v11](https://nextjs.org/blog/next-11#automatic-size-detection-local-images).
Expand Down