Cara Install NextJS + twin.macro + Emotion

Ada beberapa kemudahan ketika kita menggunakan twin.macro dan Emotion pada proyek NextJS kita, seperti yang telah saya tuliskan pada twin.macro Sebagai Alternatif menggunakan TailwindCSS dan CSS-in-JS . Nah, kesempatan kali ini saya coba menjelaskan bagaimana cara install twin.macro di NextJS dengan Emotion.

Walaupun di dokumentasi twin.macro, bagian github NextJS sudah ada tata caranya. Namun, saya akan menuliskan versi bahasa Indonesia dan yang lebih mudah dimengerti.

Install NextJS

npx create-next-app

Install Emotion

npm install @emotion/react @emotion/styled @emotion/css @emotion/server

Install twin.macro dan babel

npm install -D twin.macro tailwindcss @emotion/babel-plugin babel-plugin-macros

Menambahkan Global Styles

Global Styles ini berisikan beberapa default style, style untuk animasi @keyframes dan beberapa class css yang membuat ring classes dan  box-shadows bekerja.

Menambahkan global styles dengan import di _app.js :

// page/_app.js
import { GlobalStyles } from 'twin.macro'

const App = ({ Component, pageProps }) => (
  <div>
    <GlobalStyles />
    <Component {...pageProps} />
  </div>
)

export default App

Menambahkan Config di Babel

menambahkan config pada file .babelrc.js

// .babelrc.js
module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
}

Menambahkan Config di NextJS

jika tidak menggunakan Webpack 5

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Unset client-side javascript that only works server-side
      // https://github.com/vercel/next.js/issues/7755#issuecomment-508633125
      config.node = { fs: 'empty', module: 'empty' }
    }

    return config
  },
}

Bila menggunakan webpack 5

// next.config.js
module.exports = {
  future: { webpack5: true }, // Use webpack 5
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Unset client-side javascript that only works server-side
      // https://github.com/vercel/next.js/issues/7755#issuecomment-508633125
      config.resolve = {
        fallback: { fs: 'empty', module: 'empty' },
      }
    }

    return config
  },
}

Menambahkan Tailwind Config :

Kita menambahkan Tailwind Config, untuk bisa melakukan custom style pada Tailwind. Misalnya warna, font-size, dst. Namun, kita tidak perlu menambahkan PurgeCSS karen Twin's sudah menyediakannya.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {},
    },
  },
  plugins: [],
}

npx tailwindcss-cli@latest init --full

Twin's ini saya rekomendasikan, apabila teman-teman berencana untuk menggunakan  CSS-in-JS. Kalau tidak menggunakan CSS-in-JS, saya rasa tidak masalah.

Selain itu, saya membuat boilerplate/starter untuk membuat NextJS+Twin's+Emotion di Github:

Referensi