Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Sass

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Sass

      Using Sass

      
      Sass, a well-known CSS preprocessor, is fully supported in Next.js. You can use .scss and .sass file extensions to write your styles.
      Sass can also be combined with CSS Modules for component-level styling by using .module.scss or .module.sass file extensions.
      To use Sass, you'll first need to install it:
      npm install --save-dev sass

      Custom Configuration

      
      If you want to customize the Sass compiler, you can do so using the sassOptions option in your next.config.js:
      // next.config.js
      const path = require('path');
      
      module.exports = {
        sassOptions: {
          includePaths: [path.join(__dirname, 'styles')],
        },
      };
      This configuration allows you to specify additional paths for the Sass compiler to include during the build process.

      Sass Variables

      
      Next.js supports exporting Sass variables from CSS Module files. Here’s an example:
      // app/variables.module.scss
      $primary-color: #64ff00;
      
      :export {
        primaryColor: $primary-color;
      }
      You can then use these exported variables in your JavaScript files:
      // app/page.js
      import variables from './variables.module.scss';
      
      export default function Page() {
        return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>;
      }
      In this example, the $primary-color Sass variable is exported as primaryColor, which can then be used within your components to style elements dynamically.

      References

      
      • Styling: CSS Modules
      • Styling: Tailwind CSS
      • Styling: CSS-in-JS
      • Styling: Sass
      • State of CSS 2023: CSS-in-JS