Next.js 返回 500 : internal server error in Production

Question

创建了一个 next.js 全栈应用程序。生产构建完成后，当我下次运行时它返回 500:内部服务器。我正在使用环境变量来访问 api。

env.development file

BASE_URL=http://localhost:3000

它在开发中运行良好服务.ts

import axios from 'axios';
const axiosDefaultConfig = {
  baseURL: process.env.BASE_URL, // is this line reason for error?
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
};
const axio = axios.create(axiosDefaultConfig);

export class Steam {
  static getGames = async () => {
    return await axio.get('/api/getAppList');
  };
}

Answer 1

你有 next.config.js 文件吗？

要将运行时配置添加到您的应用，请打开 next.config.js 并添加 publicRuntimeConfig 和 serverRuntimeConfig 配置:

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

要访问应用程序中的运行时配置，请使用 next/config，如下所示:

import getConfig from 'next/config'

// Only holds serverRuntimeConfig and publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Will only be available on the server-side
console.log(serverRuntimeConfig.mySecret)
// Will be available on both server-side and client-side
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} alt="logo" />
    </div>
  )
}

export default MyImage

希望对您有所帮助。