React/Contentful — 연결된 개체로 항목 만들기

Contentful은 제가 가장 좋아하는 헤드리스 CMS가 되었습니다. 정적 웹 페이지this blog를 생성하고 사용자 프로필과 같은 다른 형식의 데이터를 저장하는 데 사용합니다.

다른 많은 CMS와 마찬가지로 Contentful은 객체 기반 데이터 저장 시스템입니다. Contentful은 개체 콘텐츠 모델을 호출합니다. 콘텐츠 모델은 짧은 텍스트, 긴 텍스트(서식 있는 텍스트 또는 마크다운), 숫자, 부울 등과 같은 여러 유형의 필드를 가질 수 있습니다. 특정 콘텐츠 모델의 각 레코드를 항목이라고 하며 콘텐츠 모델 필드는 다음 유형일 수 있습니다. 다른 콘텐츠 모델 항목을 참조하는

간단한 예는 Blog Post라는 콘텐츠 모델과 Author라는 콘텐츠 모델이 있는 경우입니다. 블로그 게시물의 작성자 필드는 콘텐츠 유형 작성자의 항목을 참조합니다. 참조 필드는 단일 항목 또는 여러 항목을 참조할 수 있습니다.

나는 주로 React/Next.JS 앱과 함께 Contenful을 사용하기 때문에 이 튜토리얼에서는 Contentful의 Content Management API (CMA) Javscript SDK를 사용하여 연결된 개체가 있는 항목을 프로그래밍 방식으로 만드는 데 중점을 둘 것입니다. 또한 React 프로젝트에서 이미 Contentful의 Delivery API를 사용하고 있다고 가정합니다.

자바스크립트 SDK 설치

항목을 추가, 삭제 또는 수정하려면 Contentful Management Javascript SDK 을(를) 설치해야 합니다. 이렇게 하려면 프로젝트 루트 디렉터리에서 다음 명령을 실행하기만 하면 됩니다.

npm i contentful-management

아직 없는 경우 Contentful 설정의 API 키에서 콘텐츠 관리 토큰을 생성해야 합니다.



다음으로 env.local 파일에 다음 환경 변수를 추가합니다.

CONTENTFUL_MANAGEMENT_TOKEN=CFPAT-W-vQPcKWMV5GhXV1CAVWDEazy-1yRpnN4H3cqWFGfXU
CONTENTFUL_SPACE_ID=<YOUR CONTENTFUL SPACE ID>

라이브러리 기능 만들기

환경이 설정되었으므로 이제 콘텐츠를 관리하기 위한 라이브러리 기능을 만들 수 있습니다.

/** Function for creating JSON link objects **/

export function createLinkObject(id) {
    const link = `{
        "en-US": {
            "sys": {
                "type": "Link",
                "linkType": "Entry",
                "id": "${id}"
            }
        }
      }`;
    return JSON.parse(link);
}

위의 함수는 CMA가 개체 연결을 위해 예상하는 JSON 엔터티를 생성합니다. 연결하려는 항목 ID만 입력하면 JSON 개체가 반환됩니다.

이것이 어떻게 작동하는지 보기 위해 이제 항목을 추가하는 함수를 만들어 보겠습니다.

import { createLinkObject } from '/path/to/lib/file'

const contentful = require('contentful-management')

function slugify(str) {
    /** Convert string to URL-safe slug */
    return str
        .toString()                   // Cast to string (optional)
        .normalize('NFKD')            // The normalize() using NFKD method returns the Unicode Normalization Form of a given string.
        .toLowerCase()                // Convert the string to lowercase letters
        .trim()                       // Remove whitespace from both sides of a string (optional)
        .replace(/\s+/g, '-')         // Replace spaces with -
        .replace(/[^\w\-]+/g, '')     // Remove all non-word chars
        .replace(/\-\-+/g, '-');      // Replace multiple - with single -
}

export async function createPost({
    title,       // Post title (string)
    user,        // User who posted (entry object)
    category,    // Category (entry object)
    content      // Post content (markdown)
}) {
    // Create the CMA client
    const client = contentful.createClient({
        accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN
    })

    // Get your Contentful space
    const space = await client.getSpace(process.env.CONTENTFUL_SPACE_ID)

    // Get your Contentful environment
    const env = await space.getEnvironment('master')

    // Our entry to be created
    const entryFields = {
        title: {
            'en-US': title
        },
        slug: {
            'en-US': slugify(title)
        },
        user: createLinkObject(user.sys.id),
        category: createLinkObject(category.sys.id),
        content: {
            'en-US': content
        }
    }

    const contentType = 'blogPost' // Contentful model type

    // Execute entry creation
    const entry = await env.createEntry(contentType, {
        fields: entryFields
    })

    // If we get a new entry ID, then success, otherwise default to null
    const newEntryId = entry.sys.id ?? null;

    if (newEntryId) {
        // Publish our entry, if success
        const pub = await entry.publish();
        return ({
            'status': 'success',
            'entryId': newEntryId
        })
    } else {
        console.log(entry)

        return ({
            'status': 'error',
            'message': 'Failed to create post'
        })
    }
}

첫 번째 함수slugify는 제목을 슬러그로 사용할 URL 안전 문자열로 변환합니다. 기존 슬러그를 확인하기 위해 몇 가지 논리를 추가하고 싶을 수 있지만 정확히 동일한 제목을 가진 두 개의 게시물을 게시할 가능성은 낮습니다.
createPost() 함수에서 먼저 CMA 클라이언트를 인스턴스화한 다음 Contentful 공간을 가져온 다음 환경(아마도 마스터)을 가져옵니다. 다음으로 항목 개체를 만들고 createLinkObject() 함수를 사용하여 사용자와 범주를 추가합니다. 마지막으로 Content Type 및 Entry 개체로 createEntry()를 실행합니다. 새 항목 ID를 감지하면 모든 것이 계획대로 진행됩니다!

이 튜토리얼이 도움이 되었기를 바랍니다. Contentful은 정적으로 생성된 페이지를 위한 훌륭한 범용 백엔드이며 이를 위한 새롭고 흥미로운 용도를 계속 찾고 있습니다.

자세한 내용은 Our Blog을 참조하십시오.