Currently, I am working on a project in Reactjs with Nextjs. To add CSS to my project, I have stored my CSS files in the 'styles' folder. In order to include them, I created a file called '_document.js' and implemented the following code. However, I am facing an issue where the CSS file is not loading. Can someone help me identify the mistake in my approach? Below is the code snippet from '_document.js':
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<link
rel="stylesheet"
href="../styles/css/style.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}