Introduction to Styling in Next.js

Styling is a crucial aspect of web development. Next.js allows you to style your application using a variety of methods, including plain CSS and Sass. In this tutorial, we'll explore how to style your Next.js app with CSS and Sass.


Using Plain CSS

Next.js supports styling using plain CSS files. You can create a CSS file for your component and import it directly into your JavaScript files. For example:


    /* styles.module.css */
    .myComponent {
        background-color: #f4f4f4;
        padding: 10px;
    }

 

    // MyComponent.js
    import React from 'react';
    import styles from './styles.module.css';
    function MyComponent() {
        return (
            <div className={styles.myComponent}>
                <h2>Styled Component</h2>
                <p>This component is styled with CSS.</p>
            </div>
        );
    }
    export default MyComponent;

Using Sass

Next.js also supports Sass for more advanced styling. You can create a Sass file for your component and import it similarly. For example:


    /* styles.module.scss */
    .myComponent {
        background-color: #f4f4f4;
        padding: 10px;
        h2 {
            color: #333;
        }
    }

 

    // MyComponent.js
    import React from 'react';
    import styles from './styles.module.scss';
    function MyComponent() {
        return (
            <div className={styles.myComponent}>
                <h2>Styled Component</h2>
                <p>This component is styled with Sass.</p>
            </div>
        );
    }
    export default MyComponent;