NextJs is a React-based framework that provides developers with all the tools required for production. Next.js is a react-based framework. It has the powers to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.
In this post, we are going to learn about adding stylesheet in NextJs. Stylesheet are used to design the webpage to make it attractive and are the reason to simplify the process of making web pages presentable.
Creating NextJs application:
Step 1: To create a new NextJs App run the below command in your terminal:
npx create-next-app my-next-app
Step 2: After creating your project folder (i.e. my-next-app ), move to it by using the following command:
cd my-next-app
Project Structure: It will look like this.
Directory structure of our next app
In this post, we have used all the CSS files present in styles folder, components/Navbar.js, pages/_app.js and pages/index.js.
Syntax:
To import a global CSS file the following syntax is used:
import "filepath";
To import a CSS module, the following syntax is used:
import custom_var_name from "filepath";
And now to use styles applied in the filepath in the CSS module you can refer to that by:
custom_var_name.className
Adding the stylesheets: The initial look of our app is given below:
initial look of our Next Js app
Adding global stylesheets: To add a global stylesheet in a Next Js app, basically, the CSS rules which will apply to the entire app, just import the CSS file to the pages/_app.js.
For example, we have a CSS file named “style.css” in our “styles” folder. The CSS file looks like this:
style.css
/* Inside "styles/style.css" */body { background-color: rgb(26, 25, 25); color: rgb(223, 213, 213); font-family: sans-serif; } |
And let us now import it in our “pages/_app.js” file by the following command:
import '../styles/style.css'
Currently, our “pages/_app.js” looks as shown below:
_app.js
import '../styles/style.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp |
And by adding the stylesheet, our app applies the css rules and looks as shown below:
Output of adding the stylesheet to our app
Note: If you don’t already have a “pages/_app.js” file then create one and add the following code to it:
_app.js
// import '../styles/style.css' // your other stylesheets as per your wish function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp |
Adding component-level CSS: Next Js also supports adding component-level CSS in your app. It supports CSS modules using the “[file].module.css” naming convention. This method of using CSS modules allows scoping the styles locally to a component by automatically creating a unique classname as well as using multiple styles with the same classname.
CSS modules can be imported anywhere in the application.
Example: Let us have a file named “navbar.module.css” in our “styles” folder.
The code of our CSS file is as follows:
navbar.module.css
/* Inside "styles/navbar.module.css" */.current { color: indianred; text-decoration: none; } |
And now let us add this “current” class to our “components/Navbar.js” file by importing and then adding the class.
Navbar.js
// Inside "components/Navbar.js" import styles from "../styles/navbar.module.css"; // importing the css file import Link from "next/link"; export default function Navbar({ current }) { return ( <ul> <li> <Link href="/">Home page</Link>{" "} {current === "home" ? ( <span className={styles.current}>current page</span> ) : ( "" )}{" "} </li> <li> <Link href="/user">Products page</Link>{" "} {current === "user" ? ( <span className={styles.current}>current page</span> ) : ( "" )}{" "} </li> </ul> ); } |
Output: After adding the component to the index page the output is:
output of above code
Importing styles from node_modules: To import global styles sheets as supposed in bootstrap, you can simply add your import statement to your “pages/_app.js” file as shown above. You can also import CSS required by third-party components in your component by adding the following import statement to your component:
// Inside "component/YourComponent.js" import "filepath" // Example import '@reach/dialog/styles.css'
Reference: https://nextjs.org/docs/basic-features/built-in-css-support
