429のエラーはリクエストが多すぎると発生するようです。

一度下記のURLだけを設定して試してみてください。

https://www.fullstackchannel.com/courses/31

OpenAIのEmbeddingのAPIのエラーなのか、Supabaseのエラーなのかご確認をお願い致します。

各ソースコードの前後にconsole.logを入れて確認してみてください。

はる@講師

### 実現したいこと
Next.js13とSupabaseで知識データベースQ&Aアプリ構築(Embedding)の実装

###エラーコード
Request failed with status code 429

### 自分で試したこと
データベースの作成ができません。となってしまい、上記のエラーが発生しました。waitする時間を増やせば改善するかと思い

```const wait = async (ms) => new Promise((resolve) => setTimeout(resolve, ms))```

を追加しましたが、うまく動作しませんでした。

データベースに何も登録がない状態で、質問しても「エラーが発生しました」となってしまします。
その時のエラーは下記のものとなります。
```[TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (1673kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)```

noteも購入しコードのミスはないとは思いますが、改善方法がわかりません。ご回答よろしくお願いします。

### 補足情報

### 実現したいこと
Vercelの本番環境で動画を要約したい

### 発生している問題
SyntaxError: Unexpected token 'A', "An error o"... is not valid JSON

Failed to load resource: the server responded with a status of 504 ()

Vercelのサーバーレス関数は、デフォルトで最大10秒間実行

api/chatgptの応答が10秒以上かかりエラーになる

### ソースコード

```
import { Configuration, OpenAIApi } from 'openai'

import type { NextApiRequest, NextApiResponse } from 'next'

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
})

const openai = new OpenAIApi(configuration)

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { prompt } = req.body

    // ChatGPT
    const content = `Please prepare an agenda and summary of the following statement in Japanese:\n: ${prompt}`
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: content }],
    })

    // レスポンスを返す
    const text = response.data.choices[0].message?.content

    res.status(200).json({ text })
  } catch (error) {
    console.error(error)
    res.status(500).send('Something went wrong')
  }
}

```


### 自分で試したこと

すでに非同期処理になっているか確認したところ非同期処理になっていたが
これはAPIの応答時間自体を短縮するものではないということがわかった


### 補足情報
[![Image from Gyazo](https://i.gyazo.com/f0c7ba142fddab64a553fb16fc910692.png)](https://gyazo.com/f0c7ba142fddab64a553fb16fc910692)


解決方法ご教授いただきたいです

Next.js

個人開発

Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリ構築で本番環境でのエラー

mumei

いつも楽しく学習させていただいております。   
zennで購入したインスタ風画像投稿サイト構築チュートリアルを実施するためにyoutubeでDjango + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)を参考に実装を進めている際にエラーにハマりましたのでご質問させてください。

### 実現したいこと

fetchでDRFで作成した新規登録API（api/auth/register）を叩けるようにしたい。

### 発生している問題

```
// NEXT_PUBLIC_API_URL=http://127.0.0.1:8000 は.envに定義しております。

const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: body
```


以上のコードを実施したときにエラー内容が出力されます。


### エラー内容

```
 TypeError: fetch failed
     at Object.fetch (node:internal/deps/undici/undici:11457:11)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
     at async register_api (webpack-internal:///(api)/./pages/api/account/register.tsx:19:28) {
   cause: Error: connect ECONNREFUSED 127.0.0.1:8000
       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) {
     errno: -111,
     code: 'ECONNREFUSED',
     syscall: 'connect',
     address: '127.0.0.1',
     port: 8000
   }
 }
```

### ソースコード

https://github.com/Masaya00/InstaLike/blob/master/frontend/insta/pages/api/account/register.tsx#L12-L43


### 自分で試したこと

① http://127.0.0.1:8000/api/auth/register/ をPostmanで叩いた際は問題なく新規登録を行えることを確認しています。

② 以下のように127.0.0.1が起動していることは確認しております。

```
% netstat -n | grep '127.0.0.1'
tcp4       0      0  127.0.0.1.8000         127.0.0.1.62993        ESTABLISHED
tcp4       0      0  127.0.0.1.62993        127.0.0.1.8000         ESTABLISHED
・
・
・
```

③ jsonplaceholderの内容をfetchで取得することはできました。

④ http://127.0.0.1:8000/api/auth/user をfetchで取得しようとした際にも今回と同様のエラーが発生しました。


### 補足情報

typescriptを利用し、環境構築はdockerで行なっておりますので、動画内のソースコードと全てが同じというわけではありません。ご容赦ください。

Django側とNextJS側の連携が上手くいっていないだけのようなのですが、原因が突き止められておりません。  
もしこのエラー内容に心当たりがありましたら、ご教授いただきたいです。

※当方、Djangoの知見はそれなりにあるのですが、Next.jsに関しては素人です。

お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。  
これからの動画投稿、執筆活動のご健闘をお祈りしています。

Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)で新規登録時にfetchでDRFのAPIが取得できない。

まさや

### 実現したいこと
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>動画</a>
を参考にして、フロントサイドはハル先生のサブスク有料会員の動画を参考にしてwebアプリを作っています。なんとかuser_createで仮登録機能は実装できたのですが、activationで本登録をする為の方法が全く思い浮かびません、そして色々調べてみたのですが3日ほど答えを見つけられずにいます。もし、activationによる本登録がpostmanを使わずにnext.jsとDjangoなどで可能でしたらやり方を教えていただきたいです。

### 発生している問題
Djoserのactivationを使っての本登録のやり方が全くわからない。

### ソースコード
バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>この動画</a>とほとんど同じです。
Reactサイド

