20 Дополнения

Переход на NextJS 12

Так выглядит тсконфиг для нового некста:

tsconfig.json

"compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env-custom.d.ts",
    "images.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Работа с SVG

Так выглядит файл с типизацией некстовского энвайрмента:

next-env.d.ts

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

Вместо svg.d.ts теперь нужно использовать данный файл:

images.d.ts

declare module "*.svg" {
   const content: React.FunctionComponent<React.SVGAttributes<SVGAElement>>;
   export default content;
}
 
// this file is conditionally added/removed to next-env.d.ts
// if the static image import handling is enabled
 
interface StaticImageData {
   src: string
   height: number
   width: number
   placeholder?: string
}
 
declare module '*.png' {
   const content: StaticImageData;
   export default content;
}
 
 
declare module '*.jpg' {
   const content: StaticImageData;
   export default content;
}
 
declare module '*.jpeg' {
   const content: StaticImageData;
   export default content;
}
 
declare module '*.gif' {
   const content: StaticImageData;
   export default content;
}
 
declare module '*.webp' {
   const content: StaticImageData;
   export default content;
}
 
declare module '*.ico' {
   const content: StaticImageData;
   export default content;
}
 
declare module '*.bmp' {
   const content: StaticImageData;
   export default content;
}

Обновление TS и StyleLint

Пропсы приложение импортируем отсюда:

pages / _app.tsx

import { AppProps } from 'next/dist/shared/lib/router/router';

Стайллинт выглядит теперь так:

stylelintrc.json

{
   "extends": [
      "stylelint-config-standard",
      "stylelint-order-config-standard"
   ],
   "plugins": [
      "stylelint-order"
   ],
   "rules": {
      "indentation": [
         "tab"
      ],
      "color-hex-case": "upper",
      "selector-class-pattern": "^.*$",
      "declaration-block-no-redundant-longhand-properties": [
         true,
         {
            "ignoreShorthands": [
               "/grid/"            ]
         }
      ]
   }
}

Обновление SVGR

Обновляем SVGR:

package.json

"devDependencies": {
	"@svgr/webpack": "^6.1.2",
},

Обновляем конфиг некста:

next.config.js

module.exports = {
   images: {
      domains: ['courses-top.ru']
   },
   webpack(config, options) {
      config.module.rules.push({
         loader: '@svgr/webpack',
         issuer: /\.[jt]sx?$/,
         options: {
            prettier: false,
            svgo: true,
            svgoConfig: {
               plugins: [{
                  name: 'preset-default',
                  params: {
                     override: {
                        removeViewBox: false
                     }
                  }
               }],
            },
            titleProp: true,
         },
         test: /\.svg$/,
      });
 
      return config;
   },
};