Next.js에서 robots.txt 생성하기

robots.txt 파일은 크롤러가 사이트에서 요청할 수 있거나 요청할 수 없는 페이지 또는 파일을 검색 엔진 크롤러에 알려줍니다.
Next.js는 기본적으로 robots.txt를 생성하지 않습니다./public 디렉토리에 수동으로 생성할 수 있지만 이렇게 하면 Next.js 웹사이트를 배포하는 모든 환경에서 사용됩니다. 이는 미리보기/테스트 환경을 인덱싱하지 않으려는 경우 문제가 될 수 있습니다.

현재 환경을 기반으로 조건부로 robots.txt를 생성하려면 서버 측에서 또는 빌드 스크립트를 통해 생성할 수 있습니다.

다음은 두 가지 옵션에 대해 자세히 설명합니다.

Next.js 페이지에서 robots.txt 렌더링

이것은 아마도 이 사용 사례를 처리하는 "적절한"Next.js 방법일 것입니다.pages/robots.txt 콘텐츠를 동적으로 반환하는 robots.txt에 새 페이지를 생성하면 Next.js가 올바른 경로에서 사용할 수 있도록 처리합니다.

import React from 'react';

const crawlableRobotsTxt = `User-agent: *\nAllow: /`;

const uncrawlableRobotsTxt = `User-agent: *\nDisallow: /`;

class Robots extends React.Component {
  public static async getInitialProps({ res }) {
    res.setHeader('Content-Type', 'text/plain');
    // Return a non-crawlable robots.txt in non-production environments
    res.write(process.env.VERCEL_ENV === "production"
      ? crawlableRobotsTxt
      : uncrawlableRobotsTxt
    );
    res.end();
  }
}

export default Robots;

이 접근 방식의 한 가지 단점은 getInitialProps (또는 getServerSideProps )를 사용하면 Automatic Static Optimization이 비활성화되고 정적 페이지 생성을 허용하지 않는다는 것입니다(서버 측 렌더링을 사용하는 동적 페이지에서만 작동).

빌드 프로세스에서 robots.txt 생성

또는 작은 Node.js 스크립트(예: robots.txt )를 사용하여 빌드 프로세스에서 직접 scripts/generate-robots-txt.js를 생성할 수 있습니다.

const fs = require("fs");

const crawlableRobotsTxt = `User-agent: *\nAllow: /`;

const uncrawlableRobotsTxt = `User-agent: *\nDisallow: /`;

function generateRobotsTxt() {
  // Create a non-crawlable robots.txt in non-production environments
  const robotsTxt =
    process.env.VERCEL_ENV === "production"
      ? crawlableRobotsTxt
      : uncrawlableRobotsTxt;

  // Create robots.txt file
  fs.writeFileSync("public/robots.txt", robotsTxt);

  console.log(
    `Generated a ${
      process.env.VERCEL_ENV === "production" ? "crawlable" : "non-crawlable"
    } public/robots.txt`
  );
}

module.exports = generateRobotsTxt;

그런 다음 scripts/generate-robots-txt.js 의 prebuild 스크립트에서 호출하여 package.json를 실행할 수 있습니다.

{
  "scripts": {
    "prebuild": "scripts/generate-robots-txt",
    "build": "next build",
  },
}

또는 next.config.js의 Webpack 빌드 단계에서 호출하여 다음을 수행합니다.

module.exports = {
  webpack(config, { isServer }) {
    if (isServer) {
      generateRobotsTxt();
    }
    return config;
  },
};

☝ 이것은 현재 Remotebear (소스 코드 here )에서 사용하고 있는 접근 방식입니다.

You’ll probably want to add public/robots.txt to your .gitignore: since this is generated on each build, there’s no need to commit it anymore.