Next.js로 웹사이트를 구축하는 경우 검색 엔진이 페이지를 효율적으로 검색하고 색인을 생성하기를 원할 것입니다. 이 프로세스를 개선하는 한 가지 방법은 사이트맵을 만드는 것입니다. 사이트맵은 웹사이트의 모든 URL을 나열하는 파일로, Google과 같은 검색 엔진이 사이트를 더 빠르게 크롤링하고 색인을 생성하는 데 도움이 됩니다.

이 가이드에서는 Next.js 프로젝트에서 next-sitemap을 설치하고 구성하는 방법을 안내합니다. 또한 사이트맵의 이점을 다루고 "Hello World" Next.js 앱에 샘플 코드를 포함하여 작동 방식을 보여드리겠습니다.

next-sitemap 사용의 이점

설치 과정을 시작하기 전에 next-sitemap 사용의 주요 이점에 대해 간략하게 논의하겠습니다.

1. 향상된 SEO: 체계적으로 구성된 사이트맵은 Google과 같은 검색 엔진이 페이지를 보다 효율적으로 검색하는 데 도움이 되어 색인 생성이 향상되고 검색 순위가 더 높아질 수 있습니다.

2. 빠른 크롤링: 검색 엔진에 웹사이트 로드맵을 제공하면 검색 엔진이 페이지를 더 빠르게 크롤링하고 색인을 생성할 수 있습니다.

3. 동적 경로 처리: 동적 경로가 있는 웹사이트의 경우 next-sitemap을 사용하면 동적 콘텐츠에 대한 URL을 쉽게 생성하여 모든 페이지를 검색할 수 있습니다.

4. 사용자 정의 사이트맵: next-sitemap을 사용하면 우선순위 설정, 빈도 변경, 특정 페이지 제외 등의 옵션으로 사이트맵을 사용자 정의할 수 있습니다.

1단계: 다음 사이트맵 설치

시작하려면 Next.js 프로젝트에 next-sitemap 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하세요:

npm install next-sitemap

또는 Yarn을 사용하는 경우:

yarn add next-sitemap

2단계: next-sitemap.js 구성 파일 생성

패키지를 설치한 후 다음 단계는 프로젝트 루트에 next-sitemap.config.js라는 구성 파일을 만드는 것입니다. 이 파일에는 사이트맵 생성을 위한 설정이 포함됩니다.

기본 구성은 다음과 같습니다.

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

위 코드에서는 siteUrl을 사용하여 사이트의 기본 URL을 지정합니다. generateRobotsTxt 옵션은 사이트맵과 함께 robots.txt 파일을 생성하고, sitemapSize는 각 사이트맵 파일에 포함할 URL 수를 결정합니다.

3단계: Sitemap 스크립트로 package.json 업데이트

이제 프로젝트를 빌드할 때마다 사이트맵을 생성하려면 package.json 파일에 스크립트를 추가해야 합니다.

방법은 다음과 같습니다.

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

이렇게 하면 각 빌드 후에 구성에 따라 사이트맵이 자동으로 생성됩니다.

4단계: 사이트맵 구축 및 생성

모든 것이 설정되었으므로 다음 명령을 실행하여 프로젝트를 빌드하고 사이트맵을 생성하세요.

npm run build

또는 실 사용:

yarn build

빌드가 완료되면 프로젝트의 public/ 폴더에 sitemap.xml 파일(및 선택적으로 robots.txt 파일)이 생성됩니다. 이 파일에는 검색 엔진에서 크롤링할 준비가 된 Next.js 앱의 모든 URL이 포함됩니다.

예: next-sitemap이 포함된 "Hello World" Next.js 앱

next-sitemap이 어떻게 작동하는지 보여주기 위해 간단한 "Hello World" Next.js 앱을 만들어 보겠습니다. 다음은 기본적인 Next.js 페이지입니다:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

이제 다음과 같이 next-sitemap.config.js를 구성하세요.

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

다음으로 package.json에 다음을 추가합니다.

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

npm run build를 실행하면 public/ 디렉토리에서 'Hello World' 홈페이지 URL이 포함된 사이트맵을 찾을 수 있습니다.

라이브 데모

내 웹사이트 https://rajeshkumaryadav.com은 이 패키지를 사용하여 빌드 프로세스에서 사이트맵을 자동 생성합니다. 아래는 sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

결론

이 가이드에 설명된 단계를 따르면 이제 next-sitemap이 Next.js 프로젝트에 통합되었습니다. 이 도구는 사이트맵과 robots.txt 파일을 생성하는 쉬운 방법을 제공합니다. 이를 통해 웹사이트의 SEO를 크게 향상시키고 검색 엔진이 모든 콘텐츠를 효율적으로 찾을 수 있도록 할 수 있습니다.

이 설정을 사용하면 Next.js 앱을 검색 엔진 친화적으로 만들고 색인을 더 잘 생성할 수 있습니다.