在 Next.js 应用程序中生成动态/robots.txt 文件 [英] Generating a dynamic /robots.txt file in a Next.js app

问题描述

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

这就是我决定使用 getServerSideProps

的原因

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

例如:

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

这是我当前的代码:

pages/robots.txt.tsx

从react"导入反应；从下一个"导入 { GetServerSideProps }；界面机器人{ENV:测试"|产品"}export const getServerSideProps : GetServerSideProps<Robots>=异步(上下文)=>{const { req, res } = 上下文；常量 { 主机 } = req.headers;res.write(XXX");重发();return({//这是不必要的(但 Next.js 要求它在这里)道具: {ENV:测试"}});};const 机器人:React.FC<Robots>=(道具)=>{//这也是不必要的(但 Next.js 要求它在这里)console.log("渲染机器人...");返回(
我是机器人</div>);};导出默认机器人；//这也是不必要的(但 Next.js 要求它在这里).

它似乎正在工作:

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

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

更新

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

解决方案

您可以使用 APIroute 代替逻辑并有一个 rewrite 将 /robots.txt 请求映射到 Next.js 配置文件中的 /api/robots.

//next.config.js模块.exports = {//...异步重写(){返回 [{来源:'/robots.txt',目的地:'/api/机器人'}];}}

I need a way to answer dynamically to the /robots.txt request.

And that's why I've decided to go with 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
  }
}

Inside the context parameter we have the req and res objects.

The response for the robots.txt will depend on the req.headers.host value.

For example:

• www.mydomain.com should render a production robots.txt file
• test.mydomain.com should render a test robots.txt file (that I'll use on test/staging deployments).

This is my current code:

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).

It seems to be working:

But the weird part is that Next.js demands me to export a component from that page. And also returns a props: {} object from getServerSideProps is also required.

What is the way to go here? I'm basically using req,res from getServerSideProps to returning something that is not a page. Is this an anti-pattern?

UPDATE

Yes, this is an anti-pattern. You should use rewrites. See the selected answer.

解决方案

You can use an API route instead for the logic and have a rewrite map /robots.txt requests to /api/robots in your Next.js config file.

// next.config.js

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

这篇关于在 Next.js 应用程序中生成动态/robots.txt 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！