Next.jsでthree.jsを実装する方法について

実現したいこと

掲載の件につきまして、実装初期から躓いてしまいました。
解決策について教えて頂きたいです。
また、Next.jsで単純なルーティングぐらいしかしたことがなく、threeのモジュール等(CSRで実装しないとエラーになってしまう？)の扱いにあまり詳しくないので意識するポイントなど教えていただけれと思います。
(CSRやSSRなどの特徴は分かりますが、正直ほぼ制作で意識したことがありませんので、ブラウザのAPIなど使用する際はCSRでないといけないなども本件で「言われてみれば確かにそうだよね」となりました。)

発生している問題・分からないこと

＝＝フォルダ構成＝＝
src直下に
「Componentsフォルダ」/「page.js」→以降ComponentsPageと略します。
「appフォルダ」/page.js→以降appPageと略します
があります。

npm run dev で下記のエラーが出ます。
hook.js:608 TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

Canvasタグをコメントアウトし再度サーバーを立てるとエラーは出なくなります。
Canvasを使用しているコンポーネントでは"use client"を記載していますので問題ないと思ったのですが...何か他にやらないといけないことがあるのでしょうか？

Next.jsの知識が浅く申し訳ありませんが、詳しい方教えてくれますと助かります。

該当のソースコード

ComponentsPage
1"use client";
2import React from 'react'
3import { Canvas } from '@react-three/fiber'
4// import dynamic from 'next/dynamic';
5
6
7const Header = () => {
8  return (
9    <div className="mt-16">
10      <h1>テスト</h1>
11      <Canvas></Canvas>
12    </div>
13  )
14}
15
16export default Header

appPage
1import Header from "@/CommonComponents/header";
2import Link from "next/link";
3
4export default function Home() {
5  return (
6    <div>
7      <Header />
8      <h1>テスト</h1>
9    {/* <Link href="/pagechange">ページ遷移はこちら</Link> */}
10    </div>
11  );
12}

package.json
1 "dependencies": {
2    "@react-three/drei": "^9.120.4",
3    "@react-three/fiber": "^8.17.10",
4    "next": "15.0.4",
5    "react": "^19.0.0",
6    "react-dom": "^19.0.0",
7    "three": "^0.171.0"
8  },
9  "devDependencies": {
10    "eslint": "^8",
11    "eslint-config-next": "15.0.4",
12    "postcss": "^8",
13    "tailwindcss": "^3.4.1"
14  }

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

解決に至りませんでした。

補足

特になし

uky

2024/12/11 10:39

Reactのバージョンがかなり新しいもののようですが、18系に下げることで解消したりしませんか？？

KAI

2024/12/12 09:19

ご回答ありがとうございます。 react及びreact-domを18.3.1に変更しましたが、状況変わらずです。理由は調査中ですが、Next.jsの考え方を一応確認させて頂きたいです。基本的にはSSRでレンダリングして(ファイルに何も記載しない)本件のthree.jsモジュールやReactHooksなどブラウザ組み込みのモジュールを使用する？処理を記述するファイルはCSRでレンダリング("use client"を記載)すれば基本的にエラーは出ない想定であってますでしょうか？ SGというものに関しましてはあまり詳しくないのですが、基本的にSGを使用しないとエラーになる。というようなケースはないですよね？ SGは静的な内容の処理をレンダリングよりも前の段階で(ビルド時？)htmlファイルとして生成して置けるので、画面表示が早いぐらいの理解です。難しそうなので使用は避けてしまってますが... 本件と少し違う質問もしてしまいましたが、ご回答いただけると嬉しいです！

KAI

2024/12/12 09:24

Next.jsのバージョンを14にしたところエラー表示無くなりました！ありがとうございます！実はバージョンを下げて開発した経験がないのですが、本件のように不具合が解消しない場合、バージョンを下げて開発するというのは結構使う手段なのですか？

行動規範の内容に同意します

