Next.js를 이용한 에픽한 홈 페이지 구성: 히어로 컴포넌트 만들기

Next.js와 Strapi로 홈 페이지 만들기: 히어로 컴포넌트 구축하기

이 블로그 시리즈의 두 번째 파트에서는 Next.js와 Strapi를 이용해 홈페이지의 히어로 컴포넌트를 어떻게 구현하는지에 대해 다루겠습니다. 이전 파트를 놓치셨다면 여기서 확인하세요.

1. Strapi에서 데이터 구조 설계하기

먼저 Strapi에서 데이터 구조를 설계함으로써 콘텐츠를 쉽게 관리할 수 있게 만듭니다. Strapi의 콘텐츠 타입 빌더를 통해 단일 타입, 컬렉션 타입, 컴포넌트 등을 생성하여 재사용 가능한 콘텐츠 타입을 만들 수 있습니다. 우리의 목표는 홈 페이지의 히어로 섹션 구성 요소를 만드는 것입니다.

2. 히어로 섹션 컴포넌트 구성하기

홈 페이지의 히어로 섹션은 이미지, 헤딩, 서브 헤딩, 링크로 나뉩니다. Strapi의 콘텐츠 타입 빌더에서 새로운 컴포넌트를 만들고, 필요한 필드를 추가하세요.

• 미디어: 단일 미디어 타입의 이미지
• 텍스트: 짧은 텍스트로 헤딩
• 텍스트: 긴 텍스트로 서브 헤딩

그리고 링크 컴포넌트를 만들어 재사용 가능하게 설정합니다.

• 링크 컴포넌트: URL, 텍스트, 외부 링크 여부를 필드로 가집니다.

완료되면 이 컴포넌트를 동적 존(Dynamic Zone)을 통해 우리의 홈 페이지에 추가합니다.

3. 히어로 섹션 데이터 가져오기

Strapi API를 통해 히어로 섹션 데이터를 가져옵니다. Postman을 사용해 올바른 데이터를 얻기 위해 API 호출을 테스트하세요. 필요한 권한이 설정되어 있어야 하며, Strapi 쿼리 빌더를 사용해 데이터를 가져오기 위한 쿼리를 작성합니다.

{
  "populate": {
    "blocks": {
      "on": {
        "layout.hero-section": {
          "populate": {
            "image": {
              "fields": ["url", "alternativeText"]
            },
            "link": {
              "populate": true
            }
          }
        }
      }
    }
  }
}

4. Next.js 애플리케이션에서 데이터 활용하기

이제 Next.js 애플리케이션 내에서 Strapi로부터 가져온 데이터를 활용하여 히어로 컴포넌트를 만듭니다. Frontend에서 데이터를 렌더링하고, UI를 구성합니다.

async function getStrapiData(url) {
  const baseUrl = "http://localhost:1337";
  try {
    const response = await fetch(baseUrl + url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  const { title, description, blocks } = strapiData.data;

  return (
    <main className="container mx-auto py-6">
      <h1 className="text-5xl font-bold">{title}</h1>
      <p className="text-xl mt-4">{description}</p>
      {/* 추가 로직 및 컴포넌트 구성 */}
    </main>
  );
}

5. 상호 참조 자료 및 도움될 URL

다음 링크들은 이 글을 이해하는 데 도움을 줄 수 있습니다.

• Next.js 공식 문서
• Strapi 공식 문서
• React 공식 문서

참조:

이 블로그 포스트는 Epic Next.js Tutorial Series의 일부로, Next.js와 Strapi를 활용한 웹 애플리케이션 구축 과정을 다룹니다.