packages: upgrade to next@13

@packages/ui/mq.ts

@@ -1,10 +1,4 @@
-const screens = {
-  tablet: 768,
-  laptop: 1024,
-  'laptop-hd': 1280,
-  desktop: 1680,
-  'desktop-xl': 1921,
-};
+import { screens } from './screens';
 
 const threshold = 0;
 

@packages/ui/screens.js

@@ -0,0 +1,14 @@
+const screens = {
+  tablet: 768,
+  laptop: 1024,
+  'laptop-hd': 1280,
+  desktop: 1680,
+  'desktop-xl': 1921,
+};
+
+const devices = Object.values(screens);
+
+module.exports = {
+  screens,
+  devices,
+};

Components/Layout/Logo.jsx

@@ -3,16 +3,14 @@ import logo from 'public/assets/images/logo-primary.svg';
 import styled from 'styled-components';
 import { Flex } from 'ui/grid';
 import { min } from 'ui/mq';
+import styles from './Logo.module.css';
 
 const ImageWrapper = styled.div`
   width: 100px;
+
   ${min('laptop')} {
     width: 135px;
   }
-
-  img {
-    filter: brightness(0) invert(1);
-  }
 `;
 
 const LogoText = styled.h3`
@@ -31,7 +29,7 @@ function Logo() {
   return (
     <Flex flexDirection="column" alignItems="flex-start" justifyContent="space-between">
       <ImageWrapper>
-        <Image alt="logo" src={logo} layout="responsive" objectFit="contain" />
+        <Image priority className={styles.logo} alt="logo" src={logo} layout="responsive" />
       </ImageWrapper>
       <LogoText>Лизинговый Калькулятор</LogoText>
     </Flex>

Components/Layout/Logo.module.css

@@ -0,0 +1,3 @@
+.logo {
+  filter: brightness(0) invert(1);
+}

next.config.js

@@ -3,6 +3,7 @@
 const { withPlugins } = require('next-composed-plugins');
 const withLess = require('next-with-less');
 const withGraphQL = require('next-plugin-graphql');
+const { devices } = require('./@packages/ui/screens');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -16,6 +17,9 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
+  images: {
+    deviceSizes: devices,
+  },
   rewrites:
     process.env.NODE_ENV === 'development' &&
     async function rewrites() {

package.json

@@ -35,7 +35,7 @@
     "less-loader": "^11.0.0",
     "mobx": "^6.7.0",
     "mobx-react-lite": "^3.4.0",
-    "next": "^12.3.0",
+    "next": "^13.0.7",
     "next-composed-plugins": "^1.0.1",
     "next-plugin-graphql": "^0.0.2",
     "next-with-less": "^2.0.5",
@@ -69,7 +69,7 @@
     "eslint": "8.23.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "12.3.0",
+    "eslint-config-next": "^13.0.7",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-testing-library": "^5.6.4",