在5分鐘內使用Next.js、Vercel和CMS創建博客

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 上查看完整的示例。