Update next example to next v14 (#996)

Author: lukasIO

examples/nextjs/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next", "next/core-web-vitals"]
 }

examples/nextjs/next.config.js renamed to examples/nextjs/next.config.cjs

@@ -1,3 +1,5 @@
+// @ts-check
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,

examples/nextjs/package.json

@@ -2,6 +2,7 @@
   "name": "@livekit/component-example-next",
   "version": "0.2.40",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -14,7 +15,7 @@
     "@livekit/track-processors": "^0.3.2",
     "livekit-client": "^2.5.4",
     "livekit-server-sdk": "^2.6.1",
-    "next": "^12.3.4",
+    "next": "^14.2.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/nextjs/pages/_app.tsx

@@ -1,5 +1,5 @@
 import '../styles/globals.css';
-import type { AppProps } from 'next/app';
+import type { AppProps } from 'next/app.js';
 import '@livekit/components-styles';
 
 function MyApp({ Component, pageProps }: AppProps) {

examples/nextjs/pages/audio-only.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AudioConference, LiveKitRoom, useToken } from '@livekit/components-react';
 import type { NextPage } from 'next';
 import { generateRandomUserId } from '../lib/helper';

examples/nextjs/pages/clubhouse.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   ControlBar,
   LiveKitRoom,

examples/nextjs/pages/customize.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LiveKitRoom,
   ParticipantName,

examples/nextjs/pages/e2ee.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { LiveKitRoom, useToken, VideoConference, setLogLevel } from '@livekit/components-react';
 import type { NextPage } from 'next';
 import * as React from 'react';

examples/nextjs/pages/index.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import type { NextPage } from 'next';
-import Head from 'next/head';
 import styles from '../styles/Home.module.scss';
+import Head from 'next/head';
 
 const EXAMPLE_ROUTES = {
   voiceAssistant: {

examples/nextjs/pages/minimal.tsx

@@ -1,5 +1,6 @@
+'use client';
+
 import { LiveKitRoom, useToken, VideoConference, setLogLevel } from '@livekit/components-react';
-import { RoomConnectOptions } from 'livekit-client';
 import type { NextPage } from 'next';
 import { generateRandomUserId } from '../lib/helper';
 import { useMemo } from 'react';

examples/nextjs/pages/processors.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { setLogLevel } from '@livekit/components-core';
 import {

examples/nextjs/pages/simple.tsx

@@ -1,17 +1,20 @@
+'use client';
+
 import {
   ConnectionState,
   ControlBar,
   GridLayout,
   LiveKitRoom,
   ParticipantTile,
+  RoomAudioRenderer,
   RoomName,
   TrackRefContext,
   useToken,
   useTracks,
 } from '@livekit/components-react';
 import { Track } from 'livekit-client';
 import type { NextPage } from 'next';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styles from '../styles/Simple.module.css';
 import { generateRandomUserId } from '../lib/helper';
 
@@ -22,12 +25,14 @@ const SimpleExample: NextPage = () => {
   const [connect, setConnect] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
 
-  const [userInfo] = useState({
-    userInfo: {
-      identity: userIdentity,
-      name: userIdentity,
-    },
-  });
+  const userInfo = useMemo(() => {
+    return {
+      userInfo: {
+        identity: userIdentity,
+        name: userIdentity,
+      },
+    };
+  }, []);
 
   const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, userInfo);
 
@@ -58,7 +63,7 @@ const SimpleExample: NextPage = () => {
         >
           <RoomName />
           <ConnectionState />
-          {/* <RoomAudioRenderer /> */}
+          <RoomAudioRenderer />
           {isConnected && <Stage />}
           <ControlBar />
         </LiveKitRoom>

examples/nextjs/pages/voice-assistant.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   LiveKitRoom,
   useToken,

examples/nextjs/tsconfig.json

@@ -1,15 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -21,6 +21,6 @@
       "@livekit/components-styles": ["../../packages/styles/dist/types/general/index.css.d.ts"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.cjs"],
   "exclude": ["node_modules"]
 }

packages/react/package.json

@@ -39,7 +39,7 @@
   ],
   "scripts": {
     "build": "pnpm gen:svg && vite build",
-    "dev": "tsup --watch --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
+    "dev": "vite build --watch",
     "gen:icons": "rimraf -I -g ./src/assets/icons/*Icon.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/icons --typescript ../styles/assets/icons",
     "gen:images": "rimraf -I -g ./src/assets/images/*.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/images --typescript --no-svgo ../styles/assets/images",
     "gen:svg": "pnpm gen:images && pnpm gen:icons",