```pages/api/account/register.js
export default async(req, res) => {
 if(req.method === 'POST'){
 const { name, email, password, re_password } = req.body
 const body=JSON.stringify({
 name,
 email,
 password,
 re_password,
 })
 try{
 const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: body,
 })
 const data = await apiRes.json()
 if (apiRes.status === 201){
 return res.status(200).json({
 success: 'Account registration is successed!',
 })
 }else{
 return res.status(apiRes.status).json({
 error: 'We failed to register your account',
 })
 }
 }catch(err){
 return res.status(500).json({
 error: 'We failed to register your account',
 })
 }
 }else{
 res.setHeader('Allow', ['POST'])
 return res.status(405).json({ error: `Method ${req.method} not allowded.` })
 }
}
```

```pages/register.js
export default async(req, res) => {
 if(req.method === 'POST'){
 const { name, email, password, re_password } = req.body
 const body=JSON.stringify({
 name,
 email,
 password,
 re_password,
 })
 try{
 const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: body,
 })
 const data = await apiRes.json()
 if (apiRes.status === 201){
 return res.status(200).json({
 success: 'Account registration is successed!',
 })
 }else{
 return res.status(apiRes.status).json({
 error: 'We failed to register your account',
 })
 }
 }catch(err){
 return res.status(500).json({
 error: 'We failed to register your account',
 })
 }
 }else{
 res.setHeader('Allow', ['POST'])
 return res.status(405).json({ error: `Method ${req.method} not allowded.` })
 }
}
```
### 自分で試したこと
Googleで日本語と英語で調べまくる。
Chat GPTに聞いてみる。

### 補足情報
いつもお世話になっております。

Django

DRF+Djoser+Next.jsでDjoserのactivationを実装したい

KosKos

### 実現したいこと
![](https://cdn.discordapp.com/attachments/757627473427955867/1091924042564505610/2023-04-02_12.14.472.png)
上記の画像の状態を解決したい


### 発生している問題
500 Internal Server Errorが発生していて、データベースが作成できません


### ソースコード
https://gist.github.com/hrkn63-hnm/5e4ee1b7ba3a0e23b2fb050f282118e6

フルスタックチャンネル様のソースコードをコピペしました。

### 自分で試したこと
`components/knowledge/knowledge-new.tsx`のファイルの中で
`console.log(urls)`
`console.log({urls})`
`console.log(body)`を行いましたが、特に問題があるようには感じられませんでした。
Fetchの時点でうまくいっていないと思われますが、対処できませんでした。

![](https://media.discordapp.net/attachments/757627473427955867/1091926986261274664/2023-04-02_12.27.212.png?width=1040&height=378)

また、429エラーやCould not parse CSS stylesheetなども見受けられます。
おそらく、429エラーが原因でAPI大量リクエストをおこなってしまっているようです。

加えて、OpenAIのAPIkeyが一度も使われていないこと、ベクトルへの変換が正常に行われていないことも関係がありそうです。

対処法を教えていただけると幸いです。

### 追記
私のコードにミスがあるかもしれないと思い、フルスタックチャンネル様のリポジトリをForkしてローカルで実行してみましたが、同じエラーが発生しました。
`.env.local`を追加してsupabaseの設定も行なっており`npm i`も実行済みです。

また、動画内で知識データベースにリンクを追加する際（19:53~19:55）に、動画が「カット」されており、不自然に感じました。2個目以降のリンクを追加する際には確認できなかったので私の勘違いなのかもしれませんが、初めてデータを格納する際は別に何かをするようにも感じました。詳しく教えていただけると幸いです。

JavaScript

データベース

「Next.js13とSupabaseで知識データベースQ&Aアプリ構築(Embedding)」でデータベースの作成ができない

### 実現したいこと
ユーザーが投稿した自分のブログのタイトルと作成日を表示するマイページを作りたいです。どのようにsupabaseからデータ取得して画面表示すればいいのかうまくいきません。

### 発生している問題
supabaseからuser.idに紐づくブログのtitleとcreated_atを取得してconsole.logでは表示できているのですが、return 部分で反映できず画面表示できません。

### ソースコード
`````
"use client";

import { format } from "date-fns";
import { useSupabase } from "../supabase-provider";
import useStore from "../../../store";

const BlogList = () => {
 const { supabase } = useSupabase();
 const { user } = useStore();

 // supabaseからリスト取得
 const getBlogList = async () => {
 const { data: blogsData } = await supabase
 .from("blogs")
 .select("id, title, created_at")
 .eq("profile_id", user.id)
 .order("created_at", { ascending: false }); // 作成日順に並び替え

 // リストが見つからない場合
 if (!blogsData) return;

 console.log(blogsData); // 正常にデータ取得できている
 };
 getBlogList();

 return (
 <ul>
 {blogsData.map((blog: any) => {
 return (
 <li key={blog.id}>
 {blog.title}
 
 {format(new Date(blog.created_at), "yyyy/MM/dd")}
 
 </li>
 );
 })}
 </ul>
 );
};

export default BlogList;
``````
### 自分で試したこと
(１) // supabaseからリスト取得 の部分で、

``const getBlogList = async () => {``と
``};getBlogList();``
を付けず、

async は
``const BlogList = async () => {``
に付けてみたところ、Objects are not valid as a React child (found: [object Promise]). のエラーが出てしまいました。


(２)ユーザーidに紐づけてデータ取得するためには、サーバーコンポーネントではなくクライエントコンポーネントで書くのかと思い試しましたが、根本的に間違っているのでしょうか。

### 補足情報
初学者で基本の理解もまだ充分ではないのですが、先生の動画や記事に出会ってから挫折せず続けられるようになりました。よろしくお願いいたします。