Tutorial Styling pada Next.js

Styling merupakan bagian penting dari pengembangan web, dengan menerapkan styling dapat membuat web semakin bagus dan menarik pengguna untuk mengaksesnya.

Next.js memberikan beberapa opsi untuk mendesain aplikasi kita. Dalam tutorial ini kita akan mencoba menggunakan berbagai styling yang tersedia di Next.js. Kalian juga bisa baca styling di document resmi next.js di sini

Modul CSS

Next.js mendukung modul CSS dimana dapat memungkinkan bagi developer untuk menulis kode CSS modular dengan membuat nama kelas yang unik pada setiap komponen. Dan kalian tidak perlu khawatir akan terjadi tabrakan ketika menggunakan nama kelas yang sama di file yang berbeda.

Ketika ingin menggunakan modul CSS kalian bisa buat dengan file CSS ekstensi .module.css kemudian import ke dalam komponen kalian dan terapkan styling menggunakan nama kelas yang telah dibuat.

Sebagai contoh mari kita buat components/Button.module.css kemudian buat styling dengan kode berikut.

.success {
  color: white;
  background-color: green;
}

Kemudian silahkan buat file Button.js di dalam folder comonents yang telah dibuat. Kemudian import dan gunakan file CSS diatas.

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      className={styles.success}
    >
      Success
    </button>
  )
}

Module CSS merupakan fitur opsional dan hanya diaktifkan untuk file dengan ekstensi .module.css. Dalam production, semua file modul CSS akan digabungkan secara otomatis menjadi banyak file .css yang diperkecil dan dipisahkan.

Styled Components

Next.js juga mendukung Styled Components yang dapat memungkinkan developer menulis kode CSS sabagai literal template Javascript. dengan ini membuat lebih mudah dalam mengelola style dan menghindari tabrakan nama kelas. Untuk menggunakan Styled Component kalian install terlebih dahulu library styled-components dan import ke dalam komponen kalian.

Contohnya sabagai berikut ini. Kita akan membuat komponen Container dan Butoon.

import styled from 'styled-components';

const Container = styled.div`
  padding: 1rem;
  background-color: lightblue;
`;

const Button = styled.button`
  color: white;
  background-color: green;
`;

Kemudian kalian dapat menggunakan komponen Container dan Button dalam kode kalian dan menerapkan style sebagai berikut.

// ...
const App = () => {
  return (
    <Container>
      <Button>Success</Button>
    </Container>
  );
};

export default App;

Tailwind CSS

Tailwind CSS merupakan framework CSS yang mengutamakan utilitas yang bekerja sangat baik dengan Next.js.

Langkah awal ketika kalian menerapkan Tailwind CSS ke dalam next.js yaitu silahkan kalian intall terlebih dahulu Tailwind CSS dan jalankan perintah init untuk membuat file tailwind.config.js dan postcss.config.js

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Silahkan kalian buka file tailwind.config.js dan tambahkan konfigurasi berikut untuk menggunakan nama kelas Tailwind CSS.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Kalian tidak perlu memodifikasi file postcss.config.js

Langkah selanjutnya kita perlu menambahkan import style Tailwind CSS ke dalam folder app/globals.css di aplikasi kalian.

@tailwind base;
@tailwind components;
@tailwind utilities;

Selanjutnya silahkan kalian buat file layout.tsx di dalam folder app yang sudah dibuat tadi. Kemudian import globals.css untuk menerapkan style ke setiap rute dalam aplikasi kalian.

import type { Metadata } from 'next'
 
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Website Leravio',
  description: 'Leravio | Tutorial Styling pada Next.js',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Setelah berhasil menginstall Tailwind CSS dan menambahkan style global, maka kalian dapat menggunakan class utilitas Tailwind di aplikasi anda.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Leravio!</h1>
}

Sass

Next.js juga memiliki dukungan bawaaan untuk Sass menggunakan ekstensi .scss dan .sass. kalian dapat menggunakan Sass tingkat komponen melalui Modul CSS dan ekstensi .module.scss atau .module.sass.

Langkah awal silahkan kalian install terlebih dahulu Sass di dalam next.js kalian dengan perintah berikut.

npm install --save-dev sass

Jika kalian ingin melakukan konfigurasi kompiler Sass, kalian bisa menggunakan sassOptions di next.config.js.

const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Next.js mendukung variabel Sass yang diekspor dari file Modul CSS. Sebagai contoh misalnya ingin menggunakan variabel Sass dengan warna hijau yang diekspor.

// app/variables.module.scss

$primary-color: green;
 
:export {
  primaryColor: $primary-color;
}

// pages/_app.js

import variables from '../styles/variables.module.scss'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}

Penutup

Pada tutorial kali ini kita telah membahas mengenai Styling pada Next.js. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.