60 如何根据环境参数实现导入不同文件(import)
我在写一个 NextJS 项目，开发环境和生产环境需要导入不同的文件，如何能写一个文件，根据环境参数，导入对应的文件？
比如，
当process.env.NEXT_PUBLIC_TESTNET === 'true',
代码中实现import { XXX, XXX } from '../generated_dev'；
而当process.env.NEXT_PUBLIC_TESTNET === 'false'，
代码中则import { XXX, XXX } from '../generated'.
最佳答案 2024-11-21 14:19
步骤 1: 设置环境变量
# .env.local (用于开发环境)
NEXT_PUBLIC_TESTNET=true
# .env.production (用于生产环境)
NEXT_PUBLIC_TESTNET=false
步骤 2: 动态导入文件
import { useEffect, useState } from 'react';
const MyComponent = () => {
const [module, setModule] = useState(null);
useEffect(() => {
const loadModule = async () => {
let importedModule;
if (process.env.NEXT_PUBLIC_TESTNET === 'true') {
importedModule = await import('../generated_dev');
} else {
importedModule = await import('../generated');
}
setModule(importedModule);
};
loadModule();
}, []);
if (!module) {
return <div>Loading...</div>;
}
const { XXX, YYY } = module;
return (
<div>
<XXX />
<YYY />
</div>
);
};
export default MyComponent;
