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

我正在尝试静态导出next.js应用程序。表示页面对象只有两个值：

page

和

query

。有没有办法向页面传递其他道具

我曾尝试使用

query

进行此操作，但next的路由器似乎不知道路由的

query

对象。因此它不起作用

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

---

我猜

react static

有一个

routeInfo.json

，它是为每个路由预取的。我想知道next.js中是否有类似的内容。

UPD Apr 4 20 至少在中有

getStaticProps

和

getstaticpath

在next.config.js中：

const fetch = require("isomorphic-unfetch");
const fs = require("fs");
const path = require("path");
const fse = require("fs-extra");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: false
});

module.exports = withBundleAnalyzer({
  webpack(config) {
    config.node = { fs: "empty", path: "empty" };
    return config;
  },
  async exportPathMap() {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts?_page=1"
    );
    const postList = await response.json();
    fs.writeFileSync(
      path.resolve(`data/route.json`),
      JSON.stringify({ postList }, null, 2)
    );
    for (let i = 0; i < postList.length; ++i) {
      const id = postList[i].id;
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      const post = await response.json();
      const fn = path.resolve(`data/post/${id}/route.json`);

      await fse.outputFile(fn, JSON.stringify(post, null, 2));
    }

    const pages = postList.reduce(
      (pages, post) =>
        Object.assign({}, pages, {
          [`/post/${post.id}`]: {
            page: "/post"
          }
        }),
      {}
    );

    return Object.assign({}, pages, {
      "/": { page: "/" }
    });
  }
});

const fetch=require（“同构取消蚀刻”）；
常数fs=要求（“fs”）；
常量路径=要求（“路径”）；
常数fse=要求（“fs额外”）；
const with bundleanalyzer=require（“@next/bundle analyzer”）({
已启用：false
});
module.exports=withBundleAnalyzer({
网页包（配置）{
config.node={fs:“empty”，路径：“empty”}；
返回配置；
},
异步导出路径映射（）{
const response=等待获取(
"https://jsonplaceholder.typicode.com/posts?_page=1"
);
const postList=wait response.json（）；
fs.writeFileSync(
resolve（`data/route.json`），
stringify（{postList}，null，2）
);
for（设i=0；i
分配（{}，页{
[`/post/${post.id}`]：{
第页：“/post”
}
}),
{}
);
返回Object.assign（{}，页{
“/”：{page:“/”}
});
}
});

此线程的功能请求非常棒，谢谢分享。我想要一个在编译期间只请求一次全局数据，而在客户端路由期间从不请求全局数据的解决方案。我使用您从

exportPathMap

回调写入的文件在导出期间缓存一次请求，并使用

\uuuu NEXT\u data\uuuu

全局窗口访问数据客户端。请参见此处的对话：

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>
    );
  }
}

const fetch = require("isomorphic-unfetch");
const fs = require("fs");
const path = require("path");
const fse = require("fs-extra");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: false
});

module.exports = withBundleAnalyzer({
  webpack(config) {
    config.node = { fs: "empty", path: "empty" };
    return config;
  },
  async exportPathMap() {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts?_page=1"
    );
    const postList = await response.json();
    fs.writeFileSync(
      path.resolve(`data/route.json`),
      JSON.stringify({ postList }, null, 2)
    );
    for (let i = 0; i < postList.length; ++i) {
      const id = postList[i].id;
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${id}`
      );
      const post = await response.json();
      const fn = path.resolve(`data/post/${id}/route.json`);

      await fse.outputFile(fn, JSON.stringify(post, null, 2));
    }

    const pages = postList.reduce(
      (pages, post) =>
        Object.assign({}, pages, {
          [`/post/${post.id}`]: {
            page: "/post"
          }
        }),
      {}
    );

    return Object.assign({}, pages, {
      "/": { page: "/" }
    });
  }
});