Создание блога за 5 минут с помощью Next.js, Vercel и CMS

Настройка и структура проекта

В следующем примере мы будем использовать приложение Next.js, чтобы использовать WordPress или Webflow для создания контента SSG на всех страницах бесплатно. Промежуточное программное обеспечение необязательно, но рекомендуется для разделения блога через DNS.

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

Компонент блога

Создайте компонент блога для рендеринга метатегов, возвращаемых как 'props' в getStaticProps. Внутри компонента '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' использует node-html-parser для извлечения всех ссылок, стилей, скриптов и метатегов в массив объектов JavaScript с помощью следующих ключей. Идея состоит в том, чтобы удалить ненужный контент блога и разобрать его с новым HTML. Вы можете выбрать использование puppeteer для получения HTML-контента, если ваш контент требует JavaScript для рендеринга. Вы можете посмотреть на полный пример на GitHub.

Настройка промежуточного программного обеспечения

С помощью промежуточного программного обеспечения Next.js мы можем использовать перенаправления, чтобы использовать один проект и формировать настраиваемые заголовки и подвалы для страницы блога.

Экспорт config критичен для контроля потока оставшихся ресурсов для правильного отображения SSG. Лучше всего добавить точные пути, чтобы Next.js мог построить маршруты во время компиляции. Если вы используете общие ресурсы между хранилищами, вы можете исключить папку public из маршрутов.

Обзор

Используя вышеуказанную информацию, вы можете создать следующую страницу блога полностью бесплатно, используя Vercel и WordPress. Для полного примера кода загляните на веб-проект, чтобы увидеть пример. Текущая реализация используется для поддержки нашего блога на {{blogURL}}. Примечание: я опубликую больше кода непосредственно, если WordPress Elementor не автоматически форматирует контент после каждого сохраненного поста.

Связанные сообщения