chore(examples): updated react-multi-carousel to TS (#37930)

### Example

- Moved to typescript
- Making use of the Image API (old example only use image tag)

### Dependencies

- updated deps to latest
- removed unused deps, just to focus on the current example and not
other ones
```
@material-ui/core, @material-ui/icons, jss, mobile-detect, react-jss
```

 ### Deploy 

[Example deploy](https://rmcexample-86mr9qpaa-falsepopsky.vercel.app/)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

Co-authored-by: Balázs Orbán <info@balazsorban.com>

examples/with-react-multi-carousel/README.md

@@ -8,8 +8,6 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-multi-carousel&project-name=with-react-multi-carousel&repository-name=with-react-multi-carousel)
 
-_Live Example: https://react-multi-carousel.vercel.app_
-
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
@@ -32,7 +30,3 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 - On the server-side, we detect the user's device to decide how many items we are showing and then using flex-basis to assign \* width to the carousel item.
 - On the client-side, old fashion getting width of the container and assign the average of it to each carousel item.
-
-The UI part of this example is copy paste from for the sake of simplicity. [with-material-ui](https://github.com/vercel/next.js/tree/canary/examples/with-material-ui)
-
-Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.

examples/with-react-multi-carousel/package.json

@@ -6,14 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "jss": "^9.8.7",
-    "mobile-detect": "^1.4.3",
-    "next": "^9.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-jss": "^8.6.1",
-    "react-multi-carousel": "^1.2.5"
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-multi-carousel": "^2.8.2"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "^4.7.4"
   }
 }

examples/with-react-multi-carousel/pages/index.tsx

@@ -0,0 +1,70 @@
+import Carousel from 'react-multi-carousel'
+import { ResponsiveType } from 'react-multi-carousel/lib/types'
+import 'react-multi-carousel/lib/styles.css'
+import Image from 'next/image'
+
+const BreakpointSlides: ResponsiveType = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 3,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 530 },
+    items: 2,
+  },
+  mobile: {
+    breakpoint: { max: 530, min: 0 },
+    items: 1,
+  },
+}
+
+export default function Page() {
+  return (
+    <Carousel
+      responsive={BreakpointSlides}
+      ssr
+      infinite
+      itemClass="carousel-item"
+      autoPlay
+    >
+      <Image
+        alt="Gundam"
+        src="/brucetang.jpg"
+        priority
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Musgo"
+        src="/cameronsmith.jpg"
+        priority
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Valley"
+        src="/ganapathykumar.jpg"
+        priority
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Beach"
+        src="/roanlavery.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+      <Image
+        alt="Torii"
+        src="/tianshuliu.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+    </Carousel>
+  )
+}

examples/with-react-multi-carousel/tsconfig.json

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