다국어, 다중 도메인, URL 번역, 정적 Next.js 사이트용 사이트맵 생성

예, 제목 게시물이 약간 길다는 것을 알고 있습니다 😅 그러나 나열된 각 기능은 내 목표를 달성하기 위해 채택한 솔루션을 이해하는 데 필요합니다. Next.js 사이트.

왜 정적입니까?

우선, 나는 💘 이렇게 간단한 방법으로 많은 문제를 해결하는 jamstack 아키텍처... 이것이 바로 이 맥락에서 내가 static 사이트에 대해 말하는 이유입니다. 모든 페이지는 빌드 시간에 미리 생성됩니다(알려진 SSG로).

다국어

Next.js는 하위 경로 라우팅( example.com/it , example.com/en ) 및 도메인 라우팅( example.it , example.com )의 두 가지 전략으로 기본적이지만 강력한 i18n support을 제공합니다. 첫 번째 전략에도 이 솔루션을 쉽게 채택할 수 있습니다.

번역된 URL

내 생각에 URL 번역도 킬러 SEO 기능이지만 현재is not so simple support it in a Next.js site: 데이터 소스(헤드리스 CMS, 파일 시스템 기반 등)에 따라 다양한 솔루션이 있지만 중요한 것은 최종 빌드에서 현지화 코드에 대해 각 페이지를 수집하게 됩니다.

.next/server/pages/it/chi-siamo.html
.next/server/pages/en/about-us.html

one of Lee Robinson's post 덕분에 추가 쿼리나 REST 호출 또는 서버 요청 없이 필요한 모든 사이트맵 파일을 생성하는 효율적인 방법에 대한 제안을 찾았지만 단순히 .next 대신 생성된 pages 디렉토리를 살펴봄으로써 가능합니다. 원래 게시물과 같은 폴더).

import { writeFileSync } from "fs"
import { globby } from "globby"
import prettier from "prettier"

async function generate() {
  ;["it", "en"].forEach(async (lang) => {
    const pages = await globby([
      `.next/server/pages/${lang}/**/*.html`,
      `!.next/server/pages/${lang}/404.html`,
      `!.next/server/pages/${lang}/500.html`      
    ])

    const siteUrl = lang === "it" ? "https://example.it" : "https://example.com"

    const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
            <loc>${siteUrl}</loc>            
            <lastmod>${new Date().toISOString()}</lastmod>
        </url>
        ${pages
          .map((page) => {
            const route = page.replace(`.next/server/pages/${lang}`, "").replace(".html", "")

            return `<url>
                  <loc>${siteUrl}${route}</loc>
                  <lastmod>${new Date().toISOString()}</lastmod>                  
              </url>
            `
          })
          .join("")}
    </urlset>
    `

    const formatted = prettier.format(sitemap, {
      parser: "html",
    })

    writeFileSync(`public/sitemap-${lang}.xml`, formatted)
  })
}

generate()

링크된 게시물에 설명된 대로 generate-sitemap.mjs 단계에서 postbuild 스크립트를 실행하면 마지막에 2개(또는 사이트 언어 😏 이상) xml 사이트맵 파일이 생깁니다.

example.com/sitemap-en.xml
example.it/sitemap-it.xml

일반적으로 현지화되지 않은 사이트에서는 next-sitemap 라이브러리를 사용하는 것이 매우 좋지만 이와 같은 특정 경우에는 소매를 걷어붙이는 것이 항상 최선의 해결책이라고 생각합니다 😉