質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1248閲覧

Next.jsの非同期関数が上手く動かない

ryupy

総合スコア1

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/03/08 23:49

実現したいこと

  • Next.jsを使って、APIを使った非同期処理を行い、得られたデータをWebページに反映したい

前提

JavaScriptで非同期処理を使って、APIコールを行い、得られたデータを表示させるシステムを作っています。
その非同期を行う関数で、ちゃんと変数を宣言しているのに変数が宣言されていないといったエラーが確認できています。
ちなみに、Next.js側のサーバでは正常にデータを取得できています。Webアプリ上のみのエラーとなります。

発生している問題・エラーメッセージ

ReferenceError: feedly is not defined Source pages/index.js (13:24) @ feedly 11 | return { 12 | props: { > 13 | feedlypost: feedly, | ^ 14 | }, 15 | }; 16 | };

該当のソースコード

javascript

1import Head from "next/head"; 2import styles from "../styles/Home.module.css"; 3import { getFeedlyAccessToken, getFeedlyPosts } from "../lib/api"; 4 5export const getStaticProps = async () => { 6 try { 7 const feedlyKey = await getFeedlyAccessToken(); 8 const feedly = await getFeedlyPosts(feedlyKey); 9 10 // console.log("feedly", feedly) 11 12 return { 13 props: { 14 feedlypost: feedly, 15 }, 16 }; 17 } catch (err) { 18 return { 19 notFound: true, 20 }; 21 } 22}; 23 24export default function Home() { 25 const feedlyJson = getStaticProps(); 26 console.log("feedlyJson", feedlyJson); 27 28 return ( 29 <div className={styles.container}> 30 <Head> 31 <title>Create Next App</title> 32 <link rel="icon" href="/favicon.ico" /> 33 </Head> 34 35 <footer> 36 <a 37 href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" 38 target="_blank" 39 rel="noopener noreferrer" 40 > 41 Powered by{" "} 42 <img 43 src="/vercel.svg" 44 alt="Vercel" 45 className={styles.logo} 46 /> 47 </a> 48 </footer> 49 50 <style jsx>{` 51 main { 52 padding: 5rem 0; 53 flex: 1; 54 display: flex; 55 flex-direction: column; 56 justify-content: center; 57 align-items: center; 58 } 59 footer { 60 width: 100%; 61 height: 100px; 62 border-top: 1px solid #eaeaea; 63 display: flex; 64 justify-content: center; 65 align-items: center; 66 } 67 footer img { 68 margin-left: 0.5rem; 69 } 70 footer a { 71 display: flex; 72 justify-content: center; 73 align-items: center; 74 text-decoration: none; 75 color: inherit; 76 } 77 code { 78 background: #fafafa; 79 border-radius: 5px; 80 padding: 0.75rem; 81 font-size: 1.1rem; 82 font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 83 DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, 84 monospace; 85 } 86 `}</style> 87 88 <style jsx global>{` 89 html, 90 body { 91 padding: 0; 92 margin: 0; 93 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, 94 Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, 95 Helvetica Neue, sans-serif; 96 } 97 * { 98 box-sizing: border-box; 99 } 100 `}</style> 101 </div> 102 ); 103}

lib/api.js です

javascript

1const FEEDLYURL = process.env.FEEDLY_API_URL; 2const FEEDLYKEY = process.env.FEEDLY_REFRESH_TOKEN; 3 4export const getFeedlyAccessToken = async () => { 5 const data = { 6 client_id: "feedlydev", 7 client_secret: "feedlydev", 8 grant_type: "refresh_token", 9 refresh_token: FEEDLYKEY, 10 }; 11 12 const key = { 13 method: "POST", 14 headers: { 15 "Content-Type": "application/json", 16 }, 17 body: JSON.stringify(data), 18 }; 19 20 const res = await fetch(`${FEEDLYURL}/auth/token`, key).catch((err) => { 21 console.error(err); 22 }); 23 24 const json = await res.json(); 25 26 console.log("json", json); 27 28 if (json.errorMessage) { 29 console.error(json.errorMessage); 30 throw new Error("Failed to fetch API"); 31 } 32 33 return json.access_token; 34}; 35 36export const getFeedlyPosts = async (token) => { 37 const key = { 38 headers: { 39 Accept: "application/json", 40 Authroization: `Bearer ${token}`, 41 }, 42 }; 43 44 const res = await fetch( 45 `${FEEDLYURL}/streams/contents?streamId=feed%2Fhttps%3A%2F%2Fzenn.dev%2Ffeed&count=50`, 46 key 47 ).catch((err) => { 48 console.error(err); 49 }); 50 51 const json = await res.json(); 52 53 if (json.erroMessage) { 54 console.error(json.errorMessage); 55 throw new Error("Failed to fetc API"); 56 } 57 58 return json; 59}; 60

試したこと

getStaticProps内の処理をtry/catchで囲みましたが、全てcatch側の処理に行ってしまいます。

export const getStaticProps = async () => { try { const feedlyKey = await getFeedlyAccessToken(); const feedly = await getFeedlyPosts(feedlyKey); // console.log("feedly", feedly) return { props: { feedlypost: feedly, }, }; } catch (err) { return { notFound: true, }; } };

意味があるかわからないですが、libのフォルダをpagesの外にしても、中にしても挙動は一緒でした。

補足情報(FW/ツールのバージョンなど)

package.json

{ "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "next": "latest", "react": "18.2.0", "react-dom": "18.2.0" } }

node v18.14.2
chrome 110.0.5481.177 (Official Build)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tritree

2023/03/11 20:37

エラー文と実コードの行数がずれていますが、実行しているコードと見ているコードが違うなんてことはないですよね?
ryupy

2023/03/29 02:22

コメントありがとうございます。自己解決しましたので、返答は控えさせていただきます。
guest

回答1

0

自己解決

Next.jsのindex.jsのHomeコンポーネントに引数を与えていなかったためでした。
変更前

js

1export default function Home() {

js

1export default function Home({ feedlypost }) {

投稿2023/03/29 02:21

ryupy

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。