Next.js + Turbopack + PostCSS example

next.config.ts

// next.config.mjs
import type { NextConfig } from 'next'

function getBabelLoader() {
  return {
    loader: 'babel-loader',
    options: {
      presets: [
        [
          'next/dist/compiled/babel/preset-typescript',
          {
            allowNamespaces: true,
          },
        ],
        [
          'react-strict-dom/babel-preset',
          {
            debug: true,
            dev: process.env.NODE_ENV === 'development',
            rootDir: process.cwd(),
          },
        ],
      ],
    },
  }
}

const nextConfig: NextConfig = {
  transpilePackages: ['react-strict-dom'],
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      use: [getBabelLoader()],
    })
    return config
  },
  experimental: {
    turbo: {
      rules: {
        '*.{js,jsx,ts,tsx}': {
          loaders: [getBabelLoader()],
        },
      },
    },
  },
}

export default nextConfig

postcss.config.mjs

export default {
  plugins: {
    'postcss-react-strict-dom': {
      include: ['src/**/*.{js,jsx,ts,tsx}'],
      babelConfig: {
        babelrc: false,
        presets: [
          [
            'next/dist/compiled/babel/preset-typescript',
            {
              allowNamespaces: true,
            },
          ],
          [
            'react-strict-dom/babel-preset',
            {
              debug: true,
              dev: process.env.NODE_ENV === 'development',
              rootDir: process.cwd(),
            },
          ],
        ],
      },
    },
    autoprefixer: {},
  },
}

Thank you so much for all the explanations ! Some of this should be in RSD doc for sure !