Skip to content

Latest commit

 

History

History
95 lines (70 loc) · 2.47 KB

README.md

File metadata and controls

95 lines (70 loc) · 2.47 KB
Raw

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 and Webpack Virtual Modules.

Try it before you buy it

Open in StackBlitz

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

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

/** @type {import('next-with-linaria').LinariaConfig} */
const config = {
  // ...your next.js config
};
module.exports = 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 in the app directory. And the pages directory of course as well.

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.