Next.js中Fetch API获取的SBC text/ini格式响应无法在网页渲染的问题求助

Let's break down what's going wrong with your code and fix it step by step:

What's Causing the Issue? #

You've got two main problems preventing the INI content from rendering correctly:

• Your component isn't receiving the result prop from getStaticProps—when you try to reference result in the JSX, it's undefined (which matches the error in your screenshot).
• Putting raw INI text inside an <a> tag is a poor fit—this element isn't designed for displaying formatted multi-line text, so all line breaks and indentation get lost, making the config unreadable.

Fixed Full Code #

import styles from '/styles/Home.module.css'

export const getStaticProps = async () => {
  const myHeaders = new Headers();
  myHeaders.append("Authorization", "Basic password");
  const 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 } }
}

// Destructure the result prop directly in the component parameters
const Backup = ({ result }) => {
  return (
    <div>
      <h1 className={styles.title}>SBC Configuration Backup</h1>
      {/* Use <pre> to preserve the INI's original formatting (line breaks, spacing) */}
      <pre className={styles.configDisplay}>{result}</pre>
      {/* Separate refresh link from the config content for usability */}
      <a href="/" className={styles.refreshLink}>Refresh Config</a>
    </div>
  );
}

export default Backup;

Key Changes Explained #

1. Receive the Prop: By adding { result } to the Backup component's parameters, we're pulling the INI text from the props passed by getStaticProps—this fixes the "result is not defined" error.
2. Use <pre> for Formatted Text: The <pre> element preserves all whitespace and line breaks exactly as they appear in the INI file, which is ideal for displaying configuration content.
3. Separate Refresh Link: I moved the refresh link outside the config text so it functions as a proper, clickable element instead of trying to turn your entire config into a hyperlink.

Optional Style Improvements (Add to Home.module.css) #

To make the config easier to read, add these styles:

.configDisplay {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap; /* Wrap long lines on small screens */
}

.refreshLink {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: #0071e3;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}

.refreshLink:hover {
  background-color: #005bb5;
}

Quick Notes #

• If you need real-time config updates (instead of static generation at build time), swap getStaticProps with getServerSideProps—this will fetch the config on every page request.
• For security, avoid hardcoding credentials in your code—use Next.js environment variables instead for the Authorization header.

内容的提问来源于stack exchange，提问作者clones