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

実現したいこと

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)

tritree

2023/03/11 20:37

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

liyuta

2023/03/29 02:22

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

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

回答1件

自己解決

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

js
1export default function Home() {

js
1export default function Home({ feedlypost }) {

投稿2023/03/29 02:21

liyuta

総合スコア1

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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