마카로닉스

2409 No

⭕백엔드 strapi 를 사용한 Next.js 15 Open AI 웹구축

2025-04-22 16:36:02 By 라이트 0 73 댓글수 0 포스트 하기

5월 2025
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

AI 프로젝트 개요 요약

요약-데모.gif

특징

Next.js 15

새로운 /app감독,
라우팅, 레이아웃, 중첩 레이아웃 및 레이아웃 그룹
데이터 페치, 캐싱 및 변형
UI 로딩 중
경로 핸들러
메타데이터 파일
서버 및 클라이언트 구성 요소
보호 경로 미들웨어
Shadcn UI를 사용하여 구축된 UI 구성 요소
Tailwind CSS를 사용하여 스타일 지정됨
Zod 를 사용한 검증
TypeScript 로 작성됨

Strapi

콘텐츠 모델링
API 경로, 미들웨어 및 정책 Strapi
Strapi 를 사용한 인증
Strapi 를 사용한 ORM
Strapi 의 데이터베이스

프로젝트 개요

홈페이지

상단 탐색창, 주요 섹션, 혜택 섹션, 바닥글이 있는 기본 랜딩 페이지를 만들겠습니다.

모든 상단 탐색, 영웅 섹션, 바닥글 콘텐츠는 Strapi 인스턴스 내부에 저장됩니다.

홈페이지.gif

로그인 및 등록 페이지

Strapi를 사용하여 인증을 처리하고 Next 미들웨어 파일을 통해 경로를 보호하여 인증된 사용자가 있는지 확인하고 그에 따라 리디렉션합니다.

로그인-데모.gif

계기반

사용 가능한 크레딧, 메모, 요약을 보여주는 기본 보기 기능을 갖춘 간단한 대시보드를 만들 예정입니다. 또한 상단 탐색창에 요약 양식도 생성할 예정입니다.

요약 생성

여기에 YouTube 동영상 URL을 입력하면 Open AI에 호출을 보내 YouTube 동영상 대본을 기반으로 요약을 생성합니다.

Next.js 15 튜토리얼에서는 LangChain 라이브러리를 사용하여 Open AI에 대한 호출을 수행하겠습니다. 이를 통해 나중에 앱을 확장하는 데 사용할 수 있는 추가 기능이 제공됩니다.

요약-데모.gif

요약 및 메모 페이지

여기에서 요약 목록과 요약 세부 정보 페이지에 접속하여 텍스트를 업데이트하거나 요약을 완전히 삭제할 수 있습니다.

요약-페이지.gif

계정 페이지

마지막으로, 사용자의 성, 이름, 약력을 업데이트할 수 있는 계정 페이지가 있습니다. 사진도 변경할 수 있습니다.

앱에서 대부분의 양식 제출은 Next Server Actions를 사용하는 기능입니다.

계정 페이지.gif

초기 프로젝트 설정

먼저 프런트엔드 설정부터 시작해 보겠습니다. Next.js 15를 사용할 예정입니다.

프런트엔드 설정

먼저, epic-next-course,I라는 이름의 새 폴더를 만들어 보겠습니다. 터미널에서 다음 명령을 실행하여 이 작업을 수행하겠습니다.

# mkdir epic-next-course

cd epic-next-course폴더를 만든 후 다음 명령을 입력하고 실행하여 폴더 내부로 이동해 보겠습니다 .

다음 옵션을 선택하세요:

create-next-app@15.0.3
Ok to proceed? (y) y
✔ What is your project named? … frontend
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
Creating a new Next.js app in /Users/paulbratslavsky/next-15-strapi-5-project/frontend.

프로젝트가 생성되면 프런트엔드 폴더로 이동하여 프런트엔드 프로젝트를 시작 cd frontend하겠습니다 .yarn dev

프로젝트는 http://localhost:3000 에서 시작됩니다 .

다음-js-웹.png

스타일링을 위한 Shadcn UI 설정

