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 thestyles
directory. - Import your global CSS files in the
_app.js
file usingimport '../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.
Comments
Post a Comment