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';