标签: getstaticprops

我正在尝试使用 NextJS 生成我网站的站点地图。但它确实有很多链接。我想避免处理每个访问 sitemap.xml 的所有链接。

我有这样的事情：

import { GetServerSideProps } from "next";
import React from "react";

const Sitemap = () => {
  return null;
};

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const BASE_URL = "http://localhost:3000";

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{generateSitemap()}
</sitemapindex>`;

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
};

export default Sitemap;

我想要这样的东西：

export const getStaticProps: GetStaticProps<PageProps> = async () => {
  try {
    const sitemap = await generateSiteMap(); …

我在获取 getStaticProps 函数将返回的 props 传递到 NextJS 中的模板页面时遇到一些问题。

这是我目前的动态页面模板的代码。

// src/pages/blog/[slug].js
import React from 'react';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';

import Layout from '../../components/layout';

export default function BlogPost ({frontmatter, markdownBody}){
    console.log(`in template Layout: ${frontmatter.title}`)
    // Output: TypeError: Cannot read property 'title' of undefined
    return (
        <Layout>
            <h1>{frontmatter.title}</h1>
            <span>{JSON.stringify(markdownBody)}</span>
        </Layout>
    )
}

export async function getStaticProps({...ctx}){

    const {slug} = ctx.params;
    console.log(slug)
    // output: first post (this is correct)
    const content = await import(`../../posts/${slug}.md`)
    const data = matter(content.default)
    console.log(`In getStaticProps: …

目前我正忙于构建我的第一个 Next.JS 应用程序（Next 和 Strapi）。现在一切正常，但我很好奇在使用 getStaticProps 时实现错误处理的最佳方法是什么。

我自己尝试了一些东西（传递多个道具等，但都不起作用（典型的未序列化 JSON 错误）。我想要实现的是页面本身上的错误消息（例如 /about），没有找到数据. 附有错误消息 (statusCode)。

我希望它可能，我做了很多研究，发现：https : //github.com/vercel/next.js/pull/17755这个。但它不正是我正在寻找的。

谢谢你。贾斯蒂安·斯派克博斯

Next.js 初学者，希望获得有关使用getStaticPaths和getStaticProps包罗万象的路线的指导。大多数 Next.js 9.3+ 博客入门者似乎仅基于一个级别的博客文章（例如，/posts/post-1.md，/posts/post-2.md等），但我徒劳地尝试找到的是入门者 \xe2\x80\x94 或只是一个一组指令 \xe2\x80\x94 ，用于解决处理问题，例如/posts/yyyy/mm/postname.md通过/pages/posts/[...post].js.

当然，我确实阅读了有关这些项目的 Next.js 文档，但我发现它们至少在这种特殊情况下缺乏帮助。我确实意识到它们是为更有经验的 Next.js 开发人员编写的。这一项来自https://nextjs.org/docs/routing/dynamic-routes，让我尽可能接近目前的情况，但还不够远：

\n

如果页面名称使用 catch-all 路由，例如pages/[...slug]，params则应包含slugwhich 是一个数组。例如，如果该数组为[\'foo\', \'bar\']，则 Next.js 将静态生成位于 的页面/foo/bar。

\n

我尝试使用fs-readdir-recursive读取/posts/目录的各个级别并且可以工作，但是它给我的并没有产生getStaticPaths想要的数组。我确定我只需要调整结果，但找不到任何示例来帮助我弄清楚。（大多数比一级场景更进一步的例子似乎都是处理从数据库中获取数据，也许是因为我试图找到的场景被认为太简单了。对于非初学者来说，可能是这样，但是......）

我面临的问题是，在使用getStaticPaths和getStaticProps

export async function getStaticPaths() {
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/posts`);
  const posts = await res.json();
  console.log("posts: ", posts);

  const paths = posts.map(({ slug }) => ({
    params: { slug },
  }));

  console.log("Paths: ", paths);

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  console.log("params: ", params);
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`${url}/api/post`, …