diff --git a/examples/with-gsap/components/Content.js b/examples/with-gsap/components/Content.tsx similarity index 83% rename from examples/with-gsap/components/Content.js rename to examples/with-gsap/components/Content.tsx index 7f48fb904c39bf1..7f67d3e7a275556 100644 --- a/examples/with-gsap/components/Content.js +++ b/examples/with-gsap/components/Content.tsx @@ -1,10 +1,11 @@ import { useEffect, useRef } from 'react' import { gsap } from 'gsap' -const Content = () => { +export default function Content() { let line1 = useRef(null) + useEffect(() => { - gsap.from([line1], 0.6, { + gsap.from([line1.current], 0.6, { delay: 0.9, ease: 'power3.out', y: 24, @@ -15,7 +16,7 @@ const Content = () => { }, [line1]) return ( -

(line1 = el)} className="line"> +

A Simple example using{' '} {

) } - -export default Content diff --git a/examples/with-gsap/components/Home.js b/examples/with-gsap/components/Home.tsx similarity index 90% rename from examples/with-gsap/components/Home.js rename to examples/with-gsap/components/Home.tsx index 25d491531bbf279..065619f779c4421 100644 --- a/examples/with-gsap/components/Home.js +++ b/examples/with-gsap/components/Home.tsx @@ -1,7 +1,7 @@ import Title from './Title' import Content from './Content' -const Home = () => { +export default function Home() { return (
@@ -15,5 +15,3 @@ const Home = () => { </div> ) } - -export default Home diff --git a/examples/with-gsap/components/Title.js b/examples/with-gsap/components/Title.tsx similarity index 64% rename from examples/with-gsap/components/Title.js rename to examples/with-gsap/components/Title.tsx index 2761edbee1ca6d6..7f250ea59be6786 100644 --- a/examples/with-gsap/components/Title.js +++ b/examples/with-gsap/components/Title.tsx @@ -1,11 +1,17 @@ import { useEffect, useRef } from 'react' import { gsap } from 'gsap' -const Title = ({ lineContent, lineContent2 }) => { +type TitleProps = { + lineContent: string + lineContent2: string +} + +export default function Title({ lineContent, lineContent2 }: TitleProps) { let line1 = useRef(null) let line2 = useRef(null) + useEffect(() => { - gsap.from([line1, line2], 0.8, { + gsap.from([line1.current, line2.current], 0.8, { delay: 0.8, ease: 'power3.out', y: 64, @@ -14,20 +20,19 @@ const Title = ({ lineContent, lineContent2 }) => { }, }) }, [line1, line2]) + return ( <h1 className="page-title"> <div className="line-wrap"> - <div ref={(el) => (line1 = el)} className="line"> + <div ref={line1} className="line"> {lineContent} </div> </div> <div className="line-wrap"> - <div ref={(el) => (line2 = el)} className="line"> + <div ref={line2} className="line"> {lineContent2} </div> </div> </h1> ) } - -export default Title diff --git a/examples/with-gsap/package.json b/examples/with-gsap/package.json index 37ed68998474a7b..888b6ea86dbc763 100644 --- a/examples/with-gsap/package.json +++ b/examples/with-gsap/package.json @@ -6,11 +6,19 @@ "start": "next start" }, "dependencies": { - "gsap": "^3.0.1", + "gsap": "^3.11.3", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-transition-group": "^4.3.0", - "sass": "1.29.0" + "react-transition-group": "^4.4.5", + "sass": "^1.56.2" + }, + "devDependencies": { + "@types/gsap": "^3.0.0", + "@types/node": "^18.11.12", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "@types/react-transition-group": "^4.4.5", + "typescript": "^4.9.4" } } diff --git a/examples/with-gsap/pages/_app.js b/examples/with-gsap/pages/_app.js deleted file mode 100644 index 7b11d92cf4b6b60..000000000000000 --- a/examples/with-gsap/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../App.scss' - -function MyApp({ Component, pageProps }) { - return <Component {...pageProps} /> -} - -export default MyApp diff --git a/examples/with-gsap/pages/_app.tsx b/examples/with-gsap/pages/_app.tsx new file mode 100644 index 000000000000000..e12b69b03d7995f --- /dev/null +++ b/examples/with-gsap/pages/_app.tsx @@ -0,0 +1,8 @@ +import type { AppProps } from 'next/app' +import '../App.scss' + +function MyApp({ Component, pageProps }: AppProps) { + return <Component {...pageProps} /> +} + +export default MyApp diff --git a/examples/with-gsap/pages/_document.js b/examples/with-gsap/pages/_document.js deleted file mode 100644 index c0219bc9e93dae6..000000000000000 --- a/examples/with-gsap/pages/_document.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Html, Head, Main, NextScript } from 'next/document' - -export default function Document() { - return ( - <Html> - <Head> - <link - href="https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap" - rel="stylesheet" - /> - </Head> - <body> - <Main /> - <NextScript /> - </body> - </Html> - ) -} diff --git a/examples/with-gsap/pages/api/hello.js b/examples/with-gsap/pages/api/hello.js deleted file mode 100644 index df63de88fa67cb0..000000000000000 --- a/examples/with-gsap/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function handler(req, res) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/examples/with-gsap/pages/index.js b/examples/with-gsap/pages/index.tsx similarity index 90% rename from examples/with-gsap/pages/index.js rename to examples/with-gsap/pages/index.tsx index 7517015223891d9..0c38d450fa917c4 100644 --- a/examples/with-gsap/pages/index.js +++ b/examples/with-gsap/pages/index.tsx @@ -2,8 +2,8 @@ import { CSSTransition } from 'react-transition-group' import { gsap } from 'gsap' import Home from '../components/Home' -function App() { - const onEnter = (node) => { +export default function HomePage() { + const onEnter = (node: any) => { gsap.from( [node.children[0].firstElementChild, node.children[0].lastElementChild], 0.6, @@ -18,7 +18,7 @@ function App() { } ) } - const onExit = (node) => { + const onExit = (node: any) => { gsap.to( [node.children[0].firstElementChild, node.children[0].lastElementChild], 0.6, @@ -51,5 +51,3 @@ function App() { </> ) } - -export default App diff --git a/examples/with-gsap/tsconfig.json b/examples/with-gsap/tsconfig.json new file mode 100644 index 000000000000000..99710e857874ff8 --- /dev/null +++ b/examples/with-gsap/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"] +} diff --git a/examples/with-mqtt-js/environment.d.ts b/examples/with-mqtt-js/environment.d.ts new file mode 100644 index 000000000000000..96efc89f4ae691a --- /dev/null +++ b/examples/with-mqtt-js/environment.d.ts @@ -0,0 +1,8 @@ +declare namespace NodeJS { + export interface ProcessEnv { + readonly NEXT_PUBLIC_MQTT_URI: string + readonly NEXT_PUBLIC_MQTT_USERNAME: string + readonly NEXT_PUBLIC_MQTT_PASSWORD: string + readonly NEXT_PUBLIC_MQTT_CLIENTID: string + } +} diff --git a/examples/with-mqtt-js/lib/useMqtt.js b/examples/with-mqtt-js/lib/useMqtt.ts similarity index 71% rename from examples/with-mqtt-js/lib/useMqtt.js rename to examples/with-mqtt-js/lib/useMqtt.ts index 973fab6059eb8f7..8e049d4eb60ebe7 100644 --- a/examples/with-mqtt-js/lib/useMqtt.js +++ b/examples/with-mqtt-js/lib/useMqtt.ts @@ -1,13 +1,21 @@ +import type { MqttClient, IClientOptions } from 'mqtt' import MQTT from 'mqtt' import { useEffect, useRef } from 'react' +interface useMqttProps { + uri: string + options?: IClientOptions + topicHandlers?: { topic: string; handler: (payload: any) => void }[] + onConnectedHandler?: (client: MqttClient) => void +} + function useMqtt({ uri, options = {}, topicHandlers = [{ topic: '', handler: ({ topic, payload, packet }) => {} }], onConnectedHandler = (client) => {}, -}) { - const clientRef = useRef(null) +}: useMqttProps) { + const clientRef = useRef<MqttClient | null>(null) useEffect(() => { if (clientRef.current) return @@ -23,9 +31,9 @@ function useMqtt({ const client = clientRef.current topicHandlers.forEach((th) => { - client.subscribe(th.topic) + client?.subscribe(th.topic) }) - client.on('message', (topic, rawPayload, packet) => { + client?.on('message', (topic: string, rawPayload: any, packet: any) => { const th = topicHandlers.find((t) => t.topic === topic) let payload try { @@ -36,7 +44,7 @@ function useMqtt({ if (th) th.handler({ topic, payload, packet }) }) - client.on('connect', () => { + client?.on('connect', () => { if (onConnectedHandler) onConnectedHandler(client) }) diff --git a/examples/with-mqtt-js/package.json b/examples/with-mqtt-js/package.json index 798499c254e0fb8..61613393e082a33 100644 --- a/examples/with-mqtt-js/package.json +++ b/examples/with-mqtt-js/package.json @@ -6,9 +6,15 @@ "start": "next start" }, "dependencies": { - "mqtt": "4.2.6", + "mqtt": "^4.3.7", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18.11.12", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "typescript": "^4.9.4" } } diff --git a/examples/with-mqtt-js/pages/index.js b/examples/with-mqtt-js/pages/index.tsx similarity index 81% rename from examples/with-mqtt-js/pages/index.js rename to examples/with-mqtt-js/pages/index.tsx index 6de3eedd3333474..a8cae982c1d8505 100644 --- a/examples/with-mqtt-js/pages/index.js +++ b/examples/with-mqtt-js/pages/index.tsx @@ -1,9 +1,10 @@ import { useState, useRef } from 'react' +import type { MqttClient } from 'mqtt' import useMqtt from '../lib/useMqtt' export default function Home() { - const [incommingMessages, setIncommingMessages] = useState([]) - const addMessage = (message) => { + const [incommingMessages, setIncommingMessages] = useState<any[]>([]) + const addMessage = (message: any) => { setIncommingMessages((incommingMessages) => [...incommingMessages, message]) } const clearMessages = () => { @@ -13,14 +14,14 @@ export default function Home() { const incommingMessageHandlers = useRef([ { topic: 'topic1', - handler: (msg) => { + handler: (msg: string) => { addMessage(msg) }, }, ]) - const mqttClientRef = useRef(null) - const setMqttClient = (client) => { + const mqttClientRef = useRef<MqttClient | null>(null) + const setMqttClient = (client: MqttClient) => { mqttClientRef.current = client } useMqtt({ @@ -34,7 +35,7 @@ export default function Home() { onConnectedHandler: (client) => setMqttClient(client), }) - const publishMessages = (client) => { + const publishMessages = (client: any) => { if (!client) { console.log('(publishMessages) Cannot publish, mqttClient: ', client) return diff --git a/examples/with-mqtt-js/tsconfig.json b/examples/with-mqtt-js/tsconfig.json new file mode 100644 index 000000000000000..99710e857874ff8 --- /dev/null +++ b/examples/with-mqtt-js/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"] +} diff --git a/examples/with-mux-video/components/button.js b/examples/with-mux-video/components/button.tsx similarity index 78% rename from examples/with-mux-video/components/button.js rename to examples/with-mux-video/components/button.tsx index b76d6e0ad3c1838..f1349302c276ffd 100644 --- a/examples/with-mux-video/components/button.js +++ b/examples/with-mux-video/components/button.tsx @@ -1,4 +1,8 @@ -export default function Button({ children, ...otherProps }) { +type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { + children: React.ReactNode +} + +export default function Button({ children, ...otherProps }: ButtonProps) { return ( <> <button {...otherProps}>{children}</button> diff --git a/examples/with-mux-video/components/error-message.js b/examples/with-mux-video/components/error-message.tsx similarity index 71% rename from examples/with-mux-video/components/error-message.js rename to examples/with-mux-video/components/error-message.tsx index 75ae50f96796f6d..140de09a219efd9 100644 --- a/examples/with-mux-video/components/error-message.js +++ b/examples/with-mux-video/components/error-message.tsx @@ -1,4 +1,8 @@ -export default function ErrorMessage({ message }) { +interface ErrorMessageProps { + message?: string +} + +export default function ErrorMessage({ message }: ErrorMessageProps) { return ( <> <div className="message">{message || 'Unknown error'}</div> diff --git a/examples/with-mux-video/components/layout.js b/examples/with-mux-video/components/layout.tsx similarity index 95% rename from examples/with-mux-video/components/layout.js rename to examples/with-mux-video/components/layout.tsx index 76c050a15951569..3d3995190a09607 100644 --- a/examples/with-mux-video/components/layout.js +++ b/examples/with-mux-video/components/layout.tsx @@ -1,6 +1,16 @@ import Head from 'next/head' import { MUX_HOME_PAGE_URL } from '../constants' +interface LayoutProps { + title?: string + description?: string + metaTitle?: string + metaDescription?: string + image?: string + children: React.ReactNode + loadTwitterWidget?: boolean +} + export default function Layout({ title, description, @@ -9,7 +19,7 @@ export default function Layout({ image = 'https://with-mux-video.vercel.app/mux-nextjs-og-image.png', children, loadTwitterWidget, -}) { +}: LayoutProps) { return ( <div className="container"> <Head> diff --git a/examples/with-mux-video/components/spinner.js b/examples/with-mux-video/components/spinner.tsx similarity index 90% rename from examples/with-mux-video/components/spinner.js rename to examples/with-mux-video/components/spinner.tsx index 7f8b4a11a009c64..59a861a3aac47f9 100644 --- a/examples/with-mux-video/components/spinner.js +++ b/examples/with-mux-video/components/spinner.tsx @@ -1,4 +1,9 @@ -export default function Spinner({ size = 6, color = '#999' }) { +interface SpinnerProps { + size?: Number + color?: string +} + +export default function Spinner({ size = 6, color = '#999' }: SpinnerProps) { return ( <> <div className="spinner" /> diff --git a/examples/with-mux-video/components/upload-form.js b/examples/with-mux-video/components/upload-form.tsx similarity index 84% rename from examples/with-mux-video/components/upload-form.js rename to examples/with-mux-video/components/upload-form.tsx index 6b9c8509a3e2395..e2b95ec21c273ce 100644 --- a/examples/with-mux-video/components/upload-form.js +++ b/examples/with-mux-video/components/upload-form.tsx @@ -6,7 +6,7 @@ import Button from './button' import Spinner from './spinner' import ErrorMessage from './error-message' -const fetcher = (url) => { +const fetcher = (url: string) => { return fetch(url).then((res) => res.json()) } @@ -14,9 +14,9 @@ const UploadForm = () => { const [isUploading, setIsUploading] = useState(false) const [isPreparing, setIsPreparing] = useState(false) const [uploadId, setUploadId] = useState(null) - const [progress, setProgress] = useState(null) + const [progress, setProgress] = useState<Number | null>(null) const [errorMessage, setErrorMessage] = useState('') - const inputRef = useRef(null) + const inputRef = useRef<HTMLInputElement>(null) const { data, error } = useSwr( () => (isPreparing ? `/api/upload/${uploadId}` : null), @@ -30,7 +30,6 @@ const UploadForm = () => { if (upload && upload.asset_id) { Router.push({ pathname: `/asset/${upload.asset_id}`, - scroll: false, }) } }, [upload]) @@ -54,18 +53,25 @@ const UploadForm = () => { } } - const startUpload = (evt) => { + const startUpload = () => { setIsUploading(true) + + const files = inputRef.current?.files + if (!files) { + setErrorMessage('An unexpected issue occurred') + return + } + const upload = UpChunk.createUpload({ endpoint: createUpload, - file: inputRef.current.files[0], + file: files[0], }) - upload.on('error', (err) => { + upload.on('error', (err: any) => { setErrorMessage(err.detail.message) }) - upload.on('progress', (progress) => { + upload.on('progress', (progress: any) => { setProgress(Math.floor(progress.detail)) }) @@ -90,7 +96,7 @@ const UploadForm = () => { </> ) : ( <label> - <Button type="button" onClick={() => inputRef.current.click()}> + <Button type="button" onClick={() => inputRef.current?.click()}> Select a video file </Button> <input type="file" onChange={startUpload} ref={inputRef} /> diff --git a/examples/with-mux-video/components/upload-page.js b/examples/with-mux-video/components/upload-page.tsx similarity index 93% rename from examples/with-mux-video/components/upload-page.js rename to examples/with-mux-video/components/upload-page.tsx index bc945f16c050a01..105a776c27af326 100644 --- a/examples/with-mux-video/components/upload-page.js +++ b/examples/with-mux-video/components/upload-page.tsx @@ -1,7 +1,11 @@ import Layout from './layout' import { MUX_HOME_PAGE_URL } from '../constants' -export default function UploadPage({ children }) { +interface UploadPageProps { + children: React.ReactNode +} + +export default function UploadPage({ children }: UploadPageProps) { return ( <Layout title="Welcome to Mux + Next.js" diff --git a/examples/with-mux-video/constants.js b/examples/with-mux-video/constants.ts similarity index 100% rename from examples/with-mux-video/constants.js rename to examples/with-mux-video/constants.ts diff --git a/examples/with-mux-video/package.json b/examples/with-mux-video/package.json index 5d858c79ee6b70e..b37ed8e43989d98 100644 --- a/examples/with-mux-video/package.json +++ b/examples/with-mux-video/package.json @@ -6,12 +6,18 @@ "start": "next start" }, "dependencies": { - "@mux/mux-node": "^2.8.0", - "@mux/mux-player-react": "latest", - "@mux/upchunk": "^2.3.1", + "@mux/mux-node": "^7.0.0", + "@mux/mux-player-react": "^1.4.0", + "@mux/upchunk": "^3.0.0", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0", - "swr": "^0.2.0" + "swr": "^1.3.0" + }, + "devDependencies": { + "@types/node": "^18.11.10", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.9", + "typescript": "^4.9.3" } } diff --git a/examples/with-mux-video/pages/api/asset/[id].js b/examples/with-mux-video/pages/api/asset/[id].ts similarity index 66% rename from examples/with-mux-video/pages/api/asset/[id].js rename to examples/with-mux-video/pages/api/asset/[id].ts index a9bf34692ac5ffb..014ae2cb1c7c65a 100644 --- a/examples/with-mux-video/pages/api/asset/[id].js +++ b/examples/with-mux-video/pages/api/asset/[id].ts @@ -1,19 +1,23 @@ +import type { NextApiRequest, NextApiResponse } from 'next' import Mux from '@mux/mux-node' const { Video } = new Mux() -export default async function assetHandler(req, res) { +export default async function assetHandler( + req: NextApiRequest, + res: NextApiResponse +) { const { method } = req switch (method) { case 'GET': try { - const asset = await Video.Assets.get(req.query.id) + const asset = await Video.Assets.get(req.query.id as string) res.json({ asset: { id: asset.id, status: asset.status, errors: asset.errors, - playback_id: asset.playback_ids[0].id, + playback_id: asset.playback_ids![0].id, }, }) } catch (e) { diff --git a/examples/with-mux-video/pages/api/upload.js b/examples/with-mux-video/pages/api/upload.ts similarity index 80% rename from examples/with-mux-video/pages/api/upload.js rename to examples/with-mux-video/pages/api/upload.ts index 1ee2f2b4e92966f..a79a688a2ec246c 100644 --- a/examples/with-mux-video/pages/api/upload.js +++ b/examples/with-mux-video/pages/api/upload.ts @@ -1,7 +1,11 @@ +import type { NextApiRequest, NextApiResponse } from 'next' import Mux from '@mux/mux-node' const { Video } = new Mux() -export default async function uploadHandler(req, res) { +export default async function uploadHandler( + req: NextApiRequest, + res: NextApiResponse +) { const { method } = req switch (method) { diff --git a/examples/with-mux-video/pages/api/upload/[id].js b/examples/with-mux-video/pages/api/upload/[id].ts similarity index 71% rename from examples/with-mux-video/pages/api/upload/[id].js rename to examples/with-mux-video/pages/api/upload/[id].ts index 86f0a3f4320a49d..e681a15709f9dc9 100644 --- a/examples/with-mux-video/pages/api/upload/[id].js +++ b/examples/with-mux-video/pages/api/upload/[id].ts @@ -1,13 +1,17 @@ +import type { NextApiRequest, NextApiResponse } from 'next' import Mux from '@mux/mux-node' const { Video } = new Mux() -export default async function uploadHandler(req, res) { +export default async function uploadHandler( + req: NextApiRequest, + res: NextApiResponse +) { const { method } = req switch (method) { case 'GET': try { - const upload = await Video.Uploads.get(req.query.id) + const upload = await Video.Uploads.get(req.query.id as string) res.json({ upload: { status: upload.status, diff --git a/examples/with-mux-video/pages/asset/[id].js b/examples/with-mux-video/pages/asset/[id].tsx similarity index 95% rename from examples/with-mux-video/pages/asset/[id].js rename to examples/with-mux-video/pages/asset/[id].tsx index efee2ff66ebfcb3..e1b2645c932dd08 100644 --- a/examples/with-mux-video/pages/asset/[id].js +++ b/examples/with-mux-video/pages/asset/[id].tsx @@ -6,7 +6,7 @@ import Spinner from '../../components/spinner' import ErrorMessage from '../../components/error-message' import UploadPage from '../../components/upload-page' -const fetcher = (url) => { +const fetcher = (url: string) => { return fetch(url).then((res) => res.json()) } @@ -27,7 +27,7 @@ export default function Asset() { } }, [asset]) - let errorMessage + let errorMessage: string = '' if (error) { errorMessage = 'Error fetching api' diff --git a/examples/with-mux-video/pages/index.js b/examples/with-mux-video/pages/index.tsx similarity index 100% rename from examples/with-mux-video/pages/index.js rename to examples/with-mux-video/pages/index.tsx diff --git a/examples/with-mux-video/pages/v/[id].js b/examples/with-mux-video/pages/v/[id].tsx similarity index 86% rename from examples/with-mux-video/pages/v/[id].js rename to examples/with-mux-video/pages/v/[id].tsx index 3c6815970b5d501..d6f832c24efff50 100644 --- a/examples/with-mux-video/pages/v/[id].js +++ b/examples/with-mux-video/pages/v/[id].tsx @@ -1,3 +1,8 @@ +import type { + InferGetStaticPropsType, + GetStaticProps, + GetStaticPaths, +} from 'next' import MuxPlayer from '@mux/mux-player-react' import Link from 'next/link' import Layout from '../../components/layout' @@ -5,20 +10,29 @@ import Spinner from '../../components/spinner' import { MUX_HOME_PAGE_URL } from '../../constants' import { useRouter } from 'next/router' -export function getStaticProps({ params: { id: playbackId } }) { +type Params = { + id?: string +} + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const { id: playbackId } = params as Params const poster = `https://image.mux.com/${playbackId}/thumbnail.png` return { props: { playbackId, poster } } } -export function getStaticPaths() { +export const getStaticPaths: GetStaticPaths = () => { return { paths: [], fallback: true, } } -const Code = ({ children }) => ( +type CodeProps = { + children: React.ReactNode +} + +const Code = ({ children }: CodeProps) => ( <> <span className="code">{children}</span> <style jsx>{` @@ -32,7 +46,10 @@ const Code = ({ children }) => ( </> ) -export default function Playback({ playbackId, poster }) { +export default function Playback({ + playbackId, + poster, +}: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter() if (router.isFallback) { diff --git a/examples/with-mux-video/tsconfig.json b/examples/with-mux-video/tsconfig.json new file mode 100644 index 000000000000000..99710e857874ff8 --- /dev/null +++ b/examples/with-mux-video/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"] +}