如何在 React 或 Next 应用程序中显示应用程序版本和上次更新的日期时间？

【问题标题】：How to show the app version and last updated datetime in a React or Next app?如何在 React 或 Next 应用程序中显示应用程序版本和上次更新的日期时间？
【发布时间】：2021-11-27 06:07:28
【问题描述】：

我使用 Github Actions 构建了我的 React/Next 应用程序。在工作流程中，我设置了一个自动化系统来确定下一个发布版本。它会创建一个包含版本的.version 文件和一个包含构建日期和时间的.last-updated 文件。

现在我如何在我的应用程序中使用这些文件并显示所需的信息，或者是否有更好的方法来做这样的事情？

我想要 Notion 之类的东西：

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

好的。所以我想通了。

在next.config.js 中，添加以下配置：

const fs = require("fs");

const version = fs.readFileSync("./.version", "utf8");
const lastUpdatedAt = fs.readFileSync("./.last-updated", "utf8");

module.exports = {
  ...
  env: {
    NEXT_PUBLIC_PACKAGE_VERSION: version,
    NEXT_PUBLIC_LAST_UPDATED_AT: lastUpdatedAt,
  },
};

注意：对于公共环境变量，请在它们前面加上 NEXT_PUBLIC_。

然后在您的 JSX 模板中，像这样使用

<p>Version: {process.env.NEXT_PUBLIC_PACKAGE_VERSION || "-"}</p>
<p>Last Updated At: {process.env.NEXT_PUBLIC_LAST_UPDATED_AT || "-"}</p>

【讨论】：