feat: 🚀 Change import options

✅Closes: #820
BREAKING CHANGE: 🧨The import destination changes, no longer from next/image, but from
next-export-optimize-images/image.

.eslintignore

@@ -19,4 +19,5 @@ __tests__/e2e
 picture.js
 picture.d.ts
 image.js
+image.d.ts
 legacy

__tests__/e2e/app/page.jsx

@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import LegacyImage from 'next/legacy/image'
+import Image from '../../../dist/components/image'
+import LegacyImage from '../../../dist/components/legacy-image'
 import React from 'react'
 
 import Picture from '../../../dist/components/picture'

__tests__/e2e/components/ClientComponent.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import Image from 'next/image'
+import Image from '../../../dist/components/image'
 
 import clientOnlySrc from '../images/client-only.png'
 

docs/docs/02-getting-started.md

@@ -25,7 +25,7 @@ module.exports = withExportImages({
 })
 ```
 
-1. Change the description of the `scripts` that do the `next build` in `package.json`
+2. Change the description of the `scripts` that do the `next build` in `package.json`
 
 ```diff title="package.json"
 {
@@ -34,9 +34,11 @@ module.exports = withExportImages({
 }
 ```
 
-3. Import and use next/image as usual.
+3. Import from `next-export-optimize-images/image` and use it.
 
 ```tsx
+import Image from 'next-export-optimize-images/image'
+
 <Image src="/images/img.png" width={1920} height={1280} alt="" />
 // Or import as follows
 import img from './img.png'
@@ -48,8 +50,9 @@ import img from './img.png'
 Alternatively, you can use `next/legacy/image`.
 
 ```tsx
-import Image from 'next/legacy/image'
-;<Image src="/images/img.png" width={1920} height={1280} alt="" />
+import Image from 'next-export-optimize-images/legacy/image'
+
+<Image src="/images/img.png" width={1920} height={1280} alt="" />
 ```
 
 ## Local checks

docs/docs/03-Features/02-picture-component.md

@@ -1,5 +1,5 @@
 ---
-description: This page introduces the Picture componen tfor multiple image formats.
+description: This page introduces the Picture component for multiple image formats.
 ---
 
 # Picture component

docs/docs/06-examples.md

@@ -0,0 +1,21 @@
+---
+description: This page is to introduce examples of use.
+---
+
+# Examples
+
+## Set the `deviceSizes`
+
+```js title="next.config.js"
+module.exports = withExportImages({
+  images: {
+    deviceSizes: [640, 960, 1280, 1600, 1920],
+  },
+})
+```
+
+## Set the `placeholder`
+
+```jsx
+<Image src="/img.png" width={1280} height={640} alt="" placeholder="blur" />
+```

examples/common/pages/index.jsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next-export-optimize-images/image'
 
 import imgSrc from '../images/img.png'
 

image.d.ts

@@ -0,0 +1,2 @@
+import Image from './dist/components/image'
+export default Image

legacy/image.d.ts

@@ -0,0 +1,2 @@
+import Image from '../dist/components/legacy-image'
+export default Image

package.json

@@ -26,6 +26,7 @@
     "dist",
     "legacy",
     "image.js",
+    "image.d.ts",
     "picture.js",
     "picture.d.ts"
   ],
@@ -70,8 +71,8 @@
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.12",
     "@types/lodash.uniqwith": "4.5.9",
-    "@types/node": "20.11.28",
-    "@types/react": "18.2.66",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
     "@types/recursive-readdir": "^2.2.4",
     "@types/sharp": "0.31.1",
     "@typescript-eslint/eslint-plugin": "6.21.0",

picture.d.ts

@@ -1,3 +1,2 @@
 import Picture from './dist/components/picture'
-export * from './dist/components/picture'
 export default Picture

src/components/image.tsx

@@ -1,18 +1,10 @@
-import Image, { ImageProps, StaticImageData } from 'next/dist/shared/lib/image-external'
+import Image, { ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
 
 import getStringSrc from './utils/getStringSrc'
 import imageLoader from './utils/imageLoader'
 
-export interface StaticRequire {
-  default: StaticImageData
-}
-
-interface CustomImageProps extends ImageProps {
-  src: string | StaticImageData | StaticRequire
-}
-
-const CustomImage = (props: CustomImageProps, forwardedRef: React.ForwardedRef<HTMLImageElement>) => {
+const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRef) => {
   const srcStr = getStringSrc(props.src)
 
   return (
@@ -29,9 +21,7 @@ const CustomImage = (props: CustomImageProps, forwardedRef: React.ForwardedRef<H
       unoptimized={props.unoptimized !== undefined ? props.unoptimized : srcStr.endsWith('.svg')}
     />
   )
-}
-
-const _CustomImage = forwardRef(CustomImage)
+})
+CustomImage.displayName = 'CustomImage'
 
-export * from 'next/dist/shared/lib/image-external'
-export default _CustomImage
+export default CustomImage

src/components/legacy-image.tsx

@@ -1,4 +1,4 @@
-import Image, { ImageProps } from 'next/dist/client/legacy/image'
+import Image, { ImageProps } from 'next/image'
 import React from 'react'
 
 import imageLoader from './utils/imageLoader'
@@ -18,5 +18,4 @@ const CustomImage = (props: ImageProps) => {
   )
 }
 
