使用Next.js，Vercel和CMS在5分钟内创建博客

API

通过利用CMS的强大功能，您可以使用最少的代码快速构建页面。利用Next.js和Vercel，我们可以轻松生成SSG ready网站或页面。 Vercel使设置博客部分变得简单。要开始使用博客页面，您需要在名为博客的文件夹中创建两条路径。下面是一张显示Vercel上多个域并使用中间件(可选)来路由到适当路径的图片。

项目设置和配置

以下示例将使用Next.js应用程序来利用WordPress或Webflow，在所有页面上免费创建SSG内容。中间件是可选的，但强烈建议通过DNS分离博客。

# folders
middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

博客组件

为了呈现作为'props'返回的meta标签，需要创建一个blog组件，在getStaticProps中使用。在BlogPage组件中，我们使用html-react-parser来呈现blog页面的内容。看下面的例子：

import { getBlogPage } from '@app/lib/get-blog'
import { BlogPage } from '@app/components/blog/blog-page'
import type { GetStaticProps } from 'next'

export default function Blog(props:) {
    return <BlogPage {...props} />
}

export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params ?? {}
    const websiteUrl = Array.isArray(slug) ? slug : []

    let props = {}

    try {
        props = await getBlogPage(websiteUrl.join('/'))
    } catch (e) {
        console.error(e)
    }

    return {
        props,
        revalidate: 3600 * 4, // every 4 hours
    }
}

使用node-html-parser进行分析

getBlogPage方法使用node-html-parser从一个JavaScript对象数组中提取所有链接、样式、脚本和元标记。该想法是删除您不需要的博客内容，并用新的HTML解析它。如果您的内容需要通过JavaScript渲染，则可以选择使用puppeteer获取HTML内容。您可以在GitHub上查看完整的示例。

中间件配置

使用Next.js中间件，我们可以使用转发来使用单个项目并为博客页面形成自定义标题和页脚。

导出配置在控制接下来的资源流程，以在SSG上正确渲染。最好添加准确的路径，以便Next.js可以在编译期间构建路由。如果在存储库之间共享资源，则可以将public文件夹排除在路由之外。

概览

使用上述信息，您可以使用<Vercel>和<WordPress>完全免费创建下一个博客页面。要查看完整的代码示例，请查看Web项目，以查看示例。当前的实现用于支持我们在{{blogURL}}上的博客。注意：如果WordPress Elementor在每次保存文章后自动格式化内容，我将直接发布更多代码。