profile
viewpoint

Ask questionsNext.js implementation problem

Hi, i tries to integrate agora in my next.js project but have some problem. The problem is the problem is next.js SSR concept. when i was import standard way (import AgoraRTC from "agora-rtc-sdk-ng"), i see window not defined. I tried dynamic import but this time when i was create client and local functions i cannot reach. How do i solve this?

SDK Version: 4.3.0

error

import React, { useEffect, useState, useRef } from "react"
import Head from "next/head"
import dynamic from "next/dynamic"
import Link from "next/link"
import styles from "../styles/Call.module.css"


const DynamicAgoraComponent = dynamic(
  () => import("agora-rtc-sdk-ng").then((mods) => mods.AgoraComponent),
  {
    ssr: false,
  },
)

function Meeting() {
  const rtc = {
    // For the local client.
    client: null,
    // For the local audio and video tracks.
    localAudioTrack: null,
    localVideoTrack: null,
  }

  const options = {
    // Pass your app ID here.
    appId: "d02c58eeb2a3463f839a6cd216d01ded",
    // Set the channel name.
    channel: "",
    // Pass a token if your project enables the App Certificate.
    token: null,
  }

  async function startBasicCall() {
    rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" })
    const uid = await rtc.client.join(
      options.appId,
      options.channel,
      options.token,
      null,
    )
    // Create an audio track from the audio sampled by a microphone.
    rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack()
    // Create a video track from the video captured by a camera.
    rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack()
    // Publish the local audio and video tracks to the channel.
    await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack])
  }

  startBasicCall()

  console.log("publish success!")

  return (
    <div className={styles.container}>
      <DynamicAgoraComponent />
      <Head>
        <title>Meeting Page | Video Call App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1>Call Page</h1>
      <p>
        window={window.width} x {window.height}
      </p>
      <br />
      <Link href="/">
        <p>Main Page</p>
      </Link>
    </div>
  )
}

export default Meeting

AgoraIO-Community/AgoraWebSDK-NG

Answer questions batur

Hi again:) , I solved problem. Agora need window but in NextJS concept doesnt fit that.

NextJS support dynamic import. When you read document, you can see With no SSR section. On the other hand Agora package cannot import like this. The solution is you must design page as a component. After this, you can dynamic import to pages like component.

I drop repo link i did like this https://github.com/cosakin/Agora-NoSSR-Solution

Regards.

useful!

Related questions

No questions were found.
source:https://uonfu.com/
answerer
Batur Akkurt batur @cousins-factory Ankara, Turkey baturdev.com Developer Guy, Ham Radio Operator TA2ULK | 0xE7D3FCC5
Github User Rank List