update docs

packages/artplayer-template/next.js/pages/ArtPlayer.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
-export default function ({ option, getInstance, ...rest }) {
+export default function Player({ option, getInstance, ...rest }) {
     const artRef = useRef();
 
     useEffect(() => {
@@ -19,6 +19,7 @@ export default function ({ option, getInstance, ...rest }) {
                 art.destroy(false);
             }
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return <div ref={artRef} {...rest}></div>;

packages/artplayer-template/next.js/pages/index.js

@@ -1,21 +1,23 @@
-import { useRef } from "react";
-import Artplayer from "./Artplayer";
+import React from 'react';
+import Artplayer from './ArtPlayer';
 
-export default function Home() {
-  const option = useRef({
-    url: "https://artplayer.org/assets/sample/video.mp4",
-    autoSize: true,
-  });
-
-  return (
-    <Artplayer
-      option={option.current}
-      style={{
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      }}
-      getInstance={(art) => console.log(art)}
-    />
-  );
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                    autoSize: true,
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.log(art)}
+            />
+        </div>
+    );
 }
+
+export default App;