Gemvale

    Next.js

    Ammolite can be used with Next.js as a plugin.

    Currently support both Webpack and Turbopack implementation.

    Installation

    Install these packages as dev dependencies in the project:

    npm
    yarn
    pnpm
    bun
    npm i -D @ammolite/next @ammolite/postcss

    Configuration

    Add the following Next.js configuration:

    JavaScript(CJS)
    JavaScript(ESM)
    TypeScript
    next.config.js
    const { ammolite } = require("@ammolite/next/webpack");

/* @type {import("next").NextConfig} */
let config: NextConfig = {
    /* ... */
};

const withAmmolite = ammolite();

config = withAmmolite(config);

module.exports = config;

    And add the following PostCSS configuration:

    CommonJS
    ESModule
    postcss.config.js
    /** @type {import("@ammolite/postcss").PluginOptions} */
const ammoliteOptions = {};

/** @type {import("postcss-load-config").Config} */
module.exports = {
    plugins: [
        [
            "@ammolite/postcss",
            ammoliteOptions,
        ],
    ],
};

    Or follow Next.js configuration:

    npm
    yarn
    pnpm
    bun
    npm i -D postcss-preset-env postcss-flexbugs-fixes
    CommonJS
    ESModule
    postcss.config.js
    /** @type {import("postcss-preset-env").pluginOptions} */
const presetEnvOptions = {
    autoprefixer: {
        flexbox: "no-2009",
    },
    stage: 3,
    features: {
        "custom-properties": false,
    }
};

/** @type {import("@ammolite/postcss").PluginOptions} */
const ammoliteOptions = {};

/** @type {import("postcss-load-config").Config} */
module.exports = {
    plugins: [
        [
            "postcss-preset-env", 
            presetEnvOptions,
        ],
        "postcss-flexbugs-fixes",
        [
            "@ammolite/postcss",
            ammoliteOptions,
        ],
    ],
};

    In case there are no any CSS file, create one and import it:

    JavaScript
    TypeScript
    src/app/layout.jsx
    import "index.css";

export default () => {
    // ...
}