import css file in next js

To import a CSS file in Next.js, you can follow these steps:

  1. Create a CSS file: First, create a CSS file with the desired styles. You can name it whatever you like, for example, "styles.css".

  2. Import the CSS file: In your Next.js component file (e.g., a React component), import the CSS file using the import statement. Write the following line at the top of your component file:

import styles from './styles.css';

Make sure to adjust the file path if your CSS file is located in a different directory.

  1. Apply the styles: Now, you can apply the styles to the desired elements in your component using the className attribute. For example:
<div className={styles.container}>
  <h1 className={styles.title}>Hello, Next.js!</h1>
  <p className={styles.description}>This is a CSS example in Next.js</p>
</div>

In this example, the styles.container, styles.title, and styles.description are CSS classes defined in the imported CSS file. You can use these classes to style the respective elements.

  1. Enable CSS modules (optional): By default, Next.js uses CSS modules, which means that each CSS file is scoped to its respective component. This prevents CSS class name conflicts between different components. If you want to disable CSS modules, you can do so by creating a "next.config.js" file in the root of your Next.js project and adding the following configuration:
module.exports = {
  cssModules: false
};

That's it! Now you have successfully imported and applied a CSS file in Next.js. Remember to adjust the CSS file and class names according to your needs.