docs: specify npm dist tag (#155)

site/src/components/HomePageDemo/Base.tsx

@@ -18,7 +18,8 @@ function generateReactCode(skin: Skin): string {
   const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
   const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
 
-  return `import { MediaProvider, Video } from '@videojs/react';
+  return `// npm install @videojs/react@next
+import { MediaProvider, Video } from '@videojs/react';
 import { ${skinComponent} } from '@videojs/react/skins/${skinImport}';
 
 export const VideoPlayer = () => {
@@ -33,7 +34,8 @@ export const VideoPlayer = () => {
 }
 
 function generateJS(skin: Skin): string {
-  return `import '@videojs/html/skins/${skin}';`;
+  return `// npm install @videojs/html@next
+import '@videojs/html/skins/${skin}';`;
 }
 
 export default function BaseDemo({ className }: { className?: string }) {

site/src/content/docs/how-to/installation.mdx

@@ -24,16 +24,16 @@ Video.js v10 supports both React and vanilla JavaScript/HTML through Web Compone
 
 First, select your preferred framework in the framework selector at the top of the <span class="hidden lg:inline">sidebar</span><span class="lg:hidden">page</span>.
 
-Then, install the appropriate package:
+Then, install the appropriate package, taking care to use the `@next` dist.
 
 <FrameworkCase frameworks={["react"]}>
 ```bash
-npm install @videojs/react
+npm install @videojs/react@next
 ```
 </FrameworkCase>
 <FrameworkCase frameworks={["html"]}>
 ```bash
-npm install @videojs/html
+npm install @videojs/html@next
 ```
 </FrameworkCase>
 

site/src/utils/ejectCodeGenerator.ts

@@ -11,7 +11,8 @@ type Skin = 'frosted' | 'minimal';
  */
 export function generateReactComponent(skin: Skin): string {
   if (skin === 'frosted') {
-    return `import type { PropsWithChildren } from 'react';
+    return `// npm install @videojs/react@next
+import type { PropsWithChildren } from 'react';
 
 import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react';
 import {
@@ -127,7 +128,8 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
   );
 }`;
   } else {
-    return `import type { PropsWithChildren } from 'react';
+    return `// npm install @videojs/react@next
+import type { PropsWithChildren } from 'react';
 
 import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react';
 import {
@@ -1911,6 +1913,8 @@ media-tooltip {
  */
 export function generateHTMLJS(skin: Skin): string {
   return `import './${skin}.css';
+
+// npm install @videojs/html@next
 import '@videojs/html/icons';
 // be sure to import media-provider first
 import '@videojs/html/define/media-provider';