وحدات CSS والتنسيقات العامة

Welcome to styling in Next.js! Creating visually appealing and user-friendly interfaces is crucial for any web application.

Next.js offers powerful and flexible ways to manage your styles, from simple global stylesheets to component-specific solutions. In this lesson, we'll explore two fundamental methods: CSS Modules and Global Styles.

In traditional web development, all CSS styles are often global. This can lead to issues:

• Naming Conflicts: Two different parts of your application might use the same class name, causing unintended style overrides.
• Maintenance Headaches: Changing a style in one place might accidentally break the layout or appearance elsewhere.
• Lack of Isolation: Styles aren't tied directly to the components they affect, making it harder to understand and manage them.

CSS Modules were created to solve these problems!

CSS Modules are a way to locally scope CSS by automatically creating unique class names. This means that styles defined in one CSS Module file will only apply to the component that imports it.

Key benefits:

• No Conflicts: Unique class names prevent accidental overrides.
• Component Isolation: Styles are encapsulated within their components.
• Easier Maintenance: You can confidently change styles without worrying about side effects.

To create a CSS Module in Next.js, you simply name your CSS file with the .module.css extension. For example, if you're styling a button, you might create Button.module.css.

Here's what a simple CSS Module might look like:

Once you have a .module.css file, you can import it into any React component. Next.js then processes these styles, making them available as a JavaScript object.

The class names defined in your CSS Module become properties of this imported object. For instance, .primaryButton becomes styles.primaryButton.

Try running this example to see how a component imports and uses a CSS Module. The actual styling would be applied by Next.js during the build process.

While CSS Modules are great for component-level styling, some styles need to apply universally across your entire application. These are called Global Styles.

You'd use global styles for:

• CSS resets (e.g., to normalize browser defaults).
• Base typography (e.g., default font family, line height for body).
• Layout styles that affect the entire page structure.
• Utility classes that are truly global (e.g., .hidden).

In Next.js 15 with the App Router, global styles are typically imported into your root app/layout.js file. This ensures they are available to all pages and components within your application.

First, create a global CSS file, usually named globals.css in your app directory:

Then, import it into your app/layout.js to apply these styles application-wide:

Knowing when to use each styling method is key to a well-organized Next.js application:

• Use CSS Modules for: Component-specific styles. If a style belongs to a single component (e.g., a button, a card, a navigation item), it should likely be in a CSS Module.
• Use Global Styles for: Application-wide defaults, resets, base typography, and main layout structures. Styles that truly affect every part of your app or establish a baseline.

Mixing both approaches allows for powerful and maintainable styling.

Sometimes you might need to apply multiple styles or conditional styles. You can combine CSS Module classes with regular global classes, or even inline styles:

Remember that CSS specificity rules still apply. More specific selectors (e.g., IDs, inline styles) will override less specific ones (e.g., class names).

You've mastered the fundamentals of styling in Next.js 15!

• CSS Modules provide local scope, solving the global CSS problem with unique class names for component-specific styles.
• Global Styles are used for application-wide defaults, resets, and base layouts, typically imported in app/layout.js.

By effectively combining these two powerful methods, you can build maintainable, scalable, and visually consistent Next.js applications. Keep practicing to make your UIs shine!