[Docs] Migrate image-component example to typescript

examples/image-component/components/view-source.js → examples/image-component/components/view-source.tsx

@@ -1,21 +1,25 @@
-import { svg, arm } from './view-source.module.css'
+import styles from './view-source.module.css'
 
-const ViewSource = ({ pathname }) => (
+type ViewSourceProps = {
+  pathname: string
+}
+
+const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="80"
     height="80"
     viewBox="0 0 250 250"
     fill="#151513"
-    className={svg}
+    className={styles.svg}
   >
     <a
       title="View Source"
       href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
-        className={arm}
+        className={styles.arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />

examples/image-component/package.json

@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }

examples/image-component/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../app.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/image-component/pages/background.js → examples/image-component/pages/background.tsx

@@ -1,11 +1,11 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
-import { bgWrap, bgText } from '../styles.module.css'
+import styles from '../styles.module.css'
 
-const Background = () => (
+const BackgroundPage = () => (
   <div>
-    <ViewSource pathname="pages/background.js" />
-    <div className={bgWrap}>
+    <ViewSource pathname="pages/background.tsx" />
+    <div className={styles.bgWrap}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
@@ -14,12 +14,12 @@ const Background = () => (
         quality={100}
       />
     </div>
-    <p className={bgText}>
+    <p className={styles.bgText}>
       Image Component
       <br />
       as a Background
     </p>
   </div>
 )
 
-export default Background
+export default BackgroundPage

examples/image-component/pages/color.js → examples/image-component/pages/color.tsx

@@ -5,20 +5,20 @@ import ViewSource from '../components/view-source'
 const keyStr =
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
 
-const triplet = (e1, e2, e3) =>
+const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
   keyStr.charAt(e3 & 63)
 
-const rgbDataURL = (r, g, b) =>
+const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
   }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
 
 const Color = () => (
   <div>
-    <ViewSource pathname="pages/color.js" />
+    <ViewSource pathname="pages/color.tsx" />
     <h1>Image Component With Color Data URL</h1>
     <Image
       alt="Dog"

examples/image-component/pages/index.js → examples/image-component/pages/index.tsx

@@ -3,12 +3,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import ViewSource from '../components/view-source'
 import vercel from '../public/vercel.png'
+import type { PropsWithChildren } from 'react'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
+const Code = (props: PropsWithChildren) => (
+  <code className={styles.inlineCode} {...props} />
+)
 
 const Index = () => (
   <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
+    <ViewSource pathname="pages/index.tsx" />
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>

examples/image-component/pages/layout-fill.js → examples/image-component/pages/layout-fill.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fill = () => (
   <div>
-    <ViewSource pathname="pages/layout-fill.js" />
+    <ViewSource pathname="pages/layout-fill.tsx" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />

examples/image-component/pages/layout-fixed.js → examples/image-component/pages/layout-fixed.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
-    <ViewSource pathname="pages/layout-fixed.js" />
+    <ViewSource pathname="pages/layout-fixed.tsx" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-intrinsic.js → examples/image-component/pages/layout-intrinsic.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
-    <ViewSource pathname="pages/layout-intrinsic.js" />
+    <ViewSource pathname="pages/layout-intrinsic.tsx" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-responsive.js → examples/image-component/pages/layout-responsive.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
+    <ViewSource pathname="pages/layout-responsive.tsx" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/placeholder.js → examples/image-component/pages/placeholder.tsx

@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const PlaceholderBlur = () => (
   <div>
-    <ViewSource pathname="pages/placeholder.js" />
+    <ViewSource pathname="pages/placeholder.tsx" />
     <h1>Image Component With Placeholder Blur</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/shimmer.js → examples/image-component/pages/shimmer.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
 
-const shimmer = (w, h) => `
+const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
@@ -15,14 +15,14 @@ const shimmer = (w, h) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`
 
-const toBase64 = (str) =>
+const toBase64 = (str: string) =>
   typeof window === 'undefined'
     ? Buffer.from(str).toString('base64')
     : window.btoa(str)
 
 const Shimmer = () => (
   <div>
-    <ViewSource pathname="pages/shimmer.js" />
+    <ViewSource pathname="pages/shimmer.tsx" />
     <h1>Image Component With Shimmer Data URL</h1>
     <Image
       alt="Mountains"

examples/image-component/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}