フルスタックチャンネル
サインアップサインアップ
ログインログイン
利用規約プライバシーポリシーお問い合わせ
Copyright © All rights reserved | FullStackChannel
受付中
Next.jsで作ったブログに、Supabaseを使ったコメント機能を付ける
Next.js
佐藤邦男
2023/09/02 10:13

実現したいこと

自分が作ったサイトのブログにコメント機能を付ける。
タイトルにあるように、ブログはSupabaseは無関係です。

発生している問題

コメント機能を見始めたが、ブログ本体の理解が必要と感じ、
「Next.js13新機能のAppDirectoryとSupabaseでブログ構築」を始めたが途中でエラーが出た。
「11 状態管理Zustand」にあるように実行したら、utils\supabase-server.tsの7行目で
supabase_auth_helpers_nextjs__WEBPACK_IMPORTED_MODULE_1_.createServerComponentSupabaseClient) is not a function
のエラーで直し方が分かりません

ソースコード

多分、ほどんどコピペしているので、記事の通りと思います。
ソースをD/Lして該当部分を比較しましたが同じでした。

自分で試したこと

「04 Next.js準備」に「もし最新のバージョンで動かない場合は、下記のバージョンに合わせてください。」とありますが、
勝手に変えていいのでしょうか

補足情報

私の環境は、Windows10Proでコンパイルは、WindowsPowerSellで行っています。pachage.jsonは

  "dependencies": {
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@supabase/supabase-js": "^2.32.0",
    "@types/node": "20.4.9",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "@types/uuid": "^9.0.2",
    "autoprefixer": "10.4.14",
    "date-fns": "^2.30.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.13",
    "next": "13.4.13",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "server-only": "^0.0.1",
    "sharp": "^0.32.4",
    "supabase": "^1.83.7",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6",
    "uuid": "^9.0.0",
    "zustand": "^4.4.1"
  },
  "devDependencies": {
    "encoding": "^0.1.13"
  }

です。ほかに、必要なことがあるでしょうか。

回答 3件
login
回答するにはログインが必要です
はる@講師
1年以上前

ご質問ありがとうございます。

インストールされているバージョンが、チュートリアルのバージョンと異なるため発生しているエラーかと思います。
特にsupabase関連のバージョンが上がっているので、書き方が異なってきます。
バージョンをチュートリアルのバージョンに合わせて実装してみて、
全体が把握できてから、最新のバージョンにしてsupabaseのドキュメントを見ながら実装していくことをオススメします。

■チュートリアルのバージョン

"@supabase/auth-helpers-nextjs": "^0.5.4",
"@supabase/supabase-js": "^2.4.1",
"supabase": "^1.34.5",

↓

"@supabase/auth-helpers-nextjs": "^0.7.4",
"@supabase/supabase-js": "^2.32.0",
"supabase": "^1.83.7",
佐藤邦男
1年以上前

早速の回答、ありがとうございます。
なにせ、当方は初心者ゆえ、バージョンの変更方法が分かりません。ネットで「Supabaseバージョンの変更方法」 を
検索しましたが、分かりませんでした。
逸脱した質問かもしれません。ご存知でしたらご教授お願いします。

1
はる@講師
1年以上前

rm -rf node_modulesでnode_modulesフォルダを削除します。

package.jsonの中身を削除して、チュートリアルのpackage.jsonの中身に置き換えます。

npm iでライブラリをインストールします。

これで、チュートリアルのバージョンと同じになります。

試してみてください。