-export * from 'next/dist/client/legacy/image'
 export default CustomImage

src/components/picture.tsx

@@ -1,4 +1,4 @@
-import Image, { ImageProps, unstable_getImgProps as getImgProps } from 'next/dist/shared/lib/image-external'
+import Image, { ImageProps, unstable_getImgProps as getImageProps } from 'next/dist/shared/lib/image-external'
 import React, { forwardRef } from 'react'
 
 import getConfig from '../utils/getConfig'
@@ -8,7 +8,7 @@ import imageLoader from './utils/imageLoader'
 
 const config = getConfig()
 
-const Picture = (props: ImageProps, forwardedRef: React.ForwardedRef<HTMLImageElement>) => {
+const Picture = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRef) => {
   const srcStr = getStringSrc(props.src)
 
   if (srcStr.endsWith('.svg')) {
@@ -17,7 +17,7 @@ const Picture = (props: ImageProps, forwardedRef: React.ForwardedRef<HTMLImageEl
 
   const additionalFormats = [...new Set(config.generateFormats ?? ['webp'])]
   const sources = additionalFormats.map((format, i) => ({
-    srcSet: getImgProps({
+    srcSet: getImageProps({
       ...props,
       loader: imageLoader(i),
     }).props.srcSet,
@@ -42,8 +42,7 @@ const Picture = (props: ImageProps, forwardedRef: React.ForwardedRef<HTMLImageEl
       />
     </picture>
   )
-}
+})
+Picture.displayName = 'Picture'
 
-const _Picture = forwardRef(Picture)
-
-export default _Picture
+export default Picture

src/components/utils/getStringSrc.ts

@@ -1,13 +1,15 @@
 import type { ImageProps, StaticImageData } from 'next/dist/shared/lib/image-external'
 
-import type { StaticRequire } from '../image'
+type StaticRequire = {
+  default: StaticImageData
+}
 
 const getStringSrc = (imgSrc: ImageProps['src']) => {
   return typeof imgSrc === 'string'
     ? imgSrc
     : (imgSrc as StaticRequire).default !== undefined
-    ? (imgSrc as StaticRequire).default.src
-    : (imgSrc as StaticImageData).src
+      ? (imgSrc as StaticRequire).default.src
+      : (imgSrc as StaticImageData).src
 }
 
 export default getStringSrc

src/withExportImages.ts

@@ -37,16 +37,6 @@ const withExportImages = (nextConfig: NextConfig = {}, options: { __test?: boole
       loader: 'custom',
     },
     webpack(config, option) {
-      config.resolve.alias['next/image'] = options.__test
-        ? '../../../dist/components/image'
-        : 'next-export-optimize-images/image'
-      config.resolve.alias['next/legacy/image'] = options.__test
-        ? '../../../dist/components/legacy-image'
-        : 'next-export-optimize-images/legacy/image'
-      delete config.resolve.alias['next']
-
-      config.resolve.fallback = { ...config.resolve.fallback, fs: false }
-
       const nextImageLoader = config.module.rules.find(
         ({ loader }: { loader?: string }) => loader === 'next-image-loader'
       )