>  기사  >  웹 프론트엔드  >  DEV.to API를 사용하여 Next.js에서 블로그 게시물 가져오기

DEV.to API를 사용하여 Next.js에서 블로그 게시물 가져오기

王林
王林원래의
2024-09-07 06:43:13855검색

Fetching Blog Posts in Next.js Using the DEV.to API

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 블로그 게시물이 표시됩니다. 게시물을 클릭하면 개별 블로그 게시물 페이지로 이동합니다.

  1. 결론 이 튜토리얼에서는 Next.js 앱의 DEV.to API에서 블로그 게시물을 가져오고 표시하는 방법을 배웠습니다. 이는 정적 사이트 생성 및 클라이언트측 렌더링의 이점을 활용하면서 DEV.to 콘텐츠를 개인 웹사이트에 통합하는 강력한 방법입니다.

사이트 디자인에 맞게 이 설정을 추가로 맞춤설정하고, 페이지 매김을 추가하고, 스타일을 개선해 보세요!

질문이나 제안사항이 있으면 댓글로 알려주세요.

위 내용은 DEV.to API를 사용하여 Next.js에서 블로그 게시물 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.