Скачать или смотреть How to Effectively Use a CSS Class from a Global CSS File in Next.js

A concise guide on how to use CSS classes defined in a global CSS file in Next.js applications. Enhance your development experience with practical tips and solutions.
---
This video is based on the question https://stackoverflow.com/q/65382070/ asked by the user 'm4tt' ( https://stackoverflow.com/u/4667153/ ) and on the answer https://stackoverflow.com/a/65382103/ provided by the user 'xom9ikk' ( https://stackoverflow.com/u/7920683/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to use css class from global css file declared inside _app.js (Next.js)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Effectively Use a CSS Class from a Global CSS File in Next.js

Next.js is a powerful framework for building React applications, but it can sometimes lead to confusion, especially when it comes to working with styles. If you’ve ever faced the problem of trying to use a CSS class declared in a global CSS file from _app.js, you’re definitely not alone.

In this guide, we will streamline your understanding of how to incorporate global styles and address a common error that arises when using these classes in your components.

Understanding the Problem

When building a Next.js application, the usual practice is to import a global CSS file into the _app.js file like this:

[[See Video to Reveal this Text or Code Snippet]]

This should theoretically allow you to use any CSS class defined in styles.css throughout your application. However, you might encounter errors when trying to use a class in a component, such as header.js, as demonstrated below:

[[See Video to Reveal this Text or Code Snippet]]

If you receive an error indicating that the class doesn’t exist, it can be incredibly frustrating. So, what’s going wrong here?

The Solution

The core of the problem lies in how you assign the CSS class in your component. Instead of referencing the class as a variable (like buttonPrimary), you should use it as a string. This is a simple fix and will ensure that your bundler correctly applies the styles.

Step-by-Step Fix

Change the Way You Set the Class:
Instead of trying to set className={buttonPrimary}, you should directly assign the class name as a string.

[[See Video to Reveal this Text or Code Snippet]]

How It Works:

By using className="buttonPrimary", you’re explicitly telling React to render that particular class.

When your application is bundled, Next.js takes care of linking the global CSS file, ensuring that your styles are applied correctly.

The Result

When using the correct approach, your React component will render the HTML as follows:

[[See Video to Reveal this Text or Code Snippet]]

This output confirms that the class has been successfully applied to the anchor element.

Conclusion

Using global CSS in Next.js does not have to be complicated. By understanding how to properly reference your CSS classes, you can avoid common pitfalls and streamline your development process. Always remember to use class names as strings in your component JSX to ensure styles are applied correctly.

With this knowledge, you’re well on your way to mastering styles in Next.js! Happy coding!