Package Exports

next-with-linaria
next-with-linaria/lib/with-linaria.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-with-linaria) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Next.js + Linaria

What is this?

Since the Next.js app directory feature doesn't work with the @linaria/webpack5-loader anymore, therefore the next-linaria package sadly also doesn't work. This package solves that issue with a custom linaria webpack loader.

Try it before you buy it

Installation

npm

    npm install next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react

pnpm

    pnpm install next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react

yarn

    yarn add next-with-linaria @wyw-in-js/babel-preset @linaria/core @linaria/react

Usage

Basic Setup

// next.config.js
const withLinaria = require('next-with-linaria');

/** @type {import('next-with-linaria').LinariaConfig} */
const config = {
  // ...your next.js config
  linaria: {
    // Linaria options here
  },
};
module.exports = withLinaria(config);

Rspack Support

To use Rspack instead of Webpack, you can combine this package with next-rspack:

// next.config.js
const withRspack = require('next-rspack');
const withLinaria = require('next-with-linaria');

/** @type {import('next-with-linaria').LinariaConfig} */
const config = {
  // ...your next.js config
  linaria: {
    // Linaria options here
  },
};

module.exports = withRspack(withLinaria(config));

Now you can use linaria in all the places where Next.js also allows you to use CSS Modules. That currently means in every file in the app directory and the pages directory.

Performance Optimization

The fastCheck option is enabled by default to improve build performance. This optimization skips the Linaria transform process for files that don't contain Linaria syntax, which can reduce build times for large projects.

If you experience any issues with the optimization, you can disable it:

// next.config.js
const withLinaria = require('next-with-linaria');

/** @type {import('next-with-linaria').LinariaConfig} */
const config = {
  // ...your next.js config
  linaria: {
    // Disable performance optimization if needed
    fastCheck: false,
  },
};
module.exports = withLinaria(config);

Global Styles Restrictions

If you want to use linaria for global styling, you need to place those styles into a file with the suffix .linaria.global.(js|jsx|ts|tsx):

// app/style.linaria.global.tsx
import { css } from '@linaria/core';

export const globals = css`
  :global() {
    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    @font-face {
      font-family: 'MaterialIcons';
      src: url(../assets/fonts/MaterialIcons.ttf) format('truetype');
    }
  }
`;

// app/layout.tsx
import './style.linaria.global';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

This convention is needed because the loader needs to know which files contain global styles and which don't.