Add image support (#4)

Author: webbertakken

next.config.js

@@ -5,6 +5,13 @@ const withCSS = require('@zeit/next-css')
 const withLess = require('@zeit/next-less')
 const withSass = require('@zeit/next-sass')
 const withPWA = require('next-pwa')
+const withOptimizedImages = require('next-optimized-images')
+
+const isProdBuild = process.env.NODE_ENV === 'production'
+
+const baseNextConfig = {
+ target: 'serverless',
+}
 
 const lessNextConfig = {
  lessLoaderOptions: {
@@ -41,15 +48,24 @@ const sassNextConfig = {
  cssModules: true,
 }
 
+const optimizedImagesNextConfig = {
+ /**
+ * Auto-detects:
+ * - imagemin-mozjpeg
+ * - imagemin-optipng
+ * - webp-loader
+ */
+}
+
 const pwaNextConfig = {
  pwa: {
  dest: 'public',
- disable: process.env.NODE_ENV === 'development',
+ disable: !isProdBuild,
  },
 }
 
 const compose = (plugins) => ({
- target: 'serverless',
+ ...baseNextConfig,
 
  webpack: (config, options) => {
  config.module.rules.push(
@@ -77,6 +93,7 @@ const compose = (plugins) => ({
  return config
  }, config)
  },
+
  webpackDevMiddleware(config) {
  return plugins.reduce((config, plugin) => {
  if (Array.isArray(plugin)) {
@@ -95,9 +112,10 @@ const compose = (plugins) => ({
 })
 
 module.exports = compose([
+ isProdBuild ? [withPWA, pwaNextConfig] : null,
  [withBundleAnalyzer, { enabled: process.env.ANALYZE === 'true' }],
  [withCSS],
  [withLess, lessNextConfig],
  [withSass, sassNextConfig],
- [withPWA, pwaNextConfig],
+ [withOptimizedImages, optimizedImagesNextConfig],
 ])

package.json

@@ -21,8 +21,11 @@
  "esm": "^3.2.25",
  "firebase": "^7.15.5",
  "firebase-admin": "^9.4.2",
+ "imagemin-mozjpeg": "^9.0.0",
+ "imagemin-optipng": "^8.0.0",
  "less": "^4.1.1",
  "next": "10.0.1",
+ "next-optimized-images": "^2.6.2",
  "next-pwa": "^5.0.1",
  "null-loader": "^4.0.1",
  "raw-loader": "^4.0.2",
@@ -33,7 +36,8 @@
  "reactfire": "^3.0.0-rc.0",
  "redux": "^4.0.5",
  "sass": "^1.32.8",
- "swr": "0.2.3"
+ "swr": "0.2.3",
+ "webp-loader": "^0.6.0"
  },
  "license": "MIT",
  "devDependencies": {