(stale) Added next.js sample.

example/index.js → devtools/index.js

@@ -35,7 +35,9 @@ function App() {
       <div>
         <select value={src} onChange={onSelectSrc}>
           {STREAMS.map(stream => (
-            <option value={stream.src}>{stream.name}</option>
+            <option key={stream.src} value={stream.src}>
+              {stream.name}
+            </option>
           ))}
         </select>
       </div>

examples/next.js/.gitignore

@@ -0,0 +1 @@
+.next

examples/next.js/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "shaka-player-react-next.js-sample",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^9.2.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "shaka-player-react": "^1.0.1"
+  }
+}

examples/next.js/pages/_app.js

@@ -0,0 +1,5 @@
+import './shaka-player-controls.css';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

examples/next.js/pages/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+
+const ShakaPlayer = dynamic(() => import('shaka-player-react'), {
+  ssr: false,
+});
+
+export default function Index() {
+  return (
+    <div>
+      <ShakaPlayer
+        autoPlay
+        src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
+      />
+    </div>
+  );
+}