Making Linaria work with Next js

Making Linaria work with Next js.md

add linaria

yarn add -E linaria @zeit/next-css

.babelrc

{
  "presets": ["next/babel", "linaria/babel"]
}

next.config.js

const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  webpack(config, { isServer }) {
    config.module.rules[0].use = [
      config.module.rules[0].use,
      {
        loader: "linaria/loader",
        options: {
          sourceMap: process.env.NODE_ENV !== "production"
        }
      }
    ];
    return config;
  }
});

pages/index.js

import React from 'react'
import { styled } from 'linaria/react'

const Box = styled.div`
  margin-top: 40px;
  margin-left: 40px;
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: spin 2s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
`

export default () => {
  return (
    <Box>Zero runtime CSS in JS</Box>
  )
}