Next.js 앱에서 동적 /robots.txt 파일 생성하기
Next.js 앱에서 동적 /robots.txt 파일을 제공할 때 고려해야 할 몇 가지 옵션이 있습니다. 이 가이드에서는 getServerSideProps와 API 라우트를 사용하는 권장 접근 방식을 살펴보겠습니다.
getServerSideProps 사용하기
첫 번째 단계는 /robots.txt 요청을 처리하는 전용 Next.js 페이지를 만드는 것입니다. 예를 들어, pages 디렉토리 아래에 robots.txt.tsx라는 파일을 생성해봅시다.
import React from "react";
import { GetServerSideProps } from "next";
interface Robots {
ENV: "TEST" | "PROD"
}
export const getServerSideProps: GetServerSideProps<Robots> = async (context) => {
const { req, res } = context;
const { host } = req.headers;
res.write("XXX");
res.end();
return { props: { ENV: "TEST" } };
};
const Robots: React.FC<Robots> = (props) => {
console.log("Rendering Robots...");
return (
<div>
I am Robots
</div>
);
};
export default Robots;위의 코드에서는, getServerSideProps 함수를 정의했습니다. 이 함수는 /robots.txt 요청을 처리합니다. 이 함수 내에서 제공된 context에서 req와 res 객체에 접근합니다.
동적 응답을 생성하기 위해 req.headers.host 값을 사용할 수 있습니다. 이를 통해 호스트 이름에 따라 응답을 사용자 정의할 수 있습니다. 예를 들어, 호스트에 따라 다른 robots.txt 내용을 반환할 수 있습니다.
API 라우트 사용하기
또는 API 라우트를 사용하여 robots.txt 내용을 제공할 수도 있습니다. 이렇게 하면 페이지 구성 요소와 props 객체의 불필요한 사용을 피할 수 있습니다.
먼저, /api/robots 엔드포인트를 처리할 API 라우트를 생성하세요:
// /pages/api/robots
export default function handler(req, res) {
res.send('XXX'); // 여기에 `robots.txt` 내용을 보내세요
}다음으로, Next.js 구성 파일인 next.config.js를 업데이트하여 /robots.txt 요청을 API 라우트로 변경하세요:
// next.config.js
module.exports = {
// ...
async rewrites() {
return [
{
source: '/robots.txt',
destination: '/api/robots'
}
];
}
}결론
위에서 설명한 두 가지 접근 방식 모두 Next.js 앱에서 동적 robots.txt 파일을 제공할 수 있습니다. getServerSideProps 또는 API 라우트 사용의 선택은 특정 요구 사항과 선호도에 따라 결정됩니다.
이러한 단계를 따라하면 Next.js 앱에서 요청에 동적으로 응답하는 robots.txt 파일을 쉽게 생성할 수 있습니다.
검색 엔진이 웹 사이트를 효과적으로 크롤링하고 색인화할 수 있도록 robots.txt 파일에서 크롤링 지침을 올바르게 처리하는 것이 중요하다는 점을 기억하세요.
이러한 방법을 실험하고 프로젝트의 요구 사항에 맞게 수정해보세요. 즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/67387483/generating-a-dynamic-robots-txt-file-in-a-next-js-app
같은 카테고리의 다른 글 보기 :
