Merge pull request #26 from uploadcare/feat/next-13-image

Feat/next 13 image

Author: nd0ut

README.md

@@ -56,7 +56,7 @@ Add your public Uploadcare key to your `.env*` config file. You can copy it from
 NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY="YOUR_PUBLIC_KEY"
 ```
 
-Alternatively, in case you're using a custom proxy, set the proxy domain.
+Alternatively, in case you're using a [custom proxy endpoint][docs-custom-proxy-endpoint], set the proxy domain.
 
 ```ini
 #.env
@@ -88,7 +88,7 @@ NEXT_PUBLIC_UPLOADCARE_CUSTOM_CDN_DOMAIN="cdn.example.com"
 
 ## Usage
 
-**Option 1**. Use the `UploadcareImage` component and leave us the reset ;)
+**Option 1**. Use the `UploadcareImage` component and leave us the rest ;)
 ```tsx
 import UploadcareImage from '@uploadcare/nextjs-loader';
 
@@ -118,7 +118,34 @@ import { uploadcareLoader } from '@uploadcare/nextjs-loader';
 />
 ```
 
-**Option 3**. Use the [next-image-loader](https://www.npmjs.com/package/next-image-loader) plugin to enable Uploadcare image loader for all images by default
+**Option 3 (Next.js v13+ only)**. Use the [`loaderFile` setting][loader-file] to enable Uploadcare image loader for all images by default.
+
+1. Configure the `loaderFile` in your `next.config.js` like the following:
+
+```js
+module.exports = {
+  images: {
+    loader: 'custom',
+    loaderFile: './node_modules/@uploadcare/nextjs-loader/build/loader.js',
+  },
+}
+```
+
+2. Use `Image` as usual, with Uploadcare loader enabled implicitly:
+
+```tsx
+import Image from 'next/image';
+
+<Image
+  alt="A test image"
+  src="https://your-domain/image.jpg"
+  width="400"
+  height="300"
+  quality="80"
+/>
+```
+
+**Option 4**. Use the [next-image-loader](https://www.npmjs.com/package/next-image-loader) plugin to enable Uploadcare image loader for all images by default
 
 In that case, you may not need the `loader: "custom"` setting in your `next.config.js`.
 
@@ -180,19 +207,45 @@ There are two possible use cases:
 
 #### When `src` is a string
 
-This options is available for the `UploadcareImage` component only. It won't work when you're using custom loader directly.
+If you pass `placeholder="blur"` to the `Image` or `UploadcareImage` component, the `blurDataURL` property will be used as the placeholder. In this case you must provide the `blurDataURL` property using our `getBlurDataURL` server-side helper.
 
-If you pass `placeholder="blur"` to the `UploadcareImage` component, it will generate `blurDataURL` with the URL of the placeholder image (not base64) and use it as a placeholder. You can override `blurDataURL`.
+Here is the ``getBlurDataURL` interface:
+
+```ts
+function getBlurDataURL(
+  src: string,
+  width = 10,
+  quality = 1
+): Promise<string>
+```
+
+Usage example:
 
 ```tsx
-<UploadcareImage
-  alt="A test image"
-  src="https://your-domain/image.jpg"
-  width="400"
-  height="300"
-  quality="80"
-  placeholder="blur"
-/>
+import UploadcareImage, { getBlurDataURL } from '@uploadcare/nextjs-loader';
+
+const BLUR_IMAGE_URL = "https://your-domain/image.jpg"
+
+export const getStaticProps = async () => {
+  const blurDataURL = await getBlurDataURL(BLUR_IMAGE_URL);
+
+  return {
+    props: { blurDataURL }
+  };
+};
+
+export default ({ blurDataURL }) => {
+  return (
+    <UploadcareImage
+      alt="Blurred image"
+      src={BLUR_IMAGE_URL}
+      width="400"
+      height="300"
+      placeholder="blur"
+      blurDataURL={blurDataURL}
+    />
+  )
+}
 ```
 
 #### When `src` is a static import
@@ -246,3 +299,6 @@ Next checks whether the image url which loader generates has the exact value whi
 [npm-link]: https://www.npmjs.com/package/@uploadcare/nextjs-loader
 [demo-link]: https://uploadcare-nextjs-loader.netlify.app/
 [uploadcare-transformation-image-compression-docs]: https://uploadcare.com/docs/transformations/image/compression/?utm_source=github&utm_campaign=nextjs-loader
+[docs-custom-proxy-endpoint]: https://uploadcare.com/docs/delivery/proxy/#usage-endpoint
+[last-next-12-release]: https://github.com/uploadcare/nextjs-loader/tree/v0.4.0
+[loader-file]: https://nextjs.org/docs/api-reference/next/image#loader-configuration

example/next.config.js

@@ -2,6 +2,7 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    loader: "custom"
-  }
+    loader: 'custom',
+    loaderFile: "./node_modules/@uploadcare/nextjs-loader/build/loader.js",
+  },
 }

example/package.json

@@ -11,16 +11,16 @@
   },
   "dependencies": {
     "@uploadcare/nextjs-loader": "link:../",
-    "next": "^12.1.6",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "next": "^13.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "yarn": "^1.22.18"
   },
   "devDependencies": {
     "@types/node": "^17.0.40",
-    "@types/react": "^18.0.12",
+    "@types/react": "^18.0.25",
     "eslint": "^8.17.0",
-    "eslint-config-next": "^12.1.6",
+    "eslint-config-next": "^13.0.4",
     "typescript": "^4.7.3"
   }
 }

example/pages/index.tsx

@@ -1,20 +1,39 @@
-import type { NextPage } from 'next'
-import Image from 'next/image'
-import UploadcareImage, { uploadcareLoader } from '@uploadcare/nextjs-loader'
-import { FC } from 'react'
-import styles from '../styles/Home.module.css'
+import type { NextPage, GetStaticProps, InferGetStaticPropsType } from 'next';
+import Image from 'next/image';
+import UploadcareImage, { getBlurDataURL } from '@uploadcare/nextjs-loader';
+import { FC } from 'react';
+import styles from '../styles/Home.module.css';
+import staticImportImage from '../public/static_image.png';
 
 type CodeProps = {
-  [key: string]: any
-}
-const Code: FC<CodeProps> = (p) => <code className={styles.inlineCode} {...p} />
+  [key: string]: unknown;
+};
 
-const Home: NextPage = () => (
+const Code: FC<CodeProps> = (p) => (
+  <code className={styles.inlineCode} {...p} />
+);
+
+const BLUR_IMAGE_URL =
+  'https://ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg';
+
+export const getStaticProps: GetStaticProps<{
+  blurDataURL: string;
+}> = async () => {
+  const blurDataURL = await getBlurDataURL(BLUR_IMAGE_URL);
+
+  return {
+    props: { blurDataURL }
+  };
+};
+
+const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
+  blurDataURL
+}) => (
   <div className={styles.container}>
     <div className={styles.card}>
       <h1>
         Uploadcare custom loader for Image Component{' '}
-        <a href="//github.com/uploadcare/nextjs-loader">
+        <a href="https://github.com/uploadcare/nextjs-loader">
           @uploadcare/nextjs-loader
         </a>
       </h1>
@@ -27,11 +46,12 @@ const Home: NextPage = () => (
         proxying through Media Proxy.
       </p>
       <Image
-        loader={uploadcareLoader}
         alt="Vercel logo"
-        src="//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
-        width={1000}
-        height={1000}
+        src="https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
+        width={500}
+        height={500}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>
@@ -40,9 +60,11 @@ const Home: NextPage = () => (
       </p>
       <UploadcareImage
         alt="Vercel logo"
-        src="//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
+        src="https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
         width={500}
         height={500}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>
@@ -53,10 +75,13 @@ const Home: NextPage = () => (
       </p>
       <UploadcareImage
         alt="Vercel logo"
-        src="//ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg"
+        src={BLUR_IMAGE_URL}
         width={500}
-        height={500}
+        height={333}
         placeholder="blur"
+        blurDataURL={blurDataURL}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>
@@ -66,26 +91,25 @@ const Home: NextPage = () => (
       <p>It will be proxied through Media Proxy.</p>
       <Image
         alt="Next.js logo"
-        src="//assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
-        width={1200}
-        height={400}
-        loader={uploadcareLoader}
+        src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
+        width={500}
+        height={166}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>SVGs and GIFs will be used without transformations</p>
       <Image
         alt="Next.js logo"
-        src="//ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
+        src="https://ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
         width={64}
         height={64}
-        loader={uploadcareLoader}
       />
       <Image
         alt="Vercel logo"
-        src="//ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
+        src="https://ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
         width={64}
         height={64}
-        loader={uploadcareLoader}
       />
       <hr className={styles.hr} />
       <p>
@@ -95,18 +119,30 @@ const Home: NextPage = () => (
       <Image
         alt="A local image"
         src="/local_image.png"
-        width={494}
-        height={332}
-        loader={uploadcareLoader}
+        width={600}
+        height={200}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
+      />
+      <hr className={styles.hr} />
+      <p>
+        Statically imported image will be served AS IS in Development, and
+        converted to the absolute URL and passed to the proxy in Production
+      </p>
+      <Image
+        alt="A statically imported image"
+        src={staticImportImage}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       Checkout the project documentation on Github{' '}
-      <a href="//github.com/uploadcare/nextjs-loader">
+      <a href="https://github.com/uploadcare/nextjs-loader">
         @uploadcare/nextjs-loader
       </a>
       .
     </div>
   </div>
-)
+);
 
-export default Home
+export default Home;

example/public/local_image.png

@@ -32,3 +32,8 @@
   border-top: 1px solid #eaeaea;
   margin: 1.5rem 0;
 }
+
+.fullWidthImage {
+  width: 100%;
+  height: auto;
+}