Building a SaaS application with Next.js and Sass is a powerful combination for creating dynamic and responsive web applications. Next.js provides a robust framework for server-side rendering and static site generation, while Sass extends CSS with powerful features like variables, nested rules, and mixins.
This blog will guide you through integrating Sass into a Next.js project and leveraging its capabilities to enhance your application's styling.
To get started, you need to create a new project. Open your terminal and run the following command:
1npx create-next-app my-next-sass-app 2cd my-next-sass-app
This will scaffold a new Next.js project. Once the project is set up, navigate to the project directory.
Next.js has built-in support for Sass, making it easy to integrate. You can install Sass using the following command:
1yarn add sass
This command installs the latest version of Sass in your project.
With Sass installed, you can start creating SCSS files. Let's create a new SCSS file called styles.scss in the ‘styles’ directory:
1// styles/styles.scss 2$primary-color: #3498db; 3 4body { 5 font-family: Arial, sans-serif; 6 background-color: $primary-color; 7}
To use this SCSS file in your Next.js project, you need to import it in your _app.js file:
1// pages/_app.js 2import '../styles/styles.scss'; 3 4function MyApp({ Component, pageProps }) { 5 return <Component {...pageProps} />; 6} 7 8export default MyApp;
Next.js supports CSS Modules, which allows you to scope CSS locally to the component. Create a CSS Module file with the .module.scss extension:
1// styles/Button.module.scss 2.button { 3 background-color: $primary-color; 4 color: white; 5 border: none; 6 padding: 10px 20px; 7 cursor: pointer; 8}
In your component, you can import and use the styles from this module:
1// components/Button.js 2import styles from '../styles/Button.module.scss'; 3 4function Button() { 5 return <button className={styles.button}>Click Me</button>; 6} 7 8export default Button;
Using CSS Modules ensures that your styles are scoped locally, avoiding conflicts with other styles in your project.
Sass offers several powerful features that extend CSS. Let's explore some of these features with examples.
Variables in Sass allow you to store values that you use multiple times in your stylesheets. For example:
1// styles/variables.scss 2$primary-color: #3498db; 3$secondary-color: #2ecc71;
You can then use these variables in your SCSS files:
1// styles/styles.scss 2@import 'variables'; 3 4body { 5 background-color: $primary-color; 6 color: $secondary-color; 7}
Sass allows you to stack your CSS selectors in the same visual hierarchy as your HTML.:
1// styles/navbar.scss 2.navbar { 3 background-color: $primary-color; 4 5 .nav-item { 6 color: white; 7 &:hover { 8 color: $secondary-color; 9 } 10 } 11}
Mixins are like functions in Sass. They help you avoid repetitive code by encapsulating reusable styles:
1// styles/mixins.scss 2@mixin flex-center { 3 display: flex; 4 justify-content: center; 5 align-items: center; 6} 7 8.container { 9 @include flex-center; 10 height: 100vh; 11}
While CSS Modules are great for component-specific styles, you might still need some global CSS. Next.js allows you to import global CSS files in the _app.js file:
1// pages/_app.js 2import '../styles/global.css'; 3import '../styles/styles.scss'; 4 5function MyApp({ Component, pageProps }) { 6 return <Component {...pageProps} />; 7} 8 9export default MyApp;
Ensure that global styles are used sparingly to maintain the modularity of your CSS.
Here is an example of how your project structure might look:
1my-next-sass-app/ 2├── components/ 3│ └── Button.js 4├── pages/ 5│ └── _app.js 6│ └── index.js 7├── styles/ 8│ └── Button.module.scss 9│ └── styles.scss 10│ └── variables.scss 11│ └── mixins.scss 12├── public/ 13│ └── favicon.ico 14└── package.json
To see your changes in action, start the development server:
1yarn dev
Open your browser and navigate to http://localhost:3000 to see your Next.js application with Sass integration.
Integrating Next.js with Sass gives you the best of both worlds: the power and flexibility of Next.js for building dynamic web applications, and the extended capabilities of Sass for managing and organizing your CSS. By using features like variables, nesting, and mixins, you can write more maintainable and scalable styles. Additionally, leveraging CSS Modules ensures that your styles are scoped locally, preventing conflicts and making your components more reusable.
This guide has walked you through setting up a Next.js project with Sass, installing dependencies, creating and importing SCSS files, and utilizing Sass features effectively. With these tools and techniques, you're well-equipped to build sophisticated and stylish SaaS applications.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.