remove next/image to fix static exports

fixes https://github.com/ohmyform/ohmyform/issues/154

CHANGELOG.md

@@ -37,6 +37,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - android screen size fix (https://github.com/ohmyform/ohmyform/issues/114)
 - sending finish mutation (https://github.com/ohmyform/ui/pull/67)
 - fix dev documentation (https://github.com/ohmyform/ui/issues/65)
+- remove next/image as it does not work with static exports (https://github.com/ohmyform/ohmyform/issues/154)
 
 ### Security
 

components/structure.tsx

@@ -1,13 +1,11 @@
 import { CaretDownOutlined, UserOutlined } from '@ant-design/icons'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons/lib'
 import { Alert, Dropdown, Layout, Menu, PageHeader, Select, Space, Spin, Tag } from 'antd'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { CSSProperties, FunctionComponent } from 'react'
 import GitHubButton from 'react-github-button'
 import { useTranslation } from 'react-i18next'
-import LogoWhitePng from '../assets/images/logo_white.png'
 import { useMeQuery } from '../graphql/query/me.query'
 import { languages } from '../i18n'
 import { sideMenu, SideMenuElement } from './sidemenu'
@@ -176,10 +174,8 @@ export const Structure: FunctionComponent<Props> = (props) => {
             display: 'flex',
             alignItems: 'center',
           }}>
-            <Image
+            <img
-              src={LogoWhitePng.src}
+              src={require('../assets/images/logo_white.png?resize&size=256')}
-              width={1608 / 12}
-              height={530 / 12}
               alt={'OhMyForm'}
             />
           </div>

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,9 +1,18 @@
 const p = require('./package.json')
+const optimizedImages = require('next-optimized-images')
+const withPlugins = require('next-compose-plugins')
 
 const environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';
 const version = p.version;
 
-module.exports = {
+module.exports = withPlugins([
+  optimizedImages({
+
+  }),
+  {
+    images: {
+      disableStaticImages: true,
+    },
     poweredByHeader: true,
     productionBrowserSourceMaps: true,
     publicRuntimeConfig: {
@@ -19,3 +28,4 @@ module.exports = {
       version,
     }
   }
+])

package.json

@@ -24,9 +24,13 @@
     "graphql": "^15.8.0",
     "i18next": "^21.6.4",
     "i18next-browser-languagedetector": "^6.1.2",
+    "imagemin-optipng": "^8.0.0",
     "isomorphic-fetch": "^3.0.0",
+    "jimp": "^0.16.1",
     "mathjs": "^10.0.2",
     "next": "^12.0.7",
+    "next-compose-plugins": "^2.2.1",
+    "next-optimized-images": "^2.6.2",
     "next-redux-wrapper": "^7.0.5",
     "polished": "^4.1.3",
     "react": "^17.0.2",
@@ -41,6 +45,7 @@
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
+    "responsive-loader": "^2.3.0",
     "sass": "^1.45.2",
     "styled-components": "^5.3.3",
     "swiper": "^7.4.1"

pages/index.tsx

@@ -2,11 +2,9 @@ import { Alert, Layout } from 'antd'
 import { AuthFooter } from 'components/auth/footer'
 import { GetStaticProps, NextPage } from 'next'
 import getConfig from 'next/config'
-import Image from 'next/image'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import LogoWhitePng from '../assets/images/logo_white.png'
 import { LoadingPage } from '../components/loading.page'
 import { Omf } from '../components/omf'
 import { useStatusQuery } from '../graphql/query/status.query'
@@ -70,12 +68,11 @@ const Index: NextPage = () => {
           textAlign: 'center',
         }}
       >
-        <Image
+        <img
           alt={'OhMyForm'}
-          layout={'responsive'}
+          src={require('../assets/images/logo_white.png?resize&size=512')}
           width={1608 / 4}
           height={530 / 4}
-          src={LogoWhitePng.src}
         />
       </div>
 

pages/login/index.tsx

@@ -10,13 +10,11 @@ import {
   LoginMutationVariables,
 } from 'graphql/mutation/login.mutation'
 import { NextPage } from 'next'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
-import LogoWhitePng from '../../assets/images/logo_white.png'
 import { Omf } from '../../components/omf'
 import { useSettingsQuery } from '../../graphql/query/settings.query'
 import scss from './index.module.scss'
@@ -75,11 +73,10 @@ const Index: NextPage = () => {
             marginBottom: 16,
           }}
         >
-          <Image
+          <img
-            src={LogoWhitePng.src}
+            style={{ maxWidth: '100%' }}
+            src={require('../../assets/images/logo_white.png?resize&size=256')}
             alt={'OhMyForm'}
-            width={1608 / 4}
-            height={530 / 4}
           />
         </div>
 

pages/register.tsx

@@ -5,12 +5,10 @@ import { AuthLayout } from 'components/auth/layout'
 import { setAuth } from 'components/with.auth'
 import { RegisterUserData, useRegisterMutation } from 'graphql/mutation/register.mutation'
 import { NextPage } from 'next'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import LogoWhitePng from '../assets/images/logo_white.png'
 import { ErrorPage } from '../components/error.page'
 import { Omf } from '../components/omf'
 import { useSettingsQuery } from '../graphql/query/settings.query'
@@ -77,11 +75,10 @@ const Register: NextPage = () => {
             marginBottom: 16,
           }}
         >
-          <Image
+          <img
-            src={LogoWhitePng.src}
+            style={{ maxWidth: '100%' }}
+            src={require('../assets/images/logo_white.png?resize&size=256')}
             alt={'OhMyForm'}
-            width={1608 / 4}
-            height={530 / 4}
           />
         </div>