Question

我正在尝试静态导出next.js应用程序。 docs表示页面对象只有两个值：page和query。有没有办法将其他道具传递到页面？

为此，我尝试使用query，但似乎下一台路由器并不知道该路由的query对象。因此，它不起作用。

换句话说，我在构建时有一个博客帖子列表，如何将它们内联到页面（页面组件）中？

我猜react-static有一个routeInfo.json，它是为每条路线预先提取的。我想知道next.js中是否有类似的东西。

Answer 1

这就是我最终得到的结果。

_app.js：

- (UINavigationItem*)navigationItem
{
  // get super navigation item
  UINavigationItem *navItem = [super navigationItem];

  // do stuff 

  return navItem;
}

在next.config.js中：

import React from "react";
import App, { Container } from "next/app";

import fs from "fs";
import { resolve, join } from "path";

export default class extends App {
  static async getInitialProps({ Component, ctx }) {
    const { req, asPath } = ctx;
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    let p;
    if (req) {
      p = JSON.parse(
        fs.readFileSync(resolve(join("data", asPath, "route.json"))).toString()
      );
    } else {
      p = await (await fetch(`/data${asPath}/route.json`)).json();
    }

    return { pageProps: { ...pageProps, ...p } };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    );
  }
}

Next.js：在静态导出期间将其他道具传递给页面吗？

1 个答案: