Next.jsでgooberを使ってみるヘ(^o^)ノ

Next.js

はじめに

gooberというcss-in-jsのパッケージがあります

github.com

使い勝手はstyled-componentsとか、emotionなんかと同じです

ただ、パッケージのファイルサイズがびっくりの1KBです😆

このサイズは魅力的なので、Next.jsで使ってみましょう

Installation

$ npm install goober@next

最新がほしいのでnextバージョンを指定しました

Using with Next.js

コンポーネントを作成します

// components/HeadingTitle.tsx
import { styled } from 'goober';

export const HeadingTitle = styled('h1')`
  color: blue;
`;

Homeページで使ってみます　

// pages/index.tsx
import { NextPage } from 'next';
import { HeadingTitle } from '../components/HeadingTitle';

const Home: NextPage = () => (
  <HeadingTitle>Welcome goober with Next.js</HeadingTitle>
);

export default Home;

んじゃ、確認。。。あれ、rerenderエラーが。。。

Next.jsはpre-renderがデフォルトなので、SSR用の設定しないといけないみたいです

// pages/_app.tsx
import { createElement } from 'react';
import { setup } from 'goober';

const App = ({ Component, pageProps }) => {
  setup(createElement); // setup goober for SSR

  return (
    <Component {...pageProps} />
  );
};

export default App;

あらためて、動作確認

<head>
  ...
  <style id="_goober"> .go2445103859{color:blue;}</style>
</head>
<body>
  ...
  <h1 class="go2445103859">Welcome goober with Next.js</h1>
  ...
</body>

ちゃんとstyleがあたってますね 👍

まとめ

めちゃ簡単にNext.jsに導入できました

これで更にファイルサイズを小さく抑えることができそうですね

Enjoy goober ヘ(^o^)ノ