Tailwind와 Shadcn UI 컴포넌트를 사용하여 앱을 더욱 멋지게 만들 것입니다. Shadcn UI는 UI 컴포넌트를 코드베이스에 직접 설치하고 필요에 따라 수정/확장할 수

있다는 점에서 매우 유용합니다.

자세한 내용은 여기에서 확인할 수 있습니다

이제 설정 단계를 살펴보겠습니다. 이 가이드( https://ui.shadcn.com/docs/installation/next )도 참조하실 수 있습니다.

CLI 실행 shadcn-ui init 명령을 실행합니다.

$ npx shadcn@latest init

다음 옵션을 선택하세요

➜  frontend git:(main) npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
  Installing dependencies.

It looks like you are using React 19. 
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯   Use --force
    Use --legacy-peer-deps

이런 메시지가 표시되면 --force옵션을 선택할 수 있습니다.

이제 Shadcn UI를 설치하고 사용할 준비가 되었습니다.

utils새로운 폴더와 파일이 표시됩니다 components.json.

컴포넌트 파일.png

다음 명령을 frontend폴더에서 실행하여 첫 번째 구성 요소를 추가해 보겠습니다. 그러면 버튼 구성 요소가 설치됩니다

$ npx shadcn@latest add button

이제 컴포넌트 폴더 안에 버튼이 생겼습니다.

버튼이 있어요.png

page.tsx파일 내부에서 모든 코드를 다음 코드로 바꿔서 사용해 보겠습니다 .

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="container mx-auto py-6">
      <Button>Our Cool Button</Button>
    </main>
  );
}

우리의 새로운 버튼.png

이제 Shadcn UI 컴포넌트가 예상대로 작동하는 것을 확인했습니다. Strapi 인스턴스를 설정하여 첫 번째 튜토리얼을 마무리해 보겠습니다.

백엔드 설정

백엔드에는 Strapi 헤드리스 CMS를 사용할 예정입니다. Strapi를 사용하면 몇 주가 아닌 몇 분 만에 백엔드를 구축할 수 있습니다.

사용자 정의가 매우 쉽고 시작하기도 쉽습니다.

자세한 내용은 문서 에서 확인할 수 있지만 , 우리는 프로젝트 폴더 내에서 다음 명령을 실행하여 시작하겠습니다.

  npx create-strapi-app@latest backend

다음과 같은 메시지가 표시됩니다.

 Strapi   v5.3.0 ???? Let's create your new project


We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up.
  Login/Sign up
❯ Skip

선택 skip하고 Enter를 누르겠습니다.

다음 옵션이 표시됩니다.

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? No

 Strapi   Creating a new application at /Users/paulbratslavsky/Desktop/work/epic-next-update/epic-next-course/backend

 deps   Installing dependencies with npm

Strapi 애플리케이션을 시작하려면 다음 명령을 실행합니다.

  cd backend
  yarn strapi develop

모든 것이 설치되면 Strapi의 등록 페이지가 나타납니다.

등록-사용자.png

첫 번째 관리자 사용자를 생성하세요 . 완료되면 대시보드가 나타납니다.

스트랩-대시보드.png

이제 Strapi 앱이 설정되었습니다.

첫 번째 컬렉션 유형 만들기

우리 앱은 상단 탐색, 메인 섹션, 기능, 푸터 섹션이 있는 홈페이지를 갖습니다.

안녕하세요, 멋진 여러분. 이 글에서는 여러 개의 글 중에서 우리가 무엇을 만들 것인지 소개하고 싶습니다.

이 게시물은 Epic Strapi Next.js 15 튜토리얼 시리즈의 첫 번째 게시물입니다. 다음 게시물의 개요는 여기에서 확인하실 수 있습니다.

Next.js 15와 Strapi 헤드리스 CMS의 인기와 이를 통해 멋진 것을 만들 수 있는 방법에 대한 정보를 바탕으로 Next.js 15의 모든 멋진 측면, 앱 폴더, 서버 구성 요소 및 서버 작업을 포함한 모든 새로운 기능을 다루는 프로젝트를 함께 구축해 보려고 합니다.