回答1件

いくつか追加できていたのでこちらでまとめて回答できるところは回答いたします。

元々の質問

Reactのバージョンがかなり新しいもののようですが、18系に下げることで解消したりしませんか？？

Reactのバージョンではなく、Nextjsのバージョンを14系に下げたところ問題が解消したそうです。（コメントでのやり取りより。）

追加の質問

基本的にはSSRでレンダリングして(ファイルに何も記載しない)本件のthree.jsモジュールやReactHooksなどブラウザ組み込みのモジュールを使用する？処理を記述するファイルはCSRでレンダリング("use client"を記載)すれば基本的にエラーは出ない想定であってますでしょうか？

そうですね。概ね合っていると思います。
ただ、外部のライブラリ（モジュール）の中にはServerComponentに対応しているものもありますので、それは公式のドキュメント等で確認しながらとなります。
今回のthree.jsについてももしかしたらServerComponent（Nextjs）用のライブラリが開発されている可能性もありますので、そちらを一旦探してみるほうが良いかもしれません。（検索は質問者さんにお任せ致します）

”use client”については、おっしゃる通りです。

SGというものに関しましてはあまり詳しくないのですが、基本的にSGを使用しないとエラーになる。というようなケースはないですよね？

SGを使用しないとエラーになるケースは特にないと思います。（おそらく）

SGは、Static Generationの略ですので、静的な生成をしてくれるものです。
静的ページは「いつ表示しても変わらないページ」「データフェッチがないページ」といったものです。
（利用規約のページやLPとかがある場合はそれが静的ページである場合が多いです

これのメリットは、CDNに配置することができるようになり、ページの提供を素早くすることができます。
なので、もしCDNに配置したいページがCSRやデータフェッチが必要な場合にはもしかしたらエラーになるかもしれません。（私もあまり詳しくないのでこの辺りはご自身で調べていただけると助かります。

実はバージョンを下げて開発した経験がないのですが、本件のように不具合が解消しない場合、バージョンを下げて開発するというのは結構使う手段なのですか？

これは状況によりけりですね。

何年も続いているNextjs, Reactのサービスの保守運用をやっている場合には、NextjsやReactのバージョンを下げて対応することはあまりないと思います。（少なくとも知らない

この場合、ライブラリ等は別です。

何年もずっとNextjs, Reactで続いているサービスであれば、サービスの機能も肥大化していきますので、少なくとも常に最新のバージョンを保ち続けられているわけではないからです。多くの場合、リファクタリングとしてバージョンをあげたりしていくことが求められますが、売上にならない開発作業となりますので、バージョンアップの優先度を下げられがちなためです。

このような場合に新しい機能開発のために、新しいライブラリをインストールした場合、そのライブラリが求めるNextjsやReactの動作環境（バージョン）に適していない場合があります。

前述の通り、NextjsやReactのバージョンを上げれば良いのですが他のライブラリも同様に適した動作環境がありますので、どこでエラーが出るのかわからないとなると、自然とライブラリのバージョンを下げることで、プロジェクトに適合させる方法を取ることとなります。

対して、新規開発などで立ち上げたばかりのプロジェクトでは、逆のことが起こったりします。

Nextjs、 Reactは最新版となってプロジェクトは立ち上がりますが、実際に使用したいライブラリが求める動作環境に適していない場合があるからです。（今回のようなケース）
その場合、適合している代替のライブラリを探すか、Nextjs, Reactのバージョンを下げることで対応します。

今回のケースではCanaryリリース（正式なリリースではない）場合には、今回のようにバージョンを下げて対応した方が良いケースが多いです。（NextjsやReactの最新版に破壊的変更が加わっていれば、使用したいライブラリが使用できないかもしれないからです。

以上長くなってしまい、ところどころ文章がおかしいかもしれませんが、ご参考にいただければと思います。

投稿2024/12/12 10:31

uky

総合スコア270