with-nextjs.md

sidebar_position	3

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

With Next.js

Install

yarn add --dev @griffel/next-extraction-plugin

npm install --save-dev @griffel/next-extraction-plugin

Usage

:::info

Please configure @griffel/webpack-loader first.

:::

In next.config.js file you'll need to add the next-plugin from @griffel/webpack-extraction-plugin like so:

// next.config.js
const { withGriffelCSSExtraction } = require('@griffel/next-extraction-plugin');

module.exports = withGriffelCSSExtraction()({
  webpack(config) {
    config.module.rules.unshift({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: '@griffel/webpack-loader',
        },
      ],
    });

    // If your project uses TypeScript
    config.module.rules.unshift({
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: '@griffel/webpack-loader',
          options: {
            babelOptions: {
              presets: ['next/babel'],
            },
          },
        },
      ],
    });

    return config;
  },
});