이 게시물에서는 우리가 무엇을 만들 것인지, 어떤 주제를 다룰 것인지 간략히 살펴보고, 프로젝트의 기본 구조를 설정하고, 첫 번째 약속을 하겠습니다.

그럼, 우리는 무엇을 만들 것인가?

문제가 있었어요

그런데 문제가 생겼어요. 유튜브에 시간을 많이 쏟다 보니 어느새 영상만 보게 됐죠. 중간에 요약만 봤더라면 별로 관심 없는 영상은 보지 않아도 됐을 텐데 하는 생각이 들었어요.

영상을 보는 대신 요약본을 먼저 받아서 그 내용이 내 전적인 관심을 끌 만한지 확인할 수 있다면 얼마나 좋을까요?

저는 학습 자료로도 영상을 활용합니다. 영상 요약 외에도, 시청한 영상에 대한 노트를 만들어 나중에 참고할 수 있도록 하고 싶었습니다.

그리고 바로 그것이 우리가 만들려는 것입니다. AI의 힘으로 YouTube 동영상을 요약하는 동영상 요약 앱입니다.

더 이상 영상에 시간을 허비하지 마세요. 요약만 읽으면 되니까요.

AI 프로젝트 개요 요약

요약-데모.gif

우리가 사용할 기술

다음.js

Next.js는 매력적인 사용자 인터페이스를 만드는 것으로 알려진 React JavaScript 라이브러리를 기반으로 구축된 프런트엔드 프레임워크입니다.

웹 개발이 간소화되어 가장 중요한 부분, 즉 고객을 위한 프로젝트 구축에 집중할 수 있습니다.

이제 React Server Components와 Server Actions 등 React의 모든 새로운 기능에 액세스할 수 있습니다.

Next.js의 주요 기능 중 하나는 서버 사이드 렌더링입니다. 이를 통해 웹 애플리케이션의 로딩 속도와 검색 엔진 순위가 향상되어 성능과 SEO에 큰 도움이 됩니다.

Next.js에는 정적 생성 기능도 있습니다. 즉, 파일이 필요하기 전에 미리 생성하여 데이터를 가져올 때까지 기다리지 않고 빠르게 로드할 수 있습니다.

Next.js는 증분적 정적 재생성 기능을 제공합니다. 이 기능은 페이지 생성 이후 미리 생성되거나 업데이트되지 않은 정적 콘텐츠를 동적으로 변경하여 업데이트합니다.

앱의 스타일을 지정하기 위해 Tailwind와 ShadcnUI를 사용합니다.

스트라피

애플리케이션 구축을 더욱 쉽게 하기 위해 Strapi Headless CMS 의 기능을 활용하여 데이터와 인증을 관리하겠습니다.

Strapi는 오픈소스 헤드리스 콘텐츠 관리 시스템(CMS)입니다. 콘텐츠의 프런트엔드 표현과 밀접하게 연결된 기존 CMS와 달리, Strapi와 같은 헤드리스 CMS는 콘텐츠에 대한 백엔드 관리를 제공하고 RESTful 또는 GraphQL API를 통해 제공합니다.

즉, Strapi를 사용하여 콘텐츠를 관리한 다음 웹사이트, 모바일 앱 또는 기타 서버 측 애플리케이션 등 선택한 프런트엔드 프레임워크나 플랫폼에 전달할 수 있습니다.

Strapi를 사용하는 주요 이점은 유연성입니다. 개발자는 Strapi를 통해 관리자 패널, API, 데이터베이스 쿼리를 특정 요구 사항에 맞게 사용자 정의할 수 있습니다.

또한 다양한 데이터베이스를 지원하고 React, Vue, Angular와 같은 인기 있는 프런트엔드 프레임워크와 쉽게 통합될 수 있습니다.

우리의 경우 Next.js 15를 사용할 것입니다.

Strapi는 콘텐츠 관리 프로세스를 간소화하여 개발자와 콘텐츠 제작자가 효율적으로 작업할 수 있도록 설계되었습니다.

더 적은 시간에 더 많은 일을 완료하세요.

이 튜토리얼에서는 Next.js와 Strapi의 다음 기능에 대해 다루는 것이 목표입니다.

특징

Next.js 15

새로운 /app감독,
라우팅, 레이아웃, 중첩 레이아웃 및 레이아웃 그룹
데이터 페치, 캐싱 및 변형
UI 로딩 중
경로 핸들러
메타데이터 파일
서버 및 클라이언트 구성 요소
보호 경로 미들웨어
Shadcn UI를 사용하여 구축된 UI 구성 요소
Tailwind CSS를 사용하여 스타일 지정됨
Zod 를 사용한 검증
TypeScript 로 작성됨

스트라피

콘텐츠 모델링
API 경로, 미들웨어 및 정책 Strapi
Strapi 를 사용한 인증
Strapi 를 사용한 ORM
Strapi 의 데이터베이스

프로젝트 개요

홈페이지

상단 탐색창, 주요 섹션, 혜택 섹션, 바닥글이 있는 기본 랜딩 페이지를 만들겠습니다.

모든 상단 탐색, 영웅 섹션, 바닥글 콘텐츠는 Strapi 인스턴스 내부에 저장됩니다.

홈페이지.gif

로그인 및 등록 페이지

Strapi를 사용하여 인증을 처리하고 Next 미들웨어 파일을 통해 경로를 보호하여 인증된 사용자가 있는지 확인하고 그에 따라 리디렉션합니다.

로그인-데모.gif

계기반

요약 생성

여기에 YouTube 동영상 URL을 입력하면 Open AI에 호출을 보내 YouTube 동영상 대본을 기반으로 요약을 생성합니다.

요약-데모.gif

요약 및 메모 페이지

여기에서 요약 목록과 요약 세부 정보 페이지에 접속하여 텍스트를 업데이트하거나 요약을 완전히 삭제할 수 있습니다.

우리의 노트에도 비슷한 섹션이 있을 겁니다.

요약-페이지.gif

계정 페이지

마지막으로, 사용자의 성, 이름, 약력을 업데이트할 수 있는 계정 페이지가 있습니다. 사진도 변경할 수 있습니다.

앱에서 대부분의 양식 제출은 Next Server Actions를 사용하는데, 꽤 멋진 기능입니다.

계정 페이지.gif

여러분 모두 저와 함께 이 여정을 시작하게 되어 기쁘시기를 바랍니다.

프로세스와 그것이 멋진 이유

제 목표는 이 튜토리얼을 대중에 공개하고 매주 새로운 게시물/비디오를 공개하는 것입니다.

모든 진행 상황은 공개 저장소에 저장되므로 계속 확인할 수 있습니다.

목표는 나중에 원하는 대로 추가하거나 확장할 수 있는 애플리케이션을 구축하는 것입니다.

Next.js의 모든 중요한 부분과 미들웨어, 정책, 경로, 컨트롤러, 서비스 등 Strapi와 관련된 일부 기능을 다루겠습니다.

당신도 나처럼 설레셨으면 좋겠습니다.

그럼 시작해볼까요.

초기 프로젝트 설정

먼저 프런트엔드 설정부터 시작해 보겠습니다. Next.js 15를 사용할 예정입니다.

프런트엔드 설정

먼저, epic-next-course,I라는 이름의 새 폴더를 만들어 보겠습니다. 터미널에서 다음 명령을 실행하여 이 작업을 수행하겠습니다.

  mkdir epic-next-course

cd epic-next-course폴더를 만든 후 다음 명령을 입력하고 실행하여 폴더 내부로 이동해 보겠습니다 .

1  npx create-next-app@latest

다음 옵션을 선택하세요:

create-next-app@15.0.3
Ok to proceed? (y) y
✔ What is your project named? … frontend
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
Creating a new Next.js app in /Users/paulbratslavsky/next-15-strapi-5-project/frontend.

프로젝트가 생성되면 프런트엔드 폴더로 이동하여 프런트엔드 프로젝트를 시작 cd frontend하겠습니다 .yarn dev

프로젝트는 http://localhost:3000 에서 시작됩니다 .

다음-js-웹.png

스타일링을 위한 Shadcn UI 설정

Tailwind와 Shadcn UI 컴포넌트를 사용하여 앱을 더욱 멋지게 만들 것입니다. Shadcn UI는 UI 컴포넌트를 코드베이스에 직접 설치하고 필요에 따라 수정/확장할 수 있다는 점에서 매우 유용합니다.

자세한 내용은 여기에서 확인할 수 있습니다 .

이제 설정 단계를 살펴보겠습니다. 이 가이드( https://ui.shadcn.com/docs/installation/next )도 참조하실 수 있습니다.

CLI 실행 shadcn-ui init 명령을 실행합니다.

  npx shadcn@latest init

다음 옵션을 선택하세요

➜  frontend git:(main) npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
  Installing dependencies.

It looks like you are using React 19. 
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯   Use --force
    Use --legacy-peer-deps

이런 메시지가 표시되면 --force옵션을 선택할 수 있습니다.

이제 Shadcn UI를 설치하고 사용할 준비가 되었습니다.

utils새로운 폴더와 파일이 표시됩니다 components.json.

컴포넌트 파일.png

다음 명령을 frontend폴더에서 실행하여 첫 번째 구성 요소를 추가해 보겠습니다. 그러면 버튼 구성 요소가 설치됩니다.

  npx shadcn@latest add button

이제 컴포넌트 폴더 안에 버튼이 생겼습니다.

버튼이 있어요.png

page.tsx파일 내부에서 모든 코드를 다음 코드로 바꿔서 사용해 보겠습니다 .

1import { Button } from "@/components/ui/button";
2
3export default function Home() {
4  return (
5    <main className="container mx-auto py-6">
6      <Button>Our Cool Button</Button>
7    </main>
8  );
9}

저 놀라운 버튼을 보세요.

우리의 새로운 버튼.png

이제 Shadcn UI 컴포넌트가 예상대로 작동하는 것을 확인했습니다. Strapi 인스턴스를 설정하여 첫 번째 튜토리얼을 마무리해 보겠습니다.

백엔드 설정

백엔드에는 Strapi 헤드리스 CMS를 사용할 예정입니다. Strapi를 사용하면 몇 주가 아닌 몇 분 만에 백엔드를 구축할 수 있습니다.

사용자 정의가 매우 쉽고 시작하기도 쉽습니다.

자세한 내용은 문서 에서 확인할 수 있지만 , 우리는 프로젝트 폴더 내에서 다음 명령을 실행하여 시작하겠습니다.

  npx create-strapi-app@latest backend

다음과 같은 메시지가 표시됩니다.

 Strapi   v5.3.0 ???? Let's create your new project


We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up.
  Login/Sign up
❯ Skip

선택 skip하고 Enter를 누르겠습니다.

다음 옵션이 표시됩니다.

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? No

 Strapi   Creating a new application at /Users/paulbratslavsky/Desktop/work/epic-next-update/epic-next-course/backend

 deps   Installing dependencies with npm

Strapi 애플리케이션을 시작하려면 다음 명령을 실행합니다.

  cd backend
  yarn strapi develop

모든 것이 설치되면 Strapi의 등록 페이지가 나타납니다.

등록-사용자.png

첫 번째 관리자 사용자를 생성하세요 . 완료되면 대시보드가 나타납니다.

스트랩-대시보드.png

이제 Strapi 앱이 설정되었습니다.

이후 게시물에서는 Strapi 대시보드에 대해 더 자세히 살펴보겠습니다. 하지만 지금은 첫 번째 컬렉션 유형을 만들어 보겠습니다 .

첫 번째 컬렉션 유형 만들기

우리 앱은 상단 탐색, 메인 섹션, 기능, 푸터 섹션이 있는 홈페이지를 갖습니다.

홈페이지 레이아웃.png

이 데이터를 저장하기 위해 첫 번째 컬렉션 유형을 만들어 보겠습니다.

이 글에서 시작하여 다음 글에서 계속하겠습니다.

Strapi 애플리케이션에 콘텐츠를 추가하고 API에서 해당 데이터를 가져오는 것이 얼마나 쉬운지 보여드리고 싶습니다.

Content-Type Builder아래 로 이동 SINGLE TYPES하여 클릭하여 시작해 보겠습니다 .create-new-single-type.

우리는 그것을 이렇게 부르겠습니다 Home Page.

단일 유형.gif

텍스트 필드에 추가하겠습니다.

텍스트 -> 짧은 텍스트 -> 제목 텍스트 -> 긴 텍스트 -> 설명

완료되면 저장을 클릭하세요.

이제 기본 데이터를 추가해 보겠습니다.

데이터 추가.gif

제목 텍스트와 설명을 추가한 후 '게시'를 클릭하세요.

Insomnia를 사용하여 API에서 데이터를 가져오는 방법을 살펴보겠습니다 . 또한 Postman을 사용할 수도 있습니다.

물론, 향후 게시물에서는 Next.js 프런트엔드에서 데이터를 가져올 것입니다.

Strapi API를 통한 데이터 가져오기

이제 첫 번째 데이터 유형이 있으니 VS Code에서 Postman을 사용하여 이를 쿼리하는 방법을 살펴보겠습니다.

하지만 먼저 Strapi가 클라이언트에게 해당 엔드포인트를 제공할 수 있는 권한을 부여해야 합니다.

이는 공개 데이터이므로 다음과 같은 권한을 부여하여 이를 수행할 수 있습니다.

공공 접근 허용.gif

설정 -> 사용자 및 권한 플러그인 -> 역할 -> 공개로 이동합니다.

홈페이지를 선택 하고 찾기 확인란을 선택하세요.

이제 요청을 하면 데이터 GET에 접근할 수 있습니다 http://localhost:1337/api/home-page.

홈페이지-데이터.png

엔드포인트에서 초기 홈페이지 데이터를 가져와야 합니다 .

{
  "data": {
    "id": 2,
    "documentId": "fcnlk9xwoqmogfxvfim713y4",
    "title": "Home Page",
    "description": "This is our first single type",
    "createdAt": "2024-10-01T18:33:35.081Z",
    "updatedAt": "2024-10-01T18:33:35.081Z",
    "publishedAt": "2024-10-01T18:33:35.090Z",
    "locale": null
  },
  "meta": {}
}

Strapi 5가 출시됨에 따라 이제 documentId콘텐츠의 고유 식별자인 .라는 새로운 키를 사용하여 더욱 깔끔한 API 응답을 제공합니다.

id응답에서 를 반환하더라도 documentId모든 요청에 를 사용해야 합니다.

자세한 변경 사항은 여기에서 확인할 수 있습니다 .

시작하기 전에 프런트엔드에서 호출하여 초기 데이터를 렌더링할 수 있는지 확인해 보겠습니다.

첫 번째 Fetch 요청 만들기

Next.js 애플리케이션 내부에서 데이터를 가져오는 기본 함수를 만들어서 Next.js와 Strapi 통합을 살펴보겠습니다.

Next.js 15를 사용하고 있으므로 RSC React Server Components를 사용할 수 있습니다 .

프런트엔드 프로젝트 내부에서 해당 파일로 이동해 보겠습니다 src/app/page.tsx.

CSS를 테스트하기 위해 필수적인 버튼 구성 요소를 추가한 곳입니다.

홈페이지-다음-페이지.png

다음과 같은 리팩토링을 통해 데이터를 가져와 보겠습니다.

async function getStrapiData(url: string) {
  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 } = 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>
  );
}

다음과 같이 변경한 후 프로젝트가 실행 중인지 확인하고 로 이동하면 http://localhost:3000다음 내용이 표시됩니다.

우리의 첫 번째 데이터.png