使用 nextjs 将当前构建时间嵌入到 humans.txt 文件中

Question

将 humans.txt 文件放入 nextjs 的 /public 文件夹对于静态文件来说效果很好。

但是我想用最新页面构建的日期来注释文件（当调用 next build 时）。所以我创建了 pages/humans.txt.tsx 来呈现一个字符串，其中还包含构建时间静态日期：

export default function Test({ buildTime }) {
  return `Hello ${buildTime}`
}

export async function getStaticProps() {
  return {
    props: {
      buildTime: new Date().toISOString()
    }
  }
}

我尝试自定义 pages/_document.js，但即使所有内容都被剥离（用于测试），它仍然呈现文档类型和一个 div，其中包含我的文本。

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    ctx.renderPage = (props) => {
      return {
        html: "text",
        head: null,
      }
    }
    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }
  render() {
    return <Main/>
  }
}

输出：

<!DOCTYPE html><div id="__next">text</div>

从我的文档 render 而不是 <Main/> 中仅返回字符串仍然呈现文档类型并且还会导致警告，因为 render 应该 return 和 Element.

所以我没有主意，可能会求助于在 package.json prebuild: sed ./pages/humans.txt... 中使用预构建脚本来用系统日期替换文件中的标记并将其通过管道传输到 public/humans.txt .

Answer 1

这是一个有趣的运行时替代方案：

将`/humans.txt`重写为`/api/humans`

您可以使用以下规则：

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

检查重写文档 here

写作`/api/humans`

现在您可以在 API 中使用任何回复。但是，请确保您正在缓存它：

// /pages/api/humans.js
export default function handler(req, res) {
  res.setHeader('Cache-control', 's-maxage=6000, stale-while-revalidate=30')
  res.setHeader('Content-type', 'text/plain')
  res.status(200).end('example')
}

检查 API 路由文档 here

使用 nextjs 将当前构建时间嵌入到 humans.txt 文件中

Embed current build time into humans.txt file with nextjs

next.js

vercel

将`/humans.txt`重写为`/api/humans`

写作`/api/humans`

使用 nextjs 将当前构建时间嵌入到 humans.txt 文件中

Embed current build time into humans.txt file with nextjs

next.js

vercel

将/humans.txt重写为/api/humans

写作/api/humans

将`/humans.txt`重写为`/api/humans`

写作`/api/humans`