我在/styles/globals.css内的nextjs应用程序中定义了全局样式，并将其导入到_app.tsx中
// import default style
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;并在pages目录（pages/index.tsx）中分页
export async function getServerSideProps({req, res }) {
// Some fetch here
return {
props: {
someProps: objectFromFetchThere,
},
};
}
const Home: NextPage<{ someProps: SomeProps[] }> = ({ someProps }) => {
return (
<>
<Head>
<title>Home page</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Layout>
// More code here
</Layout>
</>
);
};当我使用next dev运行应用程序时，一切都正常（加载样式，调用getServerSideProps等），但当我在生产中运行时（next build && NODE_ENV=production ts-node src/server.ts），则不加载全局样式（_app文件也没有使用）。这是否意味着我不能在导出了getServerSideProps的页面中使用全局样式？我没有'我在NextJS文档中找不到任何相关的东西，我是不是漏掉了什么？
我的自定义服务器：
(async () => {
try {
const expressServer = express();
await app.prepare();
// Some custom routes defined over there like /facility - nothing that can overlap with styles.
// Error middleware has to be used after other custom routes
expressServer.use(
(err: Error, req: Request, res: Response, next: NextFunction) => {
console.error(err.stack);
res.status(500).send("Unexpected error occurred.");
}
);
expressServer.all("*", async (req: Request, res: Response) => {
try {
await handle(req, res);
} catch (e) {
console.error("Error occurred handling", req.url, e);
res.statusCode = 500;
res.end("internal server error");
}
});
expressServer.listen(port, (err?: any) => {
if (err) throw err;
console.log(
`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`
);
});
} catch (e) {
console.error(e);
process.exit(1);
}
})();
1条答案
按热度按时间rta7y2nd1#
此问题与同时使用的自定义服务器和 typescript 有关。将
"target": "es5"更改为"target": "es6"解决了此问题。解决方案取自https://stackoverflow.com/a/67520930/7932025。