Preact Next config

next.config.js

const withPlugins = require('next-compose-plugins');
const withPrefresh = require('@prefresh/next');
const nextImg = require('next-img/plugin');

const plugins = [
  [
    nextImg,
    {
      persistentCache: false,
      jpeg: {
        quality: 70,
        webp: {
          quality: 90,
          reductionEffort: 6,
        },
      },
    },
  ],
  [withPrefresh],
];

const nextConfig = {
  experimental: {
    modern: true,
    polyfillsOptimization: true,
  },

  webpack(config, { dev, isServer }) {
    // Move Preact into the framework chunk instead of duplicating in routes:
    const splitChunks = config.optimization && config.optimization.splitChunks;
    if (splitChunks) {
      const cacheGroups = splitChunks.cacheGroups;
      const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
      if (cacheGroups.framework) {
        cacheGroups.preact = Object.assign({}, cacheGroups.framework, { test });
        // if you want to merge the 2 small commons+framework chunks:
        // cacheGroups.commons.name = 'framework';
      } else {
        cacheGroups.preact = {
          name: 'commons',
          chunks: 'all',
          test,
        };
      }
    }
    if (isServer) {
      // mark `preact` stuffs as external for server bundle to prevent duplicate copies of preact
      config.externals.push(/^(preact|preact-render-to-string|preact-context-provider)([\\/]|$)/);
      // generate sitemap
      require('./scripts/generate-sitemap');
    }

    // Install webpack aliases:
    const aliases = config.resolve.alias || (config.resolve.alias = {});
    aliases.react = aliases['react-dom'] = 'preact/compat';

    // inject Preact DevTools
    if (dev && !isServer) {
      const entry = config.entry;
      config.entry = () =>
        entry().then((entries) => {
          entries['main.js'] = ['preact/debug'].concat(entries['main.js'] || []);
          return entries;
        });
    }

    return config;
  },
};

module.exports = withPlugins(plugins, nextConfig);

package.json

{
  "name": "next-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@sanity/block-content-to-react": "2.0.7",
    "@sanity/client": "1.150.7",
    "@sanity/image-url": "0.140.19",
    "@sendgrid/mail": "7.2.6",
    "@tailwindcss/ui": "0.6.2",
    "@tailwindui/react": "0.1.1",
    "dayjs": "1.9.0",
    "next": "latest",
    "next-compose-plugins": "2.2.0",
    "next-google-fonts": "1.2.1",
    "next-img": "0.3.1",
    "next-seo": "4.10.0",
    "preact": "10.5.2",
    "preact-render-to-string": "5.1.10",
    "react": "preact-compat/react#1.x",
    "react-dom": "preact-compat/react-dom#1.x",
    "react-hook-form": "6.8.6",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.1",
    "simple-react-lightbox": "3.3.4-1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "2.3.0",
    "@prefresh/next": "1.1.0",
    "globby": "11.0.1",
    "postcss-preset-env": "6.7.0",
    "prettier": "2.1.2",
    "react-refresh": "0.8.3",
    "tailwindcss": "1.8.10",
    "tailwindcss-textshadow": "2.1.3"
  }
}