Question

How to import global css in next js

Answer 1

To import global CSS in Next.js, create a CSS file and import it into the pages/_app.js file using ES6 import syntax. This will apply the CSS to all pages in your app, and you must do this inside the custom App component because Next.js only supports global CSS imports in this component.

Step-by-step explanation:

To import global CSS in Next.js, you typically need to use a custom App component. Next.js has a specific way of handling global styles due to its server-side rendering feature. The common approach is to import your global CSS file inside the pages/_app.js file, which is used to initialize pages. It is important to note that Next.js does not allow importing global CSS anywhere other than your App component. Here's how you can do it:

1. 
   
3. Create a CSS file, e.g., styles.css, and place it in a folder like styles or directly in the root of your project.
4. 
   
6. Open the pages/_app.js file and import the CSS file at the top of the file, just before the App component definition, using standard ES6 import syntax:

import '../styles/styles.css';
function MyApp({ Component, pageProps }) {
return
}
export default MyApp;

This code will apply the styles from your styles.css to all pages in your Next.js app. Remember, global CSS can only be imported this way in the App component, and not inside individual components or pages.