chore: update demo project

Author: nd0ut

example/next.config.js

@@ -1,7 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  reactStrictMode: true,
-  images: {
-    loader: "custom"
-  }
+  reactStrictMode: true
 }

example/pages/index.tsx

@@ -1,15 +1,36 @@
-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, {
+  uploadcareLoader,
+  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>
@@ -30,8 +51,10 @@ const Home: NextPage = () => (
         loader={uploadcareLoader}
         alt="Vercel logo"
         src="https://ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
-        width={1000}
-        height={1000}
+        width={500}
+        height={500}
+        sizes="(max-width: 50rem) 100vw, 50rem"
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>
@@ -43,6 +66,8 @@ const Home: NextPage = () => (
         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 +78,13 @@ const Home: NextPage = () => (
       </p>
       <UploadcareImage
         alt="Vercel logo"
-        src="https://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>
@@ -67,9 +95,10 @@ const Home: NextPage = () => (
       <Image
         alt="Next.js logo"
         src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
-        width={1200}
-        height={400}
+        width={500}
+        height={166}
         loader={uploadcareLoader}
+        className={styles.fullWidthImage}
       />
       <hr className={styles.hr} />
       <p>SVGs and GIFs will be used without transformations</p>
@@ -95,8 +124,18 @@ const Home: NextPage = () => (
       <Image
         alt="A local image"
         src="/local_image.png"
-        width={494}
-        height={332}
+        width={600}
+        height={400}
+        loader={uploadcareLoader}
+      />
+      <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}
         loader={uploadcareLoader}
       />
       <hr className={styles.hr} />
@@ -107,6 +146,6 @@ const Home: NextPage = () => (
       .
     </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;
+}