Use next/image instead of img tag

vrk-kpa · Mar 21, 2023 · 7656b43 · 7656b43
1 parent 57a4f33
commit 7656b43
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 133 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,7 +10,6 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unnecessary-type-constraint": "off",
     "@typescript-eslint/ban-types": ["off", { "types": ["{}", "object"] }],
-    "@next/next/no-img-element": "off",
     "prettier/prettier": "error"
   }
 }
diff --git a/GrandOne/GrandOnePage.scss b/GrandOne/GrandOnePage.scss
@@ -58,7 +58,7 @@
 
   #hero {
     width: 100%;
-    background-image: url('/grand-one/grand-one-banner.png');
+    background-image: url('~/public/grand-one/grand-one-banner.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -100,7 +100,7 @@
   }
 
   #section4 .left {
-    background: url('/grand-one/SFI-tabletti.jpg');
+    background: url('~/public/grand-one/SFI-tabletti.jpg');
     background-size: cover;
     background-position: center;
   }
@@ -124,7 +124,7 @@
 
   #section8 {
     padding: var(--grand-one-section-spacing-small) 0;
-    background-image: url('/hero_bg.png');
+    background-image: url('~/public/hero_bg.png');
   }
 
   @media (min-width: 576px) {

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-export-i18n';
 import Link from 'next/link';
+import Image from 'next/image';
 import {
   Block,
   ExternalLink,
@@ -8,6 +9,7 @@ import {
   Link as SuomifiLink,
   Text,
 } from 'suomifi-ui-components';
+import gitHubLogo from '/public/github.svg';
 import styles from './Footer.module.scss';
 
 const Footer: React.FunctionComponent = () => {
@@ -41,13 +43,10 @@ const Footer: React.FunctionComponent = () => {
                 labelNewWindow={t('common.opens_in_a_new_tab')}
                 className={styles.githubLink}
               >
-                <span className="flex align-center">
-                  <img
-                    src="/github.svg"
-                    aria-hidden
-                    alt=""
-                    className={styles.githubLogo}
-                  />
+                <span className={'flex align-center'}>
+                  <div className={styles.githubLogo}>
+                    <Image src={gitHubLogo} aria-hidden alt="" />
+                  </div>
                   suomifi-ui-components
                 </span>
               </ExternalLink>

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,10 +1,12 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { Block } from 'suomifi-ui-components';
 import styles from './Header.module.scss';
 import { NavItem } from '../../interfaces/interfaces';
 import Navbar from './Navbar/Navbar';
 import MobileNavMenuButton from './MobileNavMenuButton/MobileNavMenuButton';
 import { useTranslation } from 'next-export-i18n';
+import designSystemLogo from '/public/designSystemLogo.svg';
 
 const Header: React.FunctionComponent = () => {
   const { t } = useTranslation();
@@ -36,11 +38,9 @@ const Header: React.FunctionComponent = () => {
       <Block className={styles.upper}>
         <Block className={styles.container}>
           <Link href="/">
-            <img
-              src="/designSystemLogo.svg"
-              alt="Suomi.fi Design System"
-              className={styles.logo}
-            />
+            <div className={styles.logo}>
+              <Image src={designSystemLogo} alt="Suomi.fi Design System" />
+            </div>
           </Link>
           <div className={styles.mobileNavContainer}>
             <MobileNavMenuButton

diff --git a/components/HeroBlock/HeroBlock.module.scss b/components/HeroBlock/HeroBlock.module.scss
@@ -2,7 +2,7 @@
 @import '../../styles/breakpoints';
 
 .heroBlock {
-  background-image: url('/hero_bg.png');
+  background-image: url('~/public/hero_bg.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -23,4 +23,10 @@
       gap: $fi-spacing-l;
     }
   }
+
+  .heroLogoContainer {
+    width: 100%;
+    max-width: 63px;
+    height: 100%;
+  }
 }
diff --git a/components/HeroBlock/HeroBlock.tsx b/components/HeroBlock/HeroBlock.tsx
@@ -1,14 +1,18 @@
 import { Block, Heading, Text } from 'suomifi-ui-components';
 import { useTranslation } from 'next-export-i18n';
+import Image from 'next/image';
 import styles from './HeroBlock.module.scss';
+import suomifiIcon from '/public/icons/suomifi.svg';
 
 const InfoBox: React.FunctionComponent = () => {
   const { t } = useTranslation();
   return (
     <Block variant="div" className={styles.heroBlock}>
       <Block variant="div" className="container">
         <Block variant="div" className={styles.heroContainer}>
-          <img src="icons/suomifi.svg" alt="Suomi.fi" />
+          <div className={styles.heroLogoContainer}>
+            <Image src={suomifiIcon} alt="Suomi.fi" />
+          </div>
           <Block variant="div">
             <Heading variant="h1hero" color="whiteBase">
               {t('front_page.hero_heading')}

diff --git a/next.config.js b/next.config.js
@@ -1,8 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    unoptimized: true,
+  },
 };
 
-module.exports = {
-  nextConfig,
-};
+module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@types/styled-components": "^5.1.25",
     "@types/warning": "^3.0.0",
     "classnames": "^2.3.1",
-    "next": "12.1.6",
+    "next": "12.3.4",
     "next-export-i18n": "^2.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -18,7 +18,7 @@ function SuomifiDesignSystemSiteApp({ Component, pageProps }: AppProps) {
   return (
     <Block className="app">
       <Head>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="favicon.ico" />
       </Head>
       <SkipLink href="#main">{t('common.skip_to_main_content')}</SkipLink>
       {(path.startsWith('/components') ||

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -9,7 +9,7 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&display=swap"
             rel="stylesheet"
           />
-          <link rel="shortcut icon" href="/favicon.svg" />
+          <link rel="shortcut icon" href="favicon.svg" />
         </Head>
         <body>
           <Main />

diff --git a/pages/grand-one.tsx b/pages/grand-one.tsx
@@ -12,7 +12,11 @@ import {
   StaticIcon,
   VisuallyHidden,
 } from 'suomifi-ui-components';
+import Image from 'next/image';
 import BoxWithIcon from '../GrandOne/BoxWithIcon/BoxWithIcon';
+import suomifiLogo from '/public/grand-one/suomifi_flag.png';
+import dsProcessImg from '/public/grand-one/DS_process.png';
+import dsMobileImg from '/public/grand-one/nimenmuutoshakemus-mobile.png';
 
 const Page: NextPage = () => (
   <>
@@ -28,7 +32,7 @@ const Page: NextPage = () => (
       <Block variant="div" id="section1">
         <Block variant="div" className="container">
           <Block style={{ textAlign: 'center' }}>
-            <img src="/grand-one/suomifi_flag.png" alt="Suomi.fi logo" />
+            <Image src={suomifiLogo} alt="Suomi.fi logo" />
           </Block>
           <Block mt="xl">
             <Heading
@@ -341,10 +345,9 @@ const Page: NextPage = () => (
         </Block>
         <Block variant="div" className="container">
           <Block mt="xl">
-            <img
-              src="/grand-one/DS_process.png"
+            <Image
+              src={dsProcessImg}
               alt="Suomi.fi Design Systemin kehittämisprosessi"
-              style={{ maxWidth: '100%' }}
               aria-describedby="imagedescripion"
             />
             <VisuallyHidden id="imagedescripion">
@@ -468,12 +471,18 @@ const Page: NextPage = () => (
             </Paragraph>
           </Block>
           <Block variant="div" className="half">
-            <Block style={{ textAlign: 'center' }}>
-              <img
-                src="grand-one/nimenmuutoshakemus-mobile.png"
-                alt="Suomi.fi komponentteja mobiilinäytöllä"
-                style={{ maxWidth: '245px' }}
-              />
+            <Block>
+              <div
+                style={{
+                  maxWidth: '245px',
+                  margin: '0 auto',
+                }}
+              >
+                <Image
+                  src={dsMobileImg}
+                  alt="Suomi.fi komponentteja mobiilinäytöllä"
+                />
+              </div>
             </Block>
           </Block>
         </Block>