DEV.to API를 사용하여 Next.js에서 블로그 게시물 가져오기
- 王林원래의
- 2024-09-07 06:43:13835검색
DEV.to 블로그 게시물을 Next.js 웹사이트에 게시하고 싶다면 행운이 따릅니다! DEV.to는 프로그래밍 방식으로 블로그 게시물을 가져올 수 있는 사용하기 쉬운 API를 제공합니다. 이 가이드에서는 DEV.to의 API를 Next.js 애플리케이션에 통합하고 블로그 콘텐츠를 동적으로 표시하는 방법을 보여 드리겠습니다.
들어가자!
1. Next.js 프로젝트 설정
먼저, 아직 설정하지 않았다면 다음을 실행하여 새 Next.js 프로젝트를 설정하세요.
npx create-next-app@latest my-dev-blog cd my-dev-blog
이제 Next.js 앱이 준비되었으므로 블로그 게시물을 가져오는 작업으로 넘어갑니다.
2. DEV.to API에서 블로그 게시물 가져오기
DEV.to API는 간단한 HTTP 요청을 통해 게시된 기사에 대한 액세스를 제공합니다. 엔드포인트를 눌러 사용자별로 기사를 가져올 수 있습니다.
https://dev.to/api/articles?username=yourusername
Next.js 앱에서 블로그 게시물을 가져오기 위해 SWR 라이브러리를 사용합니다. SWR은 React/Next.js 애플리케이션에서 데이터를 쉽게 가져오고, 캐시하고, 업데이트할 수 있도록 설계된 인기 있는 데이터 가져오기 라이브러리입니다.
SWR 설치:
npm install swr
이제 API 요청을 처리하는 유틸리티 함수를 만들어 보겠습니다.
// src/lib/fetcher.ts
export default async function fetcher(url: string) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
return response.json();
}
3. 블로그 페이지 만들기
이제 가져오기 유틸리티가 있으므로 DEV.to 게시물을 표시할 블로그 페이지를 만들어 보겠습니다.
pages/blog/index.tsx에서 SWR을 사용하여 블로그 게시물을 가져오고 표시합니다.
import { Container, Row, Col, Card, Button, Badge } from 'react-bootstrap';
import Head from 'next/head';
import useSWR from 'swr';
import fetcher from '../../lib/fetcher';
import Link from 'next/link';
import { formatDistanceToNow, parseISO } from 'date-fns';
interface BlogPost {
id: number;
title: string;
description: string;
slug: string;
cover_image: string;
tag_list: string[];
reading_time_minutes: number;
published_timestamp: string;
positive_reactions_count: number;
}
const Blog = () => {
const { data, error } = useSWR<BlogPost[]>('https://dev.to/api/articles?username=yourusername', fetcher);
if (error) return <div>Failed to load posts</div>;
if (!data) return <div>Loading...</div>;
return (
<>
<Head>
<title>Blog | Your Name</title>
</Head>
<Container>
<Row>
<Col>
<h1>Blog</h1>
<Row className="g-4">
{data.map((post: BlogPost) => (
<Col md={4} key={post.id}>
<Card className="blog-card" data-aos="fade-up">
<Card.Body>
<Card.Title>{post.title.length > 50 ? `${post.title.substring(0, 50)}...` : post.title}</Card.Title>
<Card.Text>{post.description}</Card.Text>
<div className="mb-2">
{post.tag_list.map((tag: string) => (
<Badge pill bg="secondary" className="me-1" key={tag}>
{tag}
</Badge>
))}
</div>
<div className="text-muted">
<small><i className="fa-solid fa-clock"></i> {post.reading_time_minutes} min read</small><br/>
<small><i className="fa-solid fa-calendar-day"></i> {formatDistanceToNow(parseISO(post.published_timestamp), { addSuffix: true })}</small><br/>
<small><i className="fa-solid fa-thumbs-up"></i> {post.positive_reactions_count} Likes</small>
</div>
<Link href={`/blog/${post.slug}`} passHref>
<Button variant="outline-primary" className="mt-3">Read More</Button>
</Link>
</Card.Body>
</Card>
</Col>
))}
</Row>
</Col>
</Row>
</Container>
</>
);
};
export default Blog;
4. 동적 블로그 페이지 추가
Next.js는 각 블로그 게시물에 대한 개별 페이지를 생성할 수 있는 동적 경로를 제공합니다. 각 게시물을 표시하는 동적 경로를 만들어 보겠습니다.
pages/blog/[slug].tsx라는 파일을 만듭니다.
import { useRouter } from 'next/router';
import useSWR from 'swr';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';
import Head from 'next/head';
import Image from "next/image";
import fetcher from '../../lib/fetcher';
const BlogPost = () => {
const router = useRouter();
const { slug } = router.query;
const { data, error } = useSWR(slug ? `https://dev.to/api/articles/yourusername/${slug}` : null, fetcher);
if (error) return <div>Failed to load the post</div>;
if (!data) return <div>Loading...</div>;
return (
<>
<Head>
<title>{data.title} | Your Name</title>
</Head>
<Container>
<Row>
<Col>
<div className="section-title">
<h1>{data.title}</h1>
<p>{data.readable_publish_date}</p>
</div>
<section>
{data.cover_image && (
<Image
src={data.cover_image}
alt={data.title}
className="img-fluid mb-3"
width={1000}
height={420}
layout="responsive"
/>
)}
<div dangerouslySetInnerHTML={{ __html: data.body_html }} />
</section>
<Button variant="outline-dark" href="/blog">
Back to Blog
</Button>
</Col>
</Row>
</Container>
</>
);
};
export default BlogPost;
이 페이지는 URL의 슬러그를 사용하여 개별 게시물을 가져오고 위험하게SetInnerHTML을 사용하여 안전하게 HTML 콘텐츠로 렌더링합니다.
5. 최종 손질
이제 다음을 실행하여 Next.js 앱을 시작할 수 있습니다.
npm run dev
/blog 경로를 방문하면 DEV.to 블로그 게시물이 표시됩니다. 게시물을 클릭하면 개별 블로그 게시물 페이지로 이동합니다.
- 결론 이 튜토리얼에서는 Next.js 앱의 DEV.to API에서 블로그 게시물을 가져오고 표시하는 방법을 배웠습니다. 이는 정적 사이트 생성 및 클라이언트측 렌더링의 이점을 활용하면서 DEV.to 콘텐츠를 개인 웹사이트에 통합하는 강력한 방법입니다.
사이트 디자인에 맞게 이 설정을 추가로 맞춤설정하고, 페이지 매김을 추가하고, 스타일을 개선해 보세요!
질문이나 제안사항이 있으면 댓글로 알려주세요.
위 내용은 DEV.to API를 사용하여 Next.js에서 블로그 게시물 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!