(docs) add Next.js setup instructions

[MoOx]

There are some diff between Expo & Next.js, to setup this properly (especially because of babel config - when using turbopack), that's why I think it's important for new comers to have this in the guide.

[javascripter]

We should add exclude option in the module rule so that unrelated node_modules are not processed by this babel loader.

        exclude: /node_modules(?!\/react-strict-dom)/,

See:
https://github.com/facebook/stylex/blob/4a4fe98486cf99a9783e10ec07a41452790a17a6/examples/example-nextjs/next.config.js#L21

[javascripter]

      "next/dist/compiled/babel/preset-typescript",

This line might not be necessary. We started using Turbopack for development at our company(not Meta) and so far we are using the below config without that line.

function getReactStrictDOMBabelLoader() {
  const dev = process.env.NODE_ENV !== 'production'

  return {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      parserOpts: {
        plugins: ['typescript', 'jsx'],
      },
      presets: [
        [
          'react-strict-dom/babel-preset',
          {
            debug: dev,
            dev,
            rootDir: process.cwd(),
          },
        ],
      ],
    },
  }
}

function withReactStrictDOM(nextConfig: NextConfig) {
  return {
    ...nextConfig,
    webpack(config: any, context: WebpackConfigContext) {
      // Configure StyleX / React Strict DOM
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules(?!\/react-strict-dom)/,
        use: [getReactStrictDOMBabelLoader()],
      })

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, context)
      }

      return config
    },
    turbopack: {
      ...nextConfig.turbopack,
      rules: {
        ...nextConfig.turbopack?.rules,
        // Note: Intentionally excluding top-level files in the src directory to skip middleware.ts from being processed
        // due to a Turbopack bug (https://github.com/vercel/next.js/issues/79592)
        './src/*/**/*.{js,jsx,ts,tsx}': {
          default: {
            foreign: false,
            loaders: [getReactStrictDOMBabelLoader()],
          },
        },
        '**/node_modules/react-strict-dom/**/*.{js,jsx,ts,tsx}': {
          default: {
            foreign: false,
            loaders: [getReactStrictDOMBabelLoader()],
          },
        },
      },
    },
  }
}

Note that there is currently a bug in Next.js that prevents Turbpack loader from running when middleware.ts exists.
We are working around this limitation by excluding top-level src/*.{ts,tsx} files from being compiled with babel-loader, but this is specific to our setup and probably isn't something we want to recommend here.

foreign: true

is meant to exclude node_modules etc but I'm not too sure if this config is correct as it's not documented well. Just something we added to make it work.

[necolas]

Merged in #368. We can iterate from here as needed