Next.jsでpostリクエストを行いたい

Comments

1. 

   @starMagichat

   Questioner

   more_horiz

   回答ありがとうございます。
   asyncがないからということはこういうことでよろしいでしょうか？
   そうすると別のエラーが出てしまい、下記のようなコードを書いてみたのですが

   import { headers } from 'next/headers';
   import React from 'react';
   
   
   
   
   export default function ap() {
       const data = {
           message: 'LINEnotifyに送りたい内容'
       };
   
       const TOKEN = 'ここにトークンをおく'
       async function name() {
           const response = await fetch('https://notify-api.line.me/api/notify', {
               method: 'POST',
               headers: {
                   Authorization: 'Bearer ' + TOKEN,
               },
               body: JSON.stringify(data),
           });
   
           const responseData = await response.json();
   
           const status = response.status
           return status
       }
    
       const statusCode = name()
   
   
   // 成功したか分かりやすくするため、statusCodeを確認できるようにしています。
   // 成功すればトークン自体は入れていないので無効なトークンということで401が返ると予想し/ています
       return <h1>{statusCode}</h1>
   }
   
   
   
   

   このように行ってみましたが今度は別の問題が発生してしまい

   Error: Cannot convert argument to a ByteString because the character at index 7 has a value of 12371 which is greater than 255.
   

   というエラーが表示されてしまいました。
   この場合も対処法などはあるのでしょうか。

   またNext.js で何とかという前に、fetch API の範囲内の話にできませんか？とのことですが、
   Next.jsの情報は一応必要だったらということなのでfetch APIの範囲で対応できそうな問題なら特に気にしなくて大丈夫です。なのでnext.js内のfetchAPIでPOSTの通信を行いたいという意味に細かく話すと　なると思います

2. 

   @SurferOnWww

   more_horiz

   asyncがないからということはこういうことでよろしいでしょうか？

   そうです。async の追加で最初に質問にあったエラー「トップレベルの 'await' 式は、・・・」は解決したはずです。解決したのであればこのスレッドはクローズしてください。

   そうすると別のエラーが出てしまい、下記のようなコードを書いてみたのですが

   それはまた前のスレッドのように、一つの問題の解決が次の疑問を呼んで質問を繰り返すパターンになってます。

   エラーメッセージ「Error: Cannot convert argument to a ByteString」でググってみてください。

   ヘッダーに使ってはいけない文字を使ったとかいう記事がヒットすると思います。それらの記事を参考に自助努力で問題を見つけてください。

   調べてもどうしても分からなければ別のスレッドを立てて、そこに回答者の方でコピペして実行すれば問題を再現できる fetch API の範囲内に限ったコードを書いて質問してください。

3. 

   @SurferOnWww

   more_horiz

   【追伸】

   ひょっとして、const TOKEN = 'ここにトークンをおく' をそのまま（日本語のまま正しいトークンに変えないで） Authorization: 'Bearer ' + TOKEN, としたとか？

   もしそうだとすると、それが「Error: Cannot convert argument to a ByteString・・・」の原因です。

4. 

   @starMagichat

   Questioner

   more_horiz

   無事できました！

   export default function ap() {
       const data = {
           message: 'LINEnotifyに送りたい内容'
       };
   
       const TOKEN = 'f1'
       async function name() {
           const response = await fetch('https://notify-api.line.me/api/notify', {
               method: 'POST',
               headers: {
                   Authorization: 'Bearer ' + TOKEN,
               },
               body: JSON.stringify(data),
           });
   
           const responseData = await response.json();
           console.log(responseData);
           const status = response.status
           return status
       }
       // const status = Re
       const statusCode = name()
   
       return <h1>{statusCode}</h1>
   }
   

   どうやら私の認識ではLINEnotifyはトークンが不正だと401エラーが返るという記述があったので、
   変なところにTOKENを送りつけるとまずいので、適当な文字列を送って401エラーを出してから本当のトークンをおこうと思ったのですが、どうやら英数字ではないとその前に、エラーが返ってきてしまうらしいです。
   あとこの状態でasyncを抜くとやはりエラーになるので、どちらもすごく勉強になりました。
   プログラミングはちょっとした勘違いがエラーに繋がることがよくあるので、すごく助かりました
   本当にありがとうございますm(_ _)m