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

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

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

我的目标是用户“不经常可见”，但可以在某个地方找到它，例如确认已部署哪个版本。 我想到了这些选择：

添加一个
    <meta version="1.2.3">
  • ，
    但似乎没有版本号的“有效”元标记。

    添加评论，如
    • <!-- v1.2.3 -->
  • ，
    但似乎没有干净的方法在 Next.js 中添加注释。

    在某处添加一些看不见的
    • <div>
  • ，
    但这对我来说似乎非常“hacky”/“肮脏”。

next.js versioning
3个回答
3
投票

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

  2. 
    
    3. 




      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        


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



将版本号添加到 Next.js 页面属性中。
    

  1. 将版本号添加到 redux 存储中。
    2. 

  2. 注意：有一个 RFC 可以
    3. 添加 RawHTML 组件
  3. 。


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


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
package.json
 中的版本号包含到 Next.js 应用程序中，您可以利用 
next.config.js
 配置文件将该版本公开为环境变量。此方法可确保仅向客户端公开版本号，从而避免因公开整个 
package.json
 文件而出现任何潜在的安全问题。
具体操作方法如下：




    修改您的
  1.  next.config.js：打开 Next.js 项目根目录下的 
    next.config.js
     文件并添加以下代码。此代码从您的 
    package.json
     读取版本并将其分配给名为 
    APP_VERSION
     的环境变量。
    

    2. // next.config.js
const packageJson = require('./package.json');

module.exports = {
  env: {
    APP_VERSION: packageJson.version,
  },
};



    访问应用程序中的环境变量：
  1. 您现在可以使用process.env.APP_VERSION在 Next.js 应用程序中的任何位置访问您的应用程序版本。例如，您可以在组件中显示版本号，如下所示：
    

    2. // In a component, page or layout
const MyAppVersionComponent = () => {
  return <div>App Version: {process.env.APP_VERSION}</div>;
};



为什么使用这个方法？



    安全性：
  • 通过不将整个package.json直接导入到其中，可以防止敏感信息的潜在暴露
您的客户端代码。

    • 简单：
  • 它利用 Next.js 对环境变量的内置支持，使其易于实现。

    • 性能：
  •  获取版本号没有运行时开销，因为它嵌入在构建时环境中
变量。


    • 当您需要在 UI 中显示应用程序的当前版本或以安全高效的方式将版本号用于任何其他客户端逻辑时，此方法非常理想。

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.