Question

我想静态生成导航栏，这样就不需要从客户端获取导航栏了。

我正在使用appollo graphql，当前的_app.js如下所示：

import React from 'react';
import Head from 'next/head';
import { ApolloProvider } from '@apollo/react-hooks';
import withData from '../utils/apollo';
import Header from '../components/Header';
import '../assets/css/tailwind.css';

const App = (props) => {
    const { Component, pageProps, apollo } = props;
    return (
        <ApolloProvider client={apollo}>
            <Head>
                <title>...</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                <meta charset="utf-8"></meta>
            </Head>
            <Header />
            <Component {...pageProps} />
        </ApolloProvider>
    );
};

export default withData(App);

我的Header组件看起来像这样

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import Query from '../components/query';
import CATEGORIES_QUERY from '../apollo/queries/category/categories';

const Header = () => {
    const [isExpanded, setIsExpanded] = useState(false);
    const expandedClasses = isExpanded ? 'flex ' : 'hidden ';

    return (
        <Query query={CATEGORIES_QUERY} id={null}>
            {({ data: { categories } }) => {
                return (
                    <React.Fragment>
                        <nav
                            className={`${expandedClasses}`}
                        >
                            {categories.map((category, i) => {
                                return (
                                    <Link
                                        href="/category/[cid]"
                                        as={`/category/${category.id}`}
                                        passHref
                                        key={`nav-link-${i}`}
                                    >
                                        <a className="text-gray-800">
                                            {category.name}
                                        </a>
                                    </Link>
                                );
                            })}
                        </nav>

                        <button
                            className="flex"
                            onClick={() => {
                                setIsExpanded(!isExpanded);
                            }}
                        >
                            <span className="mb-1 bg-orange-500"></span>
                            <span className="mb-1 bg-orange-500"></span>
                            <span className="mb-1 bg-orange-500"></span>
                        </button>
                    </React.Fragment>
                );
            }}
        </Query>
    );
};

export default Header;

Next.js只允许在页面组件上使用getStaticProps，我正在尝试在页眉组件上获得类似的功能。我尝试在标头组件以及不起作用的_app.js上添加getStaticProps。我该如何实现？

Answer 1

这是最近发布的。使用next时也无需导入React本身。 https://github.com/vercel/next.js/discussions/10949![enter图片描述在这里]（https://i.stack.imgur.com/6hfVo.jpg） enter image description here

如何为nextJS创建静态生成的标头

1 个答案: