워드프레스와 next.js 연동에 대한 질문이야 next.js 에서 워드프레스 wp-json 을 이용해서 콘텐츠를 호출하는 샘플을 알려줘 next.js 에서 데이터를 호출해서 완벽한 웹사이트를 만드는 샘플이면 좋겠다

WPTurbo » Snippets » 워드프레스와 next.js 연동에 대한 질문이야 next.js 에서 워드프레스 wp-json 을 이용해서 콘텐츠를 호출하는 샘플을 알려줘 next.js 에서 데이터를 호출해서 완벽한 웹사이트를 만드는 샘플이면 좋겠다
0

Created with:

Visibility: 

public

Creator: wsd

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project
					<?php
npx create-next-app my-wordpress-app
cd my-wordpress-app
npm install isomorphic-unfetch
				

다음으로, pages/api 폴더에 wordpress.js 파일을 생성하고 다음 코드를 추가합니다:

이제 Next.js 앱을 실행하고 http://localhost:3000/api/wordpress로 접속하면 WordPress에서 가져온 콘텐츠 데이터를 확인할 수 있습니다. 이 데이터를 활용하여 Next.js 페이지에서 원하는 대로 렌더링할 수 있습니다.

이 예제에서는 isomorphic-unfetch 패키지를 사용하여 WordPress REST API에서 데이터를 가져오는 비동기 함수를 작성하였습니다. 이 함수는 Next.js의 API 라우트에서 호출되며, WordPress의 포스트 데이터를 반환합니다. 반환된 데이터를 활용하여 Next.js 페이지에서 필요한 렌더링 작업을 수행할 수 있습니다.

이 예제를 참고하여 Next.js와 WordPress를 연동하여 웹사이트를 구축할 수 있습니다. 데이터 호출 및 렌더링 작업을 확장하여 원하는 기능과 디자인을 구현할 수 있습니다.

Register an account to save your snippets or go Pro to get more features.