ButterCMS란?
ButterCMS는 클라우드 기반의 API 우선 헤드리스 CMS로 CMS 기반 앱과 웹사이트를 신속하게 구축할 수 있습니다. 콘텐츠 생성 및 관리를 위한 사용하기 쉬운 대시보드가 있습니다. 즉시 사용 가능한 SEO 최적화된 사전 구축된 API 우선 블로그 엔진과 함께 제공되어 웹사이트 또는 앱을 위한 기능적인 블로그 시스템을 신속하게 구축하고 통합할 수 있습니다. 신규 및 기존 애플리케이션에 원활하게 통합되며 사용 가능한 최고의 헤드리스 CMS 중 하나입니다.
자습서 전제 조건
다음은 이 자습서와 함께 따라야 할 주요 요구 사항입니다.
개발 환경 설정
시작하기 전에 터미널을 열고 생성/저장할 위치로 이동한 다음 아래 명령을 실행하여 프로젝트를 부트스트랩하기 위해 create-next-app를 실행합니다.
$ npx create-next-app my-blog
그런 다음 몇 가지 추가 종속성을 확인하라는 메시지가 표시됩니다. 그런 다음 위의 명령은 프로젝트의 폴더 구조를 자동으로 스캐폴딩합니다.
다음 단계는 다음 명령을 사용하여 ButterCMS SDK로 Next.js 프로젝트에서 ButterCMS를 구성하는 것입니다.
$ npm install butter --save
# OR
$ yarn add buttercms
그런 다음 버터 계정을 만드십시오. 이것을 클릭 링크 귀하의 계정을 생성합니다. 그런 다음 ButterCMS를 애플리케이션에 연결하려면 READ API 토큰 키를 환경 변수로 저장해야 합니다. 프로젝트 디렉터리의 루트에 .env 파일을 만들고 ButterCMS API 토큰을 환경 변수로 추가합니다.
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
당신은 얻을 수 있습니다 읽기 API 귀하의 토큰 설정 대시보드.
ButterCMS 설정
ButterCMS 계정을 생성한 후 대시보드에 로그인합니다. 버터CMS 웹사이트. ButterCMS의 가장 인상적인 기능 중 하나는 잘 구성된 API를 사용하여 웹사이트 또는 애플리케이션과 쉽게 통합되는 사전 구축된 블로그 엔진과 함께 제공된다는 것입니다. Blog Engine에는 블로그 게시물 작성을 위해 설계된 직관적인 콘텐츠 설정이 있으므로 사용자 측에서 설정할 필요가 없습니다. 플러그 앤 플레이 방식입니다. 블로그를 설정하려면 대시보드로 이동하여 왼쪽 사이드바에서 블로그 게시물을 클릭하십시오.
새 페이지가 열리면 다음을 클릭하십시오. 새 게시물 버튼을 클릭하고 열리는 페이지에서 블로그 게시물 정보를 추가하세요.
ButterCMS 블로그 엔진은 WYSIWYG 블로그 사이트용 콘텐츠를 쉽게 만들 수 있는 편집기입니다. 비디오 및 이미지와 같은 미디어 파일을 삽입할 수 있는 여러 기능을 자랑하며 사용하기 쉬운 텍스트 편집기를 제공하고 모든 블로그 메타데이터를 설정하는 섹션을 포함합니다.
블로그 편집 페이지에서 블로그 게시물의 제목을 입력하고 텍스트 편집기를 사용하여 콘텐츠를 추가하고 표지 이미지, 작성자 정보, 관련 태그 및 중요한 SEO 데이터를 포함합니다.
위의 이미지에서 블로그 엔진에는 카테고리 및 태그, 블로그 요약 및 블로그 SEO 섹션을 추가할 수 있는 섹션이 포함되어 있습니다. 위의 단계에 따라 더 많은 블로그 게시물을 추가할 수 있습니다. 블로그의 모든 세부 정보를 삽입한 후 게시이다. 게시물을 게시하려면 대시보드의 오른쪽 상단 모서리에 있는 버튼을 클릭하세요.
ButterCMS API에서 데이터 통합 및 렌더링
ButterCMS를 애플리케이션에 연결하려면 다음을 저장해야 합니다. API 읽기 키를 환경 변수로 사용합니다. ButterCMS에서 콘텐츠 준비를 마친 후 코드 편집기를 열고 다음 위치에 구성 요소 폴더를 만듭니다. SRC 다음 프로젝트의 폴더를 만든 다음 바닥 글 구성 요소 레이아웃 구성 요소입니다.
Footer.js 구성 요소를 열고 다음 코드를 추가합니다.
const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> (c) {new Date().getFullYear()} David Adeneye </p> <div className="social_icons"> <a href="https://twitter.com/davidadeneye" aria-label="Twitter" target="_blank" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/daacode" aria-label="GitHub" target="_blank" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/david-adeneye-490027188/" aria-label="LinkedIn" target="_blank" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;
모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!
위의 코드는 모든 블로그 페이지에 표시될 페이지의 바닥글 섹션을 추가합니다.
이 기사에서는 Font Awesome 아이콘을 사용할 것입니다. Font Awesome을 사용하려면 프로젝트에 설치하거나 CDN을 사용할 수 있습니다. CDN 링크를 _document.js 다음과 같은 파일 :
import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> )
}
그런 다음 레이아웃 구성 요소를 만들고 그 안에 페이지 콘텐츠를 래핑하여 바닥글 구성 요소를 페이지에 추가합니다. 결과적으로 레이아웃 구성 요소는 자식을 소품으로 허용하므로 Next.js 페이지의 콘텐츠에 액세스할 수 있습니다.
열기 Layout.js 구성요소를 만들고 아래에 다음 코드를 추가합니다.
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
이제 페이지 콘텐츠를 래핑하여 레이아웃 구성 요소를 페이지에 통합할 수 있습니다.
엽니다 _app.js 다음 코드를 추가하는 파일:
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
그런 다음 귀하의 index.js 파일을 만들고 다음 코드를 추가합니다.
import React, { useEffect, useState } from "react"; import Link from "next/link"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Blog({ posts }) { console.log(posts); return ( <> <div className="nav-container"> <div className="logo"> <Link href="/"> David Adeneye </Link> </div> <Link href="#" className="blog-menu"> My Blog </Link> <a href="" className="cta-btn">Subscribe</a> </div> <div className="blogpost-container"> {posts.data.map((post, index) => ( <div className="blogpost-box" key={index}> <div className="blogpost-img"> <img src={post.featured_image} alt="Blog" width={300} height={300}/> </div> <div className="blogpost-text"> <span className="blogpost-tag">{post.tags[0].name}</span> <a href={`/posts/${post.slug}`} className="blogpost-title">{post.title}</a> <p>{post.summary}</p> </div> <div className="blogpost-footer"> <div> <img src={post.author.profile_image} alt="avatar" /> <p className="blogpost-name">{ post.author.first_name + " " + post.author.last_name }</p> </div> <Link href={`/posts/${post.slug}`} className="blogpost-link"> Read More </Link> </div> </div> ))} </div> </> );
} export async function getStaticProps() { const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() return { props: { posts, }, } }
위의 코드는 ButterCMS API에서 게시물 데이터를 가져와 페이지에 표시합니다.
다음으로 동적 경로를 사용하여 각 블로그 게시물이 링크되는 개별 블로그 페이지를 만들어야 합니다. Next.js를 사용하면 외부 데이터에 의존하는 경로가 있는 페이지를 생성할 수 있습니다. 블로그 게시물에 대한 동적 경로를 만들려면 이름이 지정된 폴더를 만듭니다. 게시물 내부 src / 페이지 폴더. 현재 폴더 내에서 이름이 지정된 새 파일을 만듭니다. [ID].js 다음 코드를 추가하십시오.
import React, { useEffect, useState } from "react"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Post({ post }) { console.log(post.data.title) return( <> <div className="blog-container"> <span className="blog-goBack"><a href="/ko/blog">Go back</a></span> <div className="blog-wrap"> <header> <p className="blog-date">Published {post.data.created}</p> <h1>{post.data.title}</h1> <div className="blog-tag"> <div></div> </div> </header> <img src={post.data.featured_image} alt="cover" /> <div className="blog-content" dangerouslySetInnerHTML={{__html: post.data.body }}></div> </div> </div> </> )
} // This function gets called at build time
export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.data.map((post) => ({ params: { id: post.slug }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } // This also gets called at build time
export async function getStaticProps({ params }) { // params contains the post `id`. // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://api.buttercms.com/v2/posts/${params.id}?auth_token=${read_token}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } }
위의 코드에서 각 페이지는 매개변수 ID: post.slug.
참고: style/global.css 파일을 복사하는 것을 잊지 마십시오. Github 레포 튜토리얼을 따라하는 경우 자신의 프로젝트 파일에 추가하십시오.
그런 다음 아래 명령을 실행하여 개발자 모드에서 앱을 시작합니다.
블로그 페이지는 다음과 같이 표시됩니다.
각 블로그 게시물 페이지는 다음과 같습니다.
이 자습서의 코드베이스는 여기에서 얻을 수 있습니다. 깃허브.
결론
이 기사에서는 Next.js 및 ButterCMS 블로그 엔진을 사용하여 블로그 웹사이트를 쉽게 스캐폴딩하거나 블로그 엔진을 웹사이트에 통합하는 방법을 살펴보았습니다. ButterCMS는 블로그 구축을 위한 훌륭한 헤드리스 CMS입니다. 수동으로 블로그를 만드는 데 드는 시간과 골칫거리를 줄여줄 것입니다. ButterCMS를 사용하면 선택한 프로그래밍 언어 또는 프레임워크 스택으로 블로그를 쉽게 설정할 수 있습니다.
ButterCMS에 대해 자세히 알아보려면 ButterCMS를 확인하세요. 선적 서류 비치.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
- PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 플라톤ESG. 자동차 / EV, 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
- BlockOffsets. 환경 오프셋 소유권 현대화. 여기에서 액세스하십시오.
- 출처: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
