Next.js、Vercel、CMSを使用して5分でブログを作成する

プロジェクト構成

以下の例では、私たちはWordPressまたはWebflowを使用してすべてのページでSSGコンテンツを生成するために、無料のNext.jsアプリケーションを使用することにします。ミドルウェアはオプションですが、DNSを使用してブログを分離することは重要です。

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

ブログコンポーネント

'getStaticProps'に渡されるpropsとしてリターンされるメタタグを表示するために、ブログコンポーネントを作成します。 'BlogPage'コンポーネントでは、html-react-parserを使用してブログページの本文を表示します。 以下は簡単な例です。

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'メソッドは、ノードHTMLパーサを使用して、小さなメタタグを生成するエージェント配列を結合し、タグ、スタイルシート、スクリプトを削除できます。 注意：コンテンツをHTML形式で描画する必要がある場合は、node-html-parserを使用できません。 かわりに、papaparseを使用してください。 例を完全に見るには、Githubで確認してください。

ミドルウェアの構成

Next.js中間ウェアを使用することで、プロジェクトとタイトル、ページペアリングのための定義済みの経路を設定するのに役立ちます。 ブログページの一般的なルートには、DNSを使用することが非常に便利です。

SSGの残りの資産をエクスポートする 'config'

要約

上記の情報から、あなたは Vercel とWordPressを使用して、次のブログページを完全に無料で作成できることがわかります。 完全なコード例を確認するには、Githubを参照してください。 現在の内部リンクを管理するには、私たちは{{blogURL}}を使用しています。

関連記事