NextJs - React Framework - Global CSS Imports

Screenshot from the tutorial

Next.js and Global CSS Imports: A Quick Guide

Next.js is a powerful React framework that streamlines the process of building server-side rendered applications. One of the foundational aspects of any web application is its styling. In this blog post, we will explore how to effectively use Global CSS imports in Next.js, based on the insights from the YouTube video "NextJs - React Framework - Global CSS Imports."

What is Global CSS?

Global CSS refers to styles that are applied universally across your application. Unlike component-scoped styles, which are limited to specific components, global styles affect all elements. This is particularly useful for setting base styles, typography, and layouts that should be consistent throughout your app.

Setting Up a Next.js Project

Before diving into Global CSS imports, let's ensure you have a basic Next.js setup. If you haven't created a Next.js app yet, you can do so with the following command:

npx create-next-app my-next-app
cd my-next-app

This command sets up a new Next.js project named my-next-app and navigates into the project directory.

Creating Global CSS File

Next, you need to create a CSS file that will contain your global styles. By convention, this file is usually named globals.css. You can create this file in the styles directory of your Next.js application.

mkdir styles
touch styles/globals.css

Open the globals.css file and add some basic styles:

/* styles/globals.css */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    line-height: 1.6;
}

Importing Global CSS in Next.js

To apply these global styles, you need to import the globals.css file into your Next.js application. This should be done in the custom _app.js file located in the pages directory. If this file doesn't exist, you can create it.

touch pages/_app.js

Now, open the _app.js file and import your global CSS:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

export default MyApp;

Explanation

• Importing the CSS: The line import '../styles/globals.css'; imports your global styles so they can be applied throughout the application.
• MyApp Component: This component is a custom App component that wraps all pages in your Next.js application. By including global styles here, you ensure they are applied universally.

Verifying Global Styles

Once you have set up the global styles and imported them, it's time to verify that everything is working as expected. You can run your application using the following command:

npm run dev

Next, navigate to http://localhost:3000 in your web browser. You should see the styles applied to your application, confirming that your global CSS import is successful.

Best Practices for Global CSS

While global CSS is useful, it's essential to keep some best practices in mind:

1. Limit Global Styles: Use global styles sparingly. Overusing them can lead to conflicts and make it harder to manage component-specific styles.

2. Use CSS Modules for Component Styles: For styles that are specific to components, consider using CSS Modules. This approach scopes styles to the component level, reducing potential clashes.

3. Organize Styles Logically: Maintain a clear structure for your stylesheets. Group related styles together and consider using subdirectories for larger projects.

4. Optimize Performance: Minimize the size of your global CSS file by removing unused styles and leveraging tools like PurgeCSS.

Conclusion

Global CSS imports in Next.js provide a straightforward way to apply universal styles across your application. By following the steps outlined in this tutorial, you can easily integrate global styles into your Next.js project. Remember to balance global and component-specific styles for a maintainable and efficient codebase.

For more advanced styling techniques, consider exploring CSS-in-JS libraries such as styled-components or emotion, which offer additional flexibility and capabilities for styling your Next.js applications.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios