如何在next.js应用程序中添加应用程序版本信息（在客户端可用）？

问题描述 投票：0回答：2

我如何（应该）将一些版本信息作为“元数据”添加到我的 Next.js 应用程序中，以便可以从浏览器中使用它？

我的目标是用户不会经常看到它，但可以在某个地方找到它，例如确认已部署哪个版本。

我想到了这些选择：

  • 添加一个
    <meta version="1.2.3">
    ，
    但似乎没有版本号的“有效”元标记。
  • 添加评论，如
    <!-- v1.2.3 -->
    ，
    但似乎没有干净的方法在 Next.js 中添加注释。
  • 在某处添加一些看不见的
    <div>
    ，
    但这对我来说似乎非常“hacky”/“肮脏”。
next.js versioning
2个回答
3
投票

我想到了几个选择：

  1. 将其作为数据属性添加到应用程序的根目录，如果您愿意，甚至可以添加 
    <html>
    或 
    <body>
    。看起来像
    <html data-app-version="1.2.3">
  2. 将其添加到全局窗口对象中，以便可以通过JS访问。类似于`window.appVersion =“1.2.3”
2
投票

我仍然没有找到完美的解决方案，但这里有一些更多信息/想法：
（我确实意识到这本质上也只是“将其添加到窗口对象”，正如 Olavi 建议的那样）

  1. 将版本号添加到 Next.js 页面属性中。
  2. 将版本号添加到 redux 存储中。
  3. 注意：有一个 RFC 可以添加 RawHTML 组件。

1.将版本号添加到 Next.js 页面 props

我在 Next.js 页面 props 中添加了一个属性 

appVersion
。这样我就可以从浏览器控制台读取版本号：

window.__NEXT_DATA__.props.pageProps.appVersion

示例：

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

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
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.