【Next.js】styled-componentsを導入する

Next.jsにstyled-componentsを導入したい

styled-components側にNext.jsへの導入方法がちょろっとだけ書かれている

styled-components.com

そこにはサーバーサイド側でheadにスタイルを埋め込むため、pages/_document.jsに以下のコードをコピペしろとある

https://github.com/vercel/next.js/blob/master/examples/with-styled-components/pages/_document.js

公式のサンプル実装をみると他に

• .babelrc
• pages/_app.js
• pages/index.js

を修正していそうなので確認する

インストール

必要なモジュールのインストール

npm i -D styled-components babel-plugin-styled-components

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

SSRで利用するので"ssr": trueにしておく

他のオプションは以下にある
https://styled-components.com/docs/tooling#usage

pages/_app.js

Styled-componentsのThemeはあまりつかったことないけど、ここで設定することができる

また、GlobalStyleもここで定義する

import { createGlobalStyle, ThemeProvider } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`

const theme = {
  colors: {
    primary: '#0070f3',
  },
}

export default function App({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

pages/index.js

あとは、これで使えるようになる

import styled from 'styled-components'

const Title = styled.h1`
  font-size: 50px;
  color: ${({ theme }) => theme.colors.primary};
`

export default function Home() {
  return <Title>My page</Title>
}