In my Next.js application, I have defined global styles in the file /styles/globals.css and imported them in _app.tsx.
// import default style
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
The page is located in the pages directory (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>
</>
);
};
While everything works fine when running the application with next dev, including loading styles and calling getServerSideProps, issues arise in production mode (
next build && NODE_ENV=production ts-node src/server.ts_app file is also not utilized. Is it not possible to use global styles in pages that have getServerSideProps exported? I couldn't find any information about this in the Next.js documentation. Am I overlooking something?
Here's a snippet of my custom server:
(async () => {
try {
const expressServer = express();
await app.prepare();
// Custom routes defined (e.g., /facility) that do not interfere with styles.
// Error middleware should 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);
}
})();