在 Next.js 应用程序中生成动态 /robots.txt 文件

IT技术 reactjs next.js robots.txt
2021-05-23 18:12:33

我需要一种动态/robots.txt响应请求的方法。

这就是为什么我决定和 getServerSideProps

https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

如果您从页面导出名为 getServerSideProps 的异步函数,Next.js 将使用 getServerSideProps 返回的数据在每个请求上预渲染此页面。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

context参数中,我们有reqres对象。

在此处输入图片说明

的响应robots.txt将取决于req.headers.host值。

例如:

  • www.mydomain.com应该呈现一个生产robots.txt文件
  • test.mydomain.com应该呈现一个测试robots.txt文件(我将在测试/暂存部署中使用)。

这是我当前的代码:

页面/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({                // This is unnecessary (but Next.js requires it to be here)
    props: {
      ENV: "TEST"
    }
  });
};

const Robots: React.FC<Robots> = (props) => {  // This is also unnecessary (but Next.js requires it to be here)
  console.log("Rendering Robots...");

  return(
    <div>
      I am Robots 
    </div>
  );
};

export default Robots;  // This is also unnecessary (but Next.js requires it to be here).

它似乎有效:

在此处输入图片说明

但奇怪的是,它Next.js要求我从该页面导出一个组件。并且还需要返回一个props: {}对象getServerSideProps

去这里的路是什么?我基本上使用req,resfromgetServerSideProps来返回不是页面的内容。这是一种反模式吗?

更新

是的,这是一种反模式。你应该使用rewrites. 查看所选答案。

1个回答

您可以使用API 路由代替逻辑,并在 Next.js 配置文件中重写映射/robots.txt请求/api/robots

// next.config.js

module.exports = {
    // ...
    async rewrites() {
        return [
            {
                source: '/robots.txt',
                destination: '/api/robots'
            }
        ];
    }
}