Next.js 9.3+ 블로그에 정적으로 생성된 RSS 피드 추가하기
7783 단어 reactwebdevjavascriptnextjs
소개
오늘 저는 RSS 리더 앱과 서비스를 지원하도록 웹사이트를 업데이트했습니다.
내 목표는 다음과 같습니다.
필요한 XML 생성
참고: 내 블로그 게시물에 대한 메타데이터를 추출하기 위해 Markdown 파일을 구문 분석하는 방법이 이미 있습니다. Source
이 기능을 구현하기 위해
generateRssItem 및 generateRss 두 가지 함수를 만들었습니다.첫 번째 함수는 specification에 따라 단일 블로그 게시물을 설명하는 데 필요한 XML을 생성합니다.
const generateRssItem = (post: Post): string => `
<item>
<guid>https://emilioschepis.com/blog/${post.id}</guid>
<title>${post.title}</title>
<link>https://emilioschepis.com/blog/${post.id}</link>
<description>${post.description}</description>
<pubDate>${new Date(post.date).toUTCString()}</pubDate>
</item>
`;
두 번째 함수는 전체 "채널"을 설명하는 데 필요한 XML을 생성합니다.
const generateRss = (posts: Post[]): string => `
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Blog - Emilio Schepis</title>
<link>https://emilioschepis.com/blog</link>
<description>[...]</description>
<language>en</language>
<lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>
<atom:link href="https://emilioschepis.com/rss.xml" rel="self" type="application/rss+xml"/>
${posts.map(generateRssItem).join('')}
</channel>
</rss>
`;
생성된 XML을 웹사이트에 추가
이전 단계는 매우 간단했지만 생성된 XML을 웹 사이트 파일에 추가하는 방법에 대한 완전한 설명을 찾을 수 없었습니다.
기존 자습서는 API 호출(서버 측에서 매번 XML을 다시 계산함)의 결과로 피드를 노출하거나 Next.js의 Webpack 구성 또는 빌드 기능 자체를 수정했습니다.
내 솔루션은 내 블로그 페이지의
getStaticProps 메서드에서 XML을 생성하는 것이 었습니다.이 페이지는 정적으로 생성되기 때문에 메서드는 프로젝트 자체를 빌드하는 동안에만 실행됩니다.
이 선택의 또 다른 이점은
getStaticProps 페이지 자체를 빌드하기 위해 메타데이터를 추출해야 하므로 Markdown 파일이 한 번만 구문 분석된다는 것입니다.export const getStaticProps: GetStaticProps<Props> = async () => {
const posts = getPosts().sort((a, b) => b.date.localeCompare(a.date));
const rss = generateRss(posts);
fs.writeFileSync('./public/rss.xml', rss);
return {
props: {
posts,
},
};
};
참고: XML 파일의 이름은 원하는 대로 지정할 수 있지만
public 디렉터리에 작성해야 합니다.마지막 단계는
<head> 태그 내부에 RSS 피드에 대한 링크를 추가하는 것입니다. 모든 페이지에서 사용할 수 있도록 _document.tsx 파일에 내 것을 추가했습니다.<link
rel="alternate"
type="application/rss+xml"
title="RSS feed for blog posts"
href="https://emilioschepis.com/rss.xml"
/>
이러한 변경 사항을 호스팅 플랫폼에 배포한 후 결과 피드가 유효한지 확인해야 합니다. W3CFeed Validation Service를 사용하여 그렇게 할 수 있습니다.
결과 및 결론
내 블로그 게시물의 RSS 피드here를 찾을 수 있습니다. 이 기능에 대한 커밋을 찾을 수 있습니다here.
이 게시물이 이 기능을 자신의 Next.js 웹사이트에 추가하려는 개발자에게 유용하기를 바랍니다.
읽어 주셔서 감사합니다!
Reference
이 문제에 관하여(Next.js 9.3+ 블로그에 정적으로 생성된 RSS 피드 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/emilioschepis/adding-a-statically-generated-rss-feed-to-a-next-js-9-3-blog-58id텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
