---
title: {{ page_meta.name }}｜{{ group.public_title }}｜{{ site_settings.logo_alt }}
description: "Next.js Webアプリで Agora Web UIKitを使用する方法について説明します。
サーバー側レンダリング (SSR) または静的サイト生成 (SSG)を使用する場合、動的インポートを使用して、Next.jsにAgora SDKを(“window is not defined”エラーが発生することなく) インポートします。"
---

[Agora Go Real ](https://jp.vcube.com/sdk/blog)

# [{{ page_meta.name }}｜{{ group.public_title }}｜{{ site_settings.logo_alt }}](https://jp.vcube.com/sdk/blog/using-the-agora-web-uikit-with-next-js)

 作成者: [ブイキューブ](https://jp.vcube.com/sdk/blog/author/v-cube)｜Dec 5, 2022 5:50:25 AM

# Reactのサンプルを使ってみましょう

`create-next-app`から作成したNext.jsアプリに[Agora Web UIKitリポジトリ](https://github.com/AgoraIO-Community/Web-React-UIKit/)の[Reactサンプルコンポーネント](https://github.com/AgoraIO-Community/Web-React-UIKit/blob/main/example/src/App.tsx)をインポートしようとすると、次のようにエラーが発生します。

 

コール スタックを見ると、エラーがAgoraSDKによってスローされていることがわかります。

# 何故このエラーが発生するのか？

Next.jsはSSRとSSGを使用します。 Agoraのライブラリが (直接、または、Agora Web UIKit によって) インポートされると、ブラウザーで使用可能な[Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)オブジェクトにアクセスします。Next.js は、サーバー上でWebページを事前にレンダリングするか (SSG)、リクエストごとにWebページをレンダリングします (SSR)。これにより、サーバー上でウィンドウ オブジェクトにアクセスできないため、エラーが発生します。したがって、`“window is not defined”`エラーが発生します。

# 修正方法

修正は非常に簡単です。ブラウザでページがレンダリングされるときだけ、Agora Web UIKitをインポートさせます。windowオブジェクトの条件付きチェックを使用してソリューションを回避することもできますが、Next.jsはSSRを使用しない[動的インポート](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)を提供しています。

 

`dynamic()`関数呼び出しを使用してVideocallのインポートを置き換えることができるようになりました。最初の引数は、ファイルからコンポーネントをインポートするだけの関数を受け取ります。2番目の引数は、このモジュールをサーバー側に含めたくないため`ssr`をfalse としてマークしたオブジェクトを受け入れます。

 

`Videocall`コンポーネントでAgoraのAPP IDを設定するとすぐに、サンプルが機能するようになります。そして、Next.js Webアプリにビデオ通話機能が追加できました。

# 結論

Next.js Web UIKit プロジェクトのサンプルは、[こちら](https://github.com/AgoraIO-Community/Web-React-UIKit/tree/nextjs/example-nextjs)で確認できます。さらに深く掘り下げたい場合は、例を詳しく説明しているこの[ブログ投稿](https://www.agora.io/en/blog/adding-video-chat-or-live-streaming-to-your-website-in-5-lines-of-code-using-the-agora-web-uikit/)をご参照ください。

又、[Android](https://github.com/AgoraIO-Community/VideoUIKit-Android)、[iOS](https://github.com/AgoraIO-Community/VideoUIKit-iOS)、[React Native](https://github.com/AgoraIO-Community/VideoUIKit-ReactNative)、および[Flutter](https://github.com/AgoraIO-Community/VideoUIKit-Flutter)でも利用できるUIKit があります。そちらもチェックできます。

[完全な記事を表示](https://jp.vcube.com/sdk/blog/using-the-agora-web-uikit-with-next-js)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "ブイキューブ"
  },
  "dateModified" : "2022-12-27T04:27:44.587Z",
  "datePublished" : "2022-12-05T05:50:25Z",
  "headline" : "Next.jsでAgora Web UIKitを利用する方法",
  "image" : {
    "@type" : "ImageObject",
    "height" : 630,
    "url" : "https://1970584.fs1.hubspotusercontent-na1.net/hubfs/1970584/solution/sdk/blog/common/agora_blog_ogp.png",
    "width" : 1200
  },
  "mainEntityOfPage" : "https://jp.vcube.com/sdk/blog/using-the-agora-web-uikit-with-next-js",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Agora Go Real"
  }
}
```