next.js 获取 api response.text 无法在网页中渲染答案

【问题标题】：next.js fetch api response.text unable to get it renderend in webpagenext.js 获取 api response.text 无法在网页中渲染
【发布时间】：2021-10-21 06:49:34
【问题描述】：

我编写此代码来备份 sbc 会话边界控制器

代码运行良好，这是 concole.log 的输出结果。

问题是响应是一个 tekst/ini 文件对象并且以某种方式无法在我的网页中显示（结果）

希望任何人都可以调整我的代码

下面是我使用的代码

/////////////////// api scrip audiocodes
import styles from '/styles/Home.module.css' 

export const getStaticProps = async () => {
  var myHeaders = new Headers();
  myHeaders.append("Authorization", "Basic password");
  
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  
  
  const response = await fetch("http://10.0.5.26/api/v1/files/ini", requestOptions);
  const result = await response.text();
  
  return {
      props: { result }
  }
  }
  ////////////////   start website
  const Backup = () => {
    
  



return (
    <div>
      <h1 className={styles.title}>
          refresh <a href="index1">{ result }</a>
        </h1>
      
    </div>
  );
} 
export default Backup;

;**************
;** Ini File **
;**************

;Time & Date: 19/08/2021 15:18:42
;Device Up Time: 52d:3h:43m:21s
;Board: UNIVERGE BX9000
;Board Type: 72
;Serial Number: 9107130
;Software Version: 7.20A.256.721
;DSP Software Version: 5014AE3_R => 723.06
;Board IP Address: 0.0.0.0
;Board Subnet Mask: 255.255.255.0
;Board Default Gateway: 0.0.0.
;CPU: Cavium Networks Octeon V0.1 @ 500Mhz, total 2 cores, 2 cpus, 1 sockets
;Cores mapping:
;core #0, on cpu #0, on socket #0
;core #1, on cpu #1, on socket #0
;Memory: 512 MB
;Flash size: 64 MB
;Num of DSP Cores: 3
;Num of physical LAN ports: 12
;Client defaults file is being used (file length=1573)
;;;Key features:;Board Type: 72 ;IP Media: VXML ;DATA features: FireWall&VPN ;PSTN Protocols: ISDN IUA=2 CAS ;Security: IPSEC MediaEncryption StrongEncryption EncryptControlProtocol ;Channel Type: RTP DspCh=150 ;HA ;Coders: G723 G729 GSM-FR G727 G722 ;DSP Voice features: IpmDetector ;Control Protocols: MSFT FEU=50 SIP SBC=25 ;Default features:;Coders: G711 G726;

;-----  HW components -----
;
; Slot # : Module type : # of ports
;----------------------------------------------
;      1 : Empty
;      2 : Empty
;      3 : Empty
;----------------------------------------------

截图

[![next.js 中的错误][1]][1] [1]：https://i.stack.imgur.com/lfRCw.png

我在 node.js 中使用的这个 javascript 运行良好，但不知何故我不能让它在 next.js 中工作

///audiocodes api get ini file from sbc
const options = {
  'method': 'GET',
  'url': 'http://10.0.5.26/api/v1/files/ini',
  'headers': {
    'Authorization': 'Basic password'
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
  fs.writeFileSync('board.ini', (response.body));
  
});

【问题讨论】：

标签： javascript html node.js reactjs next.js

【解决方案1】：

这是一个很常见的问题。删除.then().then() 语法并转到async/await。

const response = await fetch("http://10.0.5.26/api/v1/files/ini", requestOptions);
const result = await response.text();

return {
    props: { result }
}

【讨论】：

不幸的是仍然有错误 Server Error ReferenceError: result is not defined 生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。源 .next\server\pages\test2.js (32:37) @ 备份 30 |
31 |
> 32 |刷新 { result.result } | ^ 33 |
34 | 35 |

【解决方案2】：

问题解决的好代码在下面

/////////////////// api scrip audiocodes
import styles from '/styles/Home.module.css' 
import Head from 'next/head'
const fs = require('fs');

export const getStaticProps = async () => {
  var myHeaders = new Headers();
  myHeaders.append("Authorization", "Basic password");
  
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  
  
  const response = await fetch("http://1.1.1.1/api/v1/files/ini", requestOptions);
  const result = await response.text();
 console.log(result);
 fs.writeFileSync('board.ini', (result));
 
  
  return {
      props: { 
        result, 
      }
  }
  }
  ////////////////   start website
  const Backup = ({result}) => {
    
return (
  <div>
      
  <Head>
    <title>Api</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" />
  </Head>
  <h1 className={styles.title}>
      <a href="">configuration</a>
    </h1>
  

      <p className={styles.description}>
      Description:{' '}
      <code className={styles.code}>backup wordt gemaakt</code>
    </p>

</div>
  );
} 
export default Backup;

【讨论】：

> 32 |刷新 { result.result } | ^ 33 |