te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Unable to use getStaticProps in _app.js - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Unable to use getStaticProps in _app.js - Stack Overflow

    javascript - Unable to use getStaticProps in _app.js - Stack Overflow

    programmeradmin3浏览0评论

    I am using next.js and trying to do the following:

    1. Fetch basic data related to user data in _app.js. The data includes a title (for the navbar) and some social links (for the footer).

    2. Pass down that data to other ponents like Footer and Navbar at the build time (for static site generation).

    For that I've exported the getStaticProps from app.js file. But it doesn't seem to work. Here is my app.js.

    import Layout from "../src/Layout";
import "../styles/globals.css";
import getAppData from "services/appData";

export default function App({ data, Component, pageProps }) {
  console.log(data, "data"); // data is undefined here
  return (
    <>
      <Layout data={data}>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export async function getStaticProps() {
  console.log("working on it dude"); // this message is not logged in console (terminal)
  let data = await getAppData(CLIENTID);
  console.log(data); // data is undefined here as well
  return {
    props: {
      data: data,
    },
    revalidate: 60,
  };
}

    And the Layout.js

    import React, { useState } from "react";
import Head from "next/head";
import Footer from "./Footer";
import Navbar from "./Navbar";

// Contexts
export const toggleMenu = React.createContext();

export default function Layout({ data, children }) {
  // States
  const [showNav, setShowNav] = useState(true);
  const [showFooter, setShowFooter] = useState(true);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
        <toggleMenu.Provider
          value={{ showNav, showFooter, setShowFooter, setShowNav }}
        >
          {showNav ? <Navbar data={data.navbar} /> : null}
          {children}
          {showFooter ? <Footer data={data.footer} /> : null}
        </toggleMenu.Provider>
    </>
  );
}

    data is undefined even if I pass a simple string as props in getStaticProps.

    
export async function getStaticProps() {
  return {
    props: {
      data: "something",
    },
    revalidate: 60,
  };
}

    Knowing the fact that we can't use getStaticProps in a file other than a page, I have to use it in _app.js only and pass it down to <Layout data={data}/> ponent (if no other solution exists).

    I can use getStaticProps in index.js page as well but Navbar and Footer are used in it's parent ponent i.e, . Any help is appreciated.

    I am using next.js and trying to do the following:

    1. Fetch basic data related to user data in _app.js. The data includes a title (for the navbar) and some social links (for the footer).

    2. Pass down that data to other ponents like Footer and Navbar at the build time (for static site generation).

    For that I've exported the getStaticProps from app.js file. But it doesn't seem to work. Here is my app.js.

    import Layout from "../src/Layout";
import "../styles/globals.css";
import getAppData from "services/appData";

export default function App({ data, Component, pageProps }) {
  console.log(data, "data"); // data is undefined here
  return (
    <>
      <Layout data={data}>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export async function getStaticProps() {
  console.log("working on it dude"); // this message is not logged in console (terminal)
  let data = await getAppData(CLIENTID);
  console.log(data); // data is undefined here as well
  return {
    props: {
      data: data,
    },
    revalidate: 60,
  };
}

    And the Layout.js

    import React, { useState } from "react";
import Head from "next/head";
import Footer from "./Footer";
import Navbar from "./Navbar";

// Contexts
export const toggleMenu = React.createContext();

export default function Layout({ data, children }) {
  // States
  const [showNav, setShowNav] = useState(true);
  const [showFooter, setShowFooter] = useState(true);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
        <toggleMenu.Provider
          value={{ showNav, showFooter, setShowFooter, setShowNav }}
        >
          {showNav ? <Navbar data={data.navbar} /> : null}
          {children}
          {showFooter ? <Footer data={data.footer} /> : null}
        </toggleMenu.Provider>
    </>
  );
}

    data is undefined even if I pass a simple string as props in getStaticProps.

    
export async function getStaticProps() {
  return {
    props: {
      data: "something",
    },
    revalidate: 60,
  };
}

    Knowing the fact that we can't use getStaticProps in a file other than a page, I have to use it in _app.js only and pass it down to <Layout data={data}/> ponent (if no other solution exists).

    I can use getStaticProps in index.js page as well but Navbar and Footer are used in it's parent ponent i.e, . Any help is appreciated.

    • javascript
    • reactjs
    • next.js
    Share Improve this question edited Apr 30, 2022 at 15:51 Amit asked Apr 30, 2022 at 15:02 AmitAmit 1,1432 gold badges11 silver badges25 bronze badges 5
    • 1 Custom _app does not support getStaticProps - see nextjs/docs/advanced-features/custom-app#caveats. You'll have to use getInitialProps, or fetch the data with getStaticProps on each page instead. – juliomalves Commented Apr 30, 2022 at 15:06
    • I tried getInitialProps but it doesn't work as well. Infact none of these functions are being even called as I'm not getting any console messages from getInitialProps or getStaticProps in the terminal. – Amit Commented Apr 30, 2022 at 15:25
    • And I can't fetch data using these functions in Navbar or Footer ponents as they are not pages. – Amit Commented Apr 30, 2022 at 15:27
    • 1 Add the code you have for getInitialProps – Inder Commented Apr 30, 2022 at 16:13
    • It's exactly same as getStaticProps. – Amit Commented Apr 30, 2022 at 16:16
    Add a ment  | 

    1 Answer 1

    Reset to default 9

    As its already mentioned above _app.js doesn't support getStaticProps or getServerSideProps , you can only use getInitialProps inside _app.js

    
export default function App({ Component, pageProps }) {
  console.log(pageProps.data, "data"); 
  return (
    <>
      <Layout data={pageProps.data}>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

App.getInitialProps = async () => {
  let pageProps = {};

  try {
    let data = await getAppData(CLIENTID);
    pageProps["data"] = data;
  } catch (error) {}

  return { pageProps };
};

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论