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

Question

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

这就是我决定选择 getServerSideProps

的原因

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

If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

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

在 context 参数中，我们有 req 和 res 对象。

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

例如：

www.mydomain.com 应该渲染生产 robots.txt 文件
test.mydomain.com 应该呈现一个测试 robots.txt 文件（我将在 test/staging 部署中使用）。

这是我当前的代码：

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({                // 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 要求我从该页面导出一个组件。而且还需要 returns 来自 getServerSideProps 的 props: {} 对象。

去这里的路是什么？我基本上是使用 getServerSideProps 中的 req,res 来返回不是页面的内容。这是反模式吗？

更新

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

Answer 1

您可以在 Next.js 配置文件中使用 API route instead for the logic and have a rewrite 映射 /robots.txt 请求到 /api/robots。

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

// /pages/api/robots
export default function handler(req, res) {
    res.send('XXX'); // Send your `robots.txt content here
}

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

Generating a dynamic /robots.txt file in a Next.js app

robots.txt

reactjs

next.js