next.js generateSitemaps 사용하여 sitemap 만들기 - SEO 최적화

sitemap nextjs 14.2 버전 이후로는 로컬라이징한 언어별로 sitemap을 맵핑 할 수 있다. 

기본코드

공식 문서에 따르자면 아래와 같이 코드를 작성하면 

import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      alternates: {
        languages: {
          es: 'https://acme.com/es',
          de: 'https://acme.com/de',
        },
      },
    },
  ]
}

 

출력은 이렇게 된다고 한다. 

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://acme.com</loc>
    <xhtml:link
      rel="alternate"
      hreflang="es"
      href="https://acme.com/es"/>
    <xhtml:link
      rel="alternate"
      hreflang="de"
      href="https://acme.com/de"/>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
  </url>
</urlset>

 

응용하기

이미 path name을 config 파일에서 관리 하고 있기 때문에 

const basePath = "https://test.com";

export default function sitemap(): MetadataRoute.Sitemap {
    const viewCount = Object.keys(pathnames).length;

    var list: any[] = [];

    for (let i = 0; i < viewCount; i++) {
	    var path = Object.keys(pathnames)[i];
        list.push(
            {
                url: basePath + path,
                lastModified: new Date(),
                alternates: {
                    languages: {
                        en: basePath + '/en' + path,
                        es: basePath + '/es' + path,
                        ko: basePath + '/ko' + path,
                    },
                },
            },
        );

    }

    return list;
}

이런식으로 구현했다. 

아직 더 좋은 코드를 생각하지 못했다. 

이건 app router 방식이다. 

사이트/sitemap.xml 에서 확인 할 수 있고. 

view page source로 xml 파일을 확인 할 수 있다. 

 

가장중요한 것 

app/sitemap.ts 파일이 위치해야 한다. 

 

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js