Nextjs - 将 props 从自定义 _app.js 传递到<navbar>零件？</navbar>

Question

How can I pass props from here to a Navbar component that I would add under the Head component?如何将 props 从这里传递到我将在 Head 组件下添加的 Navbar 组件？ I already did it in the index.js page using getServerSideProps, but it doesn't seem to work in the _app.js file.我已经在 index.js 页面中使用 getServerSideProps 完成了它，但它似乎在 _app.js 文件中不起作用。

import "../_app.css";

import React from "react";
import PropTypes from "prop-types";
import Head from "next/head";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "../theme";

export default function MyApp({ Component, pageProps }) {
    React.useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles = document.querySelector("#jss-server-side");
        if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
        }
    }, []);

    return (
        <React.Fragment>
            <Head>
                <title>Furnibnz | Baldai Internetu ir Nemokamas Pristatymas</title>
                <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width"
                />
            </Head>
            <ThemeProvider theme={theme}>
                {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                <CssBaseline />
                <Component {...pageProps} />
            </ThemeProvider>
        </React.Fragment>
    );
}

MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired,
};

Is there a better way to use a Navbar Component in every page or is this this the right way?有没有更好的方法在每个页面中使用导航栏组件，或者这是正确的方法？

Answer 1

Good times when this was my biggest problem lol这是我最大问题的美好时光，哈哈

For whoever really needs an answer to this:对于真正需要答案的人：

You can't currently use getStaticProps and getServerSideProps in the _app component, so if I'm not wrong I was trying to fetch initial data (probably categories list) and pass it to a component.您目前不能在 _app 组件中使用 getStaticProps 和 getServerSideProps ，所以如果我没记错的话，我试图获取初始数据（可能是类别列表）并将其传递给组件。 To fetch initial data at _app level, you should use getInitialProps (NextJs developers suggest to avoid using this), but be aware that using it, will stop NextJs from automatically statically optimize the pages that do not rely on any kind of fetching method (they will be server-side rendered - even a simple "about us" page that could be served as static html otherwise)要在 _app 级别获取初始数据，您应该使用 getInitialProps（NextJs 开发人员建议避免使用它），但请注意，使用它会阻止 NextJs 自动静态优化不依赖任何类型获取方法的页面（它们将在服务器端呈现 - 即使是一个简单的“关于我们”页面，也可以用作 static html 否则）

You can read more about it here: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps您可以在此处阅读更多信息： https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Nextjs - 将 props 从自定义 _app.js 传递到<navbar>零件？</navbar>

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-04 14:49:48

Nextjs - 将 props 从自定义 _app.js 传递到<navbar>零件？</navbar>

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-04 14:49:48

解决方案1
0 已采纳 2021-06-04 14:49:48