Next.js Summary

1. Setup
   1. Install Next.js

      npx create-next-app . --use-npm

   ---

   2. Add jsconfig.json file at the same level as package.json

      {
        "compilerOptions": {
          "baseUrl": "."
        }
      }
      

   ---

   3. Add SCSS support
      • Install sass package

          npm i -D sass
        

      ---

      • The next.config.js file should be:

        const path = require('path')
        
        module.exports = {
          reactStrictMode: true,
          sassOptions: {
            includePaths: [path.join(__dirname, 'styles', 'scss')],
          },
        };
                      

      ---

      ---

   ---

   4. Add Bootstrap

      • npm i bootstrap
                      

      ---

      • Bootstrap 5 SCSS customization
        • Install sass package

            npm i -D sass
          

        ---

        • The next.config.js file should be:

          const path = require('path')
          
          module.exports = {
            reactStrictMode: true,
            sassOptions: {
              includePaths: [path.join(__dirname, 'styles', 'scss')],
            },
          };
                        

        ---

        • Under styles folder create scss/main.scss file:

          // Variables
          $primary: #e35d6a;
          
          // Utilities
          $utilities: () !default;
          $utilities: map-merge(
            (
              'my-input-padding': (
                property: padding,
                class: my-ip,
                values: (
                  0: 0,
                  1: 0.3rem,
                  2: 0.5rem,
                  3: 0.7rem,
                  4: 0.9rem,
                  5: 1rem,
                ),
              ),
            ),
            $utilities
          );
          
          @import '../../node_modules/bootstrap/scss/bootstrap';
          

        ---

        • Update pages/_app.js file

          import 'styles/scss/main.scss'
          import 'styles/globals.css'; <--- usual file of Next.js
                        

        ---

        • Results:
          • Primary color of Bootstrap was changed
          • Use utility class like following:

              <input className='my-ip-5' />
                              

      ---