When I attempted to set up a nextjs+typescript app using the command npx create-next-app@latest --ts, all the installations went smoothly. However, upon running the dev function, I encountered an error related to Global CSS.
error - ../../../#Typescript/NextJsTS/ts-next/styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-globalLocation: ..\..\..\#Typescript\NextJsTS\ts-next\pages\_app.tsx
Here is the structure of my folders-
•pages
•api
•_app.tsx
•index.tsx
•styles
•globals.css
•Home.module.css
The content of my _app.tsx file is as follows-
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
I attempted to comment out the import of global.css but that led to another error. Check the error screenshot here.