Next.js - Global CSS Support

Next.js provides support for global CSS stylesheets, allowing you to define styles that apply to all pages within your application.
Global CSS can be used to set common styles such as fonts, colors, and layout preferences across your entire website.

1. Adding Global CSS Files

To add global CSS files to your Next.js project, follow these steps:

Create a styles directory in the root of your project.
Place your global CSS files (e.g., global.css) inside the styles directory.
Import your global CSS files in the _app.js file using import '../styles/global.css';

2. CSS Module Support

Next.js also supports CSS modules, which allow you to scope CSS locally to individual components. This helps prevent style conflicts and encourages modularity.

3. Applying Global Styles

To apply global styles to your Next.js application, use the <style> element within the <Head> component from the next/head module.

For example:

<Head>
    <style>
        {`
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f0f0f0;
            }
        `}
    </style>
</Head>

4. Example

Here's an example of how to create and apply global CSS styles in a Next.js project:

Create a global.css file in the styles directory:

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Import the global CSS file in the _app.js file:

import '../styles/global.css';

Now, you can use the styles defined in global.css throughout your Next.js application.

Conclusion

Global CSS support in Next.js allows you to define common styles that apply to all pages within your application. Whether you're setting fonts, colors, or layout preferences, global CSS provides a convenient way to maintain consistency and enhance the visual appeal of your website.

Archive