如何在next.js应用中添加应用版本信息(在客户端中可用)？

fzsnzjdm 于 2024-01-07 发布在其他

关注(0)|答案(2)|浏览(97)

我如何（我应该）将一些版本信息作为“Meta数据”添加到我的Next.js应用程序中，以便它可以从浏览器中访问？
我的目标是，它不是经常可见的用户，但可以找到的地方，例如，以确认哪个版本已部署。
我想到了这些选择：

添加一个<meta version="1.2.3">，

但是似乎没有用于版本号的“有效”Meta标记。

添加一个类似的注解，

但似乎没有干净的方式来添加注解在Next.js。

在某处添加一些不可见的<div>，

但我觉得这很“低俗”/“下流”

next.js

来源：https://stackoverflow.com/questions/72488247/how-to-add-app-version-info-in-next-js-app-available-in-client

2条答案

按热度按时间

ufj5ltwl1#

我想到了几个选择：
1.将其作为data-attribute添加到应用程序的根目录，如果您愿意，甚至可以将其添加到<html>或<body>。
1.将其添加到全局窗口对象中，以便通过JS访问。类似于`window.appVersion =“1.2.3”

赞(0）回复(0）举报 2024-01-07

dojqjjoe2#

我仍然没有找到一个完美的解决方案，但这里有一些更多的信息/想法：

（我确实意识到这本质上也只是“将其添加到窗口对象”，正如Olavi建议的那样）*

1.将版本号添加到Next.js页面 prop 中。
1.将版本号添加到redux商店。
1.注意：有一个add a RawHTML Component的RFC。

1.在Next.js页面 prop 中添加版本号

我在Next.js页面的props中添加了一个属性appVersion。这样我就可以从浏览器控制台读取版本号：

window.__NEXT_DATA__.props.pageProps.appVersion

字符串

示例：

我从package.json中获取版本号，并将其传递给Next.js页面 prop ：
package.json

"version": "1.2.3",

型
next.config.js:的

const nextConfig = {
    serverRuntimeConfig: {
        appVersion:   process.env.npm_package_version || '',
    },
}

型
.getStaticProps():的

import getConfig from 'next/config';
const { serverRuntimeConfig = {} } = getConfig() || {};

export const getStaticProps = function(){
    return {
        props: {
            appVersion: serverRuntimeConfig.appVersion || '',
        },
    };
};

型

2.将版本号添加到redux store

将版本号添加到redux存储中，例如state.app.appVersion，然后您可以稍后从浏览器控制台读取它：

window.__NEXT_REDUX_STORE__.getState().app.appVersion

型

赞(0）回复(0）举报 2024-01-07

我来回答

如何在next.js应用中添加应用版本信息(在客户端中可用)？

2条答案

1.在Next.js页面 prop 中添加版本号

示例：

2.将版本号添加到redux store

相关问题

热门标签

最新问答