Nextjs14 and Whereby lib Navigator is not defined

Answered

F1 posted this in #help-forum

2024-01-15T11:58:20.000Z

Hey everybody i use Nextjs14 and whereby lib but i have a problem.
When i call useRoomconnection

const roomConnection = useRoomConnection(ROOM_URL, {
        localMediaOptions: {
            audio: true,
            video: true,
        }
    });

it got this error

navigator is not defined

please give me an advice

Answered by Ray

navigator is browser api which isn't available on the server.
you could create a component and use useRoomConnection hook in it. Then use dynamic with ssr disable to import it

import dynamic from 'next/dynamic';

const RoomConnection = dynamic(() => import('./room-connection'), {ssr:false})

export default function TempPage() {
  return <RoomConnection />
}

View full answer

15 Replies

@F1 Hey everybody i use Nextjs14 and whereby lib but i have a problem. When i call useRoomconnection const roomConnection = useRoomConnection(ROOM_URL, { localMediaOptions: { audio: true, video: true, } }); it got this error navigator is not defined please give me an advice

Ray

2024-01-15T12:02:45.000Z

navigator is browser api which isn't available on the server.
you could create a component and use useRoomConnection hook in it. Then use dynamic with ssr disable to import it

import dynamic from 'next/dynamic';

const RoomConnection = dynamic(() => import('./room-connection'), {ssr:false})

export default function TempPage() {
  return <RoomConnection />
}

Answer

F1OP

2024-01-15T12:12:51.000Z

wow first of all i'm a big fan of messi too haha thank you so much.

but i'm new at react and nextjs so i have a questions about how to create RoomConnection component .

If i create a component with useRoomConnection. How to use thing that come from room connection properties such as actions, toggleMicrophone please give me an example bro.

const roomConnection = useRoomConnection(ROOM_URL, {
        localMediaOptions: {
            audio: true,
            video: true,
        }
    });
const { actions } = roomConnection;
const { toggleMicrophone } = actions;

@Ray

@F1 wow first of all i'm a big fan of messi too haha thank you so much. but i'm new at react and nextjs so i have a questions about how to create RoomConnection component . If i create a component with useRoomConnection. How to use thing that come from room connection properties such as actions, toggleMicrophone please give me an example bro. const roomConnection = useRoomConnection(ROOM_URL, { localMediaOptions: { audio: true, video: true, } }); const { actions } = roomConnection; const { toggleMicrophone } = actions; <@743561772069421169>

Ray

2024-01-15T12:14:59.000Z

just create a new file

// app/temp-page/room-connection.tsx
'use client'

export default function RoomConnection() {
  const roomConnection = useRoomConnection(ROOM_URL, {
        localMediaOptions: {
            audio: true,
            video: true,
        }
    });
const { actions } = roomConnection;
const { toggleMicrophone } = actions;

...
}

F1OP

2024-01-15T12:33:36.000Z

thank a lot bro can you explain me why it work ?? @Ray

@F1 thank a lot bro can you explain me why it work ?? <@743561772069421169>

Ray

2024-01-15T12:35:39.000Z

because when the page try to render on the server and the navigator is not available so you see the error.
when using dynamic with ssr disable, this component will not be rendered on the server and only render on client

F1OP

2024-01-15T12:37:07.000Z

I want my page render on client too.
Why my page try to render on the server?

@F1 I want my page render on client too. Why my page try to render on the server?

Ray

2024-01-15T12:37:29.000Z

your page will render on client

because nextjs will prerender the page on the server

@Ray your page will render on client

F1OP

2024-01-15T12:39:11.000Z

because i use 'use client' at the top of my TempPage ?