Next.js Built-in CSS Support

Component-level modular CSS

Next.js supports the CSS module for providing component-level styling. You can import a .module.css file to provide styling for only the components instead of the entire application. These modules have a local scope and create a unique class name in each component. This allows you to use the same styling class name in different files without conflicts.

import styles from './file.module.css'

export function fun() {
  return (
    <button
      type="file"
      className={styles.error}>
      Destroy
    </button>
  )
}

You can also try this code with Online Javascript Compiler

Run Code

In the above code, we imported a file named file.module.css in the .js file, created the function ‘fun’, used it to style a button tag, and applied the CSS styling created inside the file. The modules can be imported from anywhere in the application.

Sass Support

Next.js allows you to import Sass files using Sass or Scss. Sass is an extension of CSS; it provides features like variables, functions, etc. Sass allows nested CSS styles, so organizing them would be easier. The Sass also supports importing component-level modules by importing the files with extensions .module.sass or .module.scss. To use the built-in support for Sass in Next.js, you have to install it using the following command.

npm install sass
or 
yarn add sass

We can do a custom configuration to the Next.js by using sassOptions. We have to create a next.config.js file to override the default configuration. For customizing the next.js, we need to add some modules to the file, and all the functionality is similar to the built-in CSS support for Next.js.

const withStyles = require('@webdeb/next-styles');
module.exports = withStyles({
  sass: true, // use .scss files
  modules: true, 
  webpack:(config)=>{
  return config;
  }
})

You can also try this code with Online Javascript Compiler

Run Code

Sass Variables

Sass variables store any information used throughout the stylesheet, just like any other variables. Next.js allows us to export the variables from the stylesheet and import them into the .js file for styling. Let’s assume we have a CSS file and .js file with the following code.

$colour: #64FF00
:export {
  colour: $colour
}

import variables from '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout primaryColor={variables.colour}>
      <Component {...pageProps} />
    </Layout>
  )
}

You can also try this code with Online Javascript Compiler

Run Code

In the above code, we export the variable color and import it in the js file and assign it to another variable named primaryColor. Then we return the props to the web page for rendering the content.

CSS inside js

Next.js allows us to use the CSS styling inside a js file directly without importing any stylesheet or module inside it. But this in Next.js does not support rendering of the web page. We can only perform general JavaScript functions and apply CSS to them.

function Codingninjas() {
  return <p style={{ color: 'yellow' }}>Codingninjas</p>
}

export default Codingninjas

You can also try this code with Online Javascript Compiler

Run Code

The CSS styling in the above code will be applied to the paragraph and the function is exported to style the content.

FAQs

1. Does Next.js support built-in CSS?
   Next.js allows us to import and use the CSS styling from JavaScript files. It supports global stylesheets, so we can import CSS files as global sheets. To add a global stylesheet to the application, you can import the .CSS file in your javascript(.js) file. 
    
2. Which CSS framework is best for the next JS?
   tailwindcss is the best framework used for the built-in CSS support in Next.js.
    
3. Are Sass and SCSS the same?
   Sass - Syntactically Awsome Style Sheets is a preprocessor scripting language that will be compiled or interpreted to CSS, whereas SCSS is the main syntax for the SASS, which is built on top of existing CSS syntax.

Key Takeaways

We Discussed Next.js, built-in CSS support, component-level modular CSS, Sass Support, Sass variables, and CSS inside js in this article.

Aren’t Next.js and its features interesting? To learn more about Next.js and master web development, we suggest you go through the course we found for you. 

Happy Learning!