NextJs渲染错误

Question

[尝试使用“纱线构建”构建页面时收到以下错误

Automatically optimizing pages ...
Error occurred prerendering page "/design/des". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './des.md'

Error occurred prerendering page "/blog/po". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './po.md'

Error occurred prerendering page "/photo/pho". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './pho.md'

Error occurred prerendering page "/art/a". Read more: https://err.sh/next.js/prerender-error:
Error: Cannot find module './a.md'

我已经尝试运行yarn upgrade来升级所有模块，我也浏览了所有文件，并且在任何页面的任何地方都没有提及pho.md或任何其他列出的项目。您对导致这些错误的原因有任何想法吗？

文件结构

package.json
├── README.md
├── src
│   ├── components
│   │   ├── ArtList.js
│   │   ├── BlogList.js
│   │   ├── ContactForm.js
│   │   ├── DesignList.js
│   │   ├── Header.js
│   │   ├── Layout.js
│   │   ├── Meta.js
│   │   ├── PhotoList.js
│   │   ├── Singular.js
│   │   └── Social.js
│   ├── data
│   │   └── config.json
│   ├── markdown
│   │   ├── arts
│   │   │   ├── art1.md
│   │   │   ├── art2.md
│   │   │   └── art3.md
│   │   ├── design
│   │   │   ├── des1.md
│   │   │   ├── des2.md
│   │   │   └── des3.md
│   │   ├── photos
│   │   │   ├── 43qf.md
│   │   │   ├── 5 (copy).md
│   │   │   ├── 5.md
│   │   │   ├── a (copy).md
│   │   │   ├── a.md
│   │   │   ├── a#.md
│   │   │   ├── b (copy).md
│   │   │   ├── b.md
│   │   │   ├── c (copy).md
│   │   │   ├── dsfg (copy).md
│   │   │   ├── dsfg.md
│   │   │   ├── g.md
│   │   │   ├── photo-1 copy (copy).md
│   │   │   ├── photo-1 (copy).md
│   │   │   ├── photo-1 copy.md
│   │   │   ├── photo-1.md
│   │   │   ├── photo-2 copy (copy).md
│   │   │   └── photo-2 copy.md
│   │   └── posts
│   │       ├── cat-ipsum.md
│   │       └── cupkaes.md
│   ├── pages
│   │   ├── about.js
│   │   ├── art
│   │   │   └── [slug].js
│   │   ├── art.js
│   │   ├── blog
│   │   │   └── [slug].js
│   │   ├── blog.js
│   │   ├── contact.js
│   │   ├── design
│   │   │   └── [slug].js
│   │   ├── design.js
│   │   ├── index.js
│   │   ├── music.js
│   │   ├── photo
│   │   │   └── [slug].js
│   │   └── photography.js
│   └── public
│       └── static
│           ├── art
│           │   ├── art1.jpg
│           │   └── art2.png
│           ├── design
│           │   ├── des1.jpg
│           │   └── des2.jpg
│           ├── fonts
│           │   └── photography
│           ├── main
│           │   ├── aboutimg.png
│           │   ├── click.png
│           │   ├── lucy.png
│           │   └── nextjs-black-logo.svg
│           ├── photo
│           │   ├── test2.jpg
│           │   ├── test3.jpg
│           │   ├── test4.jpg
│           │   ├── test.jpeg
│           │   └── test.jpg
│           └── post-img
│               ├── disenchantment.svg
│               └── dough.svg
└── yarn.lock

完整的getStaticProps

export async function getStaticProps({ ...ctx }) {
  const { slug } = ctx.params
  const content = await import(`../../markdown/posts/${slug}.md`)
  const config = await import(`../../data/config.json`)
  const data = matter(content.default)

  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content,
    },
  }
}

export async function getStaticPaths() {
  //get all .md files in the posts dir
  const blogs = glob.sync('src/markdown/posts/**/*.md')

  //remove path and extension to leave filename only
  const blogSlugs = blogs.map(file =>
    file
      .split('/')[2]
      .replace(/ /g, '-')
      .slice(0, -3)
      .trim()
  )

  // create paths with `slug` param
  const paths = blogSlugs.map(slug => `/blog/${slug}`)
  return {
    paths,
    fallback: true,
  }
}

Answer 1

这里是简化代码。保持原样，似乎工作正常。问题在于如何从列表中解析名称。

我添加了path本机节点模块，以简化文件名的解析，因为您的代码在构建时运行。

在此代码段中，您将从代码中看到blogSlugs的问题，并且可以找到newBlogSlugs作为解决方案。

const path = require("path");

// This represent the output of your glob function. You don't nee to copy the list. That is just for clarity on how the blogs array looks.
const blogs = [
  "src/markdown/posts/cupcakes.md",
  "src/markdown/posts/cat-stuff.md"
];

// This is your blogSlugs contstant
const blogSlugs = blogs.map(file =>
  file
    .split('/')[2]
    .replace(/ /g, '-')
    .slice(0, -3)
    .trim()
)

// This is the new solution that you should use instead of your blogSlugs
const newBlogSlugs = blogs.map(file => path.parse(file).name);

console.log("Original", blogSlugs);
console.log("Fixed", newBlogSlugs);

编辑：提到我使用了路径模块。

EDIT2：更改了变量的命名，使它们看起来更像所讨论的代码。