获取 NextJS 中的所有帖子组件道具答案

【问题标题】：Get all posts components props in NextJS获取 NextJS 中的所有帖子组件道具
【发布时间】：2022-11-03 23:25:09
【问题描述】：

我正在将我的 investing blog 从 Jekyll 移动到 NextJS，并且缺少将所有帖子返回到一个列表中的功能。

从官方的例子和其他来源，我看到帖子是用markdown写的，开发者需要读取一个目录，里面有帖子，解析文件，提取前端内容等。

但是我大量使用 schema.org 属性，并且所有帖子都是用纯 HTML 编写的，我只用 NextJS 实现替换了 img 元素。

因此，我没有使用 frontmatter，而是将帖子的文件扩展名重命名为 .js，并将其内容重写为：

import Breadcrumbs from '/components/breadcrumbs';
import PostHeader from '/components/postheader';

export async function getStaticProps() {    
    return {
        props: { 
            title: "How to start investing",
            description: "How to start investing in 2022",
            published: "2021-08-01",
            modified: "2022-04-09",
            tags: ["investing", "how-to"]
        }
    }
}

export default function Post() {
    return <>       
        <Breadcrumbs />
        <article itemscope itemtype="https://schema.org/TechArticle">
            <PostHeader />
            <div>
                blah.. blah.. blah..
            </div>
        </article>
    </>
}

那么有没有办法通过给定的文件夹路径或类似的东西来获取组件道具而不解析文件？

【问题讨论】：

我不确定我是否完全理解这个问题。您是否在询问如何设置dynamic routes？
不，我需要某种动态导入。我可以浏览文件列表，但找不到动态导入每个 js 文件以获取帖子道具以构建带有帖子摘录和阅读更多按钮的索引页面的方法。
很不清楚的问题。每个帖子都有1个文件吗？还是包含您导出的所有帖子的 1 个文件？我们可能需要查看 repo 或关于您的计划的非常详细的解释。您真的应该使用 CMS 来获取内容和元数据，大多数都是免费的并且非常容易实现。只需重写您的应用程序即可正确添加元/模式数据。
我最终将前端内容与 HTML 文件分离并将它们转换为 js 文件，因为这样我可以使用内置的 <Image> 组件进行图像优化。此外，我必须将帖子元数据从页面前端事项移动到带有对象列表的单独 js 文件，其中关键是 post slug。不是最好的解决方案，但我没有找到更好的选择。

标签： reactjs next.js

【解决方案1】：

import PropTypes from 'prop-types';    

export default function Post(props) {
        return <>       
            <Breadcrumbs />
            <article itemscope itemtype="https://schema.org/TechArticle">
                <PostHeader />
                <div>
                    <p>{props.title}</p>
                    <p>{props.description}</p>
                    <p>{props.published}</p>
                    <p>{props.modified}</p>
                    <p>{props.tags}</p>
                </div>
            </article>
        </>
    }

ComponentName.prototype ={
  title: String,
  description:string,
  published: VarDate,
  modified: VarDate,
  tags:String
}

【讨论】：

我认为它可以解决您的问题
你没有得到我的要求，问题不在于道具类型。我稍后会发布我的解决方案。

【解决方案2】：

我最终将所有帖子存储在一个简单的 javascript 列表中

export default ([
    {
        title: "How to start investing",
        description: "How to start investing in 2022",
        published: "2021-08-01",
        modified: "2022-10-23",
        tags: ["investing", "how-to"],
        slug: "how-to-start-investing",
        img: "startinvesting",
        excerpt: `
            Post excertp text...
        `
    },
    {...}
])

然后在 GetStaticProps 中导入它，通过 post slug 过滤

import Image from 'next/image'
import posts from '../../../data/posts'
import Breadcrumbs from '../../../components/breadcrumbs'
import PostHeader from '../../../components/post-header'

export async function getStaticProps() {
    return {
        props: {
            ...posts.find(post => post.slug == 'how-to-start-investing')
        }
    }
}

export default function Post(props) {   
    return <>
        <h1>{props.title}</h1>
        Post text...
    </>
}

【讨论】：