@wyw-in-js/nextjs

Next.js integration for WyW via @wyw-in-js/webpack-loader.

This package supports:

• Webpack pipeline (next dev --webpack, next build) via @wyw-in-js/webpack-loader.
• Turbopack pipeline (next dev) via turbopack.rules and @wyw-in-js/turbopack-loader.

Installation

# npm
npm i -D @wyw-in-js/nextjs
# yarn
yarn add --dev @wyw-in-js/nextjs
# pnpm
pnpm add -D @wyw-in-js/nextjs
# bun
bun add -d @wyw-in-js/nextjs

Usage

// next.config.mjs
import { withWyw } from '@wyw-in-js/nextjs';

export default withWyw({
  // your Next config
});

By default, the plugin:

• injects @wyw-in-js/webpack-loader into Next's JS/TS pipeline;
• emits styles as *.wyw-in-js.module.css so imports are allowed from any module;
• keeps generated class names stable under Next CSS Modules (selectors are emitted as :global(...)).
• parses and evaluates JS/TS/JSX/TSX through the Oxc-backed WyW transform.

Eval resolver modes

eval.resolver: 'native' and the native step of eval.resolver: 'hybrid' use oxc-resolver with automatic tsconfig.json discovery.

The webpack path inherits @wyw-in-js/webpack-loader static resolve.alias forwarding. The Turbopack path forwards string aliases from turbopack.resolveAlias or experimental.turbo.resolveAlias when configured through withWyw().

Use hybrid when evaluated imports may rely on Next, webpack, or Turbopack resolver behavior. Use native only when oxc-resolver can resolve all evaluated imports, or mirror bundler-only aliases in oxcOptions.resolver.alias.

Options

import type { WywNextPluginOptions } from '@wyw-in-js/nextjs';

Use loaderOptions to pass options through to @wyw-in-js/webpack-loader.

Use turbopackLoaderOptions to pass JSON-serializable options to @wyw-in-js/turbopack-loader (use configFile for function/RegExp-based config).

To disable vendor prefixing (Stylis prefixer), set prefixer: false in loaderOptions and/or turbopackLoaderOptions.