NextJs - React Framework - Component Basics Components Modular CSS

Screenshot from the tutorial

Understanding Component Basics in Next.js with Modular CSS

Next.js, a powerful React framework, has revolutionized the way developers build web applications. With its enhanced features like server-side rendering and static site generation, it allows for greater performance and SEO optimization. In this blog post, we’ll explore the basics of components in Next.js and how to effectively use modular CSS for styling.

What are Components in Next.js?

Components are the building blocks of any React application, including those built with Next.js. They allow developers to create reusable UI elements, promoting a cleaner and more maintainable codebase. In Next.js, components can be created as either functional or class components, with functional components being the more modern approach.

Creating a Simple Component

To create a component in Next.js, you can follow these steps:

1. Create a new file in the components directory. If the directory doesn’t exist, you can create it. For this example, let's create a file named Greeting.js.

   // components/Greeting.js
   import React from 'react';
   
   const Greeting = ({ name }) => {
       return <h1>Hello, {name}!</h1>;
   };
   
   export default Greeting;
   

2. Import and use the component in a page. For instance, in pages/index.js, you can import the Greeting component and use it as follows:

   // pages/index.js
   import React from 'react';
   import Greeting from '../components/Greeting';
   
   const HomePage = () => {
       return (
           <div>
               <Greeting name="Next.js Developer" />
           </div>
       );
   };
   
   export default HomePage;
   

In this example, we created a simple Greeting component that takes a name prop and renders a greeting message. This component is then imported and used in the HomePage component.

Understanding Modular CSS

Next.js supports various styling options, and one of the most effective approaches is using Modular CSS. This approach allows you to scope your styles to specific components, reducing the risk of style conflicts and improving maintainability.

Setting Up Modular CSS

To use Modular CSS in Next.js, you need to follow these steps:

1. Create a CSS Module file. For the Greeting component, create a file named Greeting.module.css in the components directory.

   /* components/Greeting.module.css */
   .greeting {
       color: blue;
       font-size: 24px;
       text-align: center;
   }
   

2. Import the CSS Module in your component file and apply styles using the imported class.

   // components/Greeting.js
   import React from 'react';
   import styles from './Greeting.module.css';
   
   const Greeting = ({ name }) => {
       return <h1 className={styles.greeting}>Hello, {name}!</h1>;
   };
   
   export default Greeting;
   

By following this process, we ensure that the styles defined in Greeting.module.css only apply to the Greeting component, thanks to CSS Modules' scoping.

Benefits of Using Next.js Components with Modular CSS

1. Reusability

Components in Next.js promote code reusability, allowing you to use the same component in multiple parts of your application without rewriting code.

2. Maintainability

By separating styles into CSS modules, you can manage and update styles for individual components without affecting the rest of your application.

3. Improved Performance

Next.js optimizes the loading and rendering of components, which can lead to better performance and user experience.

Conclusion

In this blog post, we explored the basics of creating components in Next.js and how to effectively use Modular CSS for styling. By leveraging these features, you can build scalable and maintainable applications that are not only visually appealing but also performant.

Next.js offers a robust environment for React developers, and understanding its core principles is essential for building modern web 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