Next.간단한 CGM 자동 차트

아래의 보도에 틀을 덧붙여서 조작을 더욱 쉽게 하였다.상세한 부분과 동기는 아래의 보도를 참고하시오.
https://zenn.dev/catnose99/articles/c441954a987c24

1. 대역이란

자동 그림에서

사이트 내의 내용을 검색엔진에 통지한다.

검색엔진이 사이트 내에서 복제 인덱스를 하는 것을 돕는다.

효과가 있다.
표식
Head<loc>반드시... 해야 한다
페이지의 URL을 표시합니다.<lastmod>옵션
페이지의 최종 업데이트일을 나타냅니다.<changefreq>옵션always,hourly,daily,weekly,monthly,yearly,never에서 페이지의 업데이트 빈도를 나타낸다.<priority>옵션
0.0-1.0에서는 사이트 내 다른 URL과 상대적인 우선 순위를 나타냅니다.기본 우선 순위는 0.5입니다.
기본 형식은 다음과 같다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://google.com/</loc>
    <lastmod>2022-05-02T22:30:57.000Z</lastmod>
    <changefreq>hourly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

2. 자동 그림에 사용되는 탭 확장

JSX에는 자동 기어에 사용되는 XML 태그, JSX가 추가되었습니다.Element으로 처리할 수 있습니다.
src/@types/xml.d.ts

declare namespace JSX {
  interface IntrinsicElements {
    urlset: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
      xmlns: string;
    };
    url: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    loc: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    lastmod: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    changefreq: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    priority: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
  }
}

3. 자동 그림을 만드는 함수 만들기

URL 목록<urlset>에서 작성하고 JSX를 만듭니다.Element을 반환하는 함수를 작성합니다.
그리고 renderToString로 문자열로 변환하여 머리에 <?xml version="1.0" encoding="UTF-8"?>를 추가하여 자동 그림을 완성합니다.
src/sitemap/generator.tsx

import { renderToString } from 'react-dom/server';

export type URL = {
  loc: string;
  lastMod?: Date;
  freq?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
  priority?: 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0;
};

function generateURLSet(list: URL[]): JSX.Element {
  return (
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      {list.map(({ loc, lastMod, freq, priority }: URL, i) => (
        <url key={i}>
          <loc>{loc}</loc>
          {lastMod && <lastmod>{lastMod.toISOString()}</lastmod>}
          {freq && <changefreq>{freq}</changefreq>}
          {priority && <priority>{priority}</priority>}
        </url>
      ))}
    </urlset>
  );
}

export function generateSiteMap(list: URL[]): string {
  return '<?xml version="1.0" encoding="UTF-8"?>' + renderToString(generateURLSet(list));
}

4. 자동 그림 페이지 만들기

자동 그림 페이지를 만듭니다.getServerSideProps에서 백엔드에서 글 일람, 사용자 목록 등을 가져와 목록에 추가합니다.
XML 문자열로 변환하고 응답으로 돌아갑니다.
src/pages/sitemap.xml.tsx

import { GetServerSidePropsContext } from 'next';
import { generateSiteMap, URL } from 'frameworks/sitemap/generator';

export default function Page(): null {
  return null;
}

export async function getServerSideProps({ res }: GetServerSidePropsContext): Promise<{
  props?: Record<string, unknown>;
  notFound?: boolean;
}> {
  try {
    const list: URL[] = [
      {
        loc: 'https://google.com/',
        lastMod: new Date(1651530657000),
        freq: 'hourly',
        priority: 0.5,
      },
    ];

    const xml = generateSiteMap(list);

    res.setHeader('Cache-Control', 'public, max-age=3600, s-maxage=86400, stale-while-revalidate');
    res.setHeader('Content-Type', 'text/xml');
    res.end(xml);

    return {
      props: {},
    };
  } catch (error) {
    return {
      notFound: true,
    };
  }
}