Styling

Di next.js untuk styling dapat dengan beberapa cara

Global Style

Global style akan menerapkan semua css kesemua page. Biasanya digunakan untuk style yang digunakan pada semua tag html.contoh: input, paragraph,button

untuk menggunakan global style yaitu dengan menuliskan css pada file ./app/global.css atau jika menggunakan Pages Router pada ./styles/globals.css

CSS Module

Dengan css module dapat menggunakan css dengan nama unik disetiap halaman, dilain itu tidak khawatir jika nanti terjadi konflict apabila terdapat nama class yang sama diclass lain.

biasanya css module memiliki ekstensi .module.css misal page.module.css

bagaiman untuk menerapkan pada komponen? Untuk penerapan seperti ini

import styles from "./page.module.css";

export default function Page() {
  return (
    <div className={styles.container}>
      <p className={styles.title}>title</p>
    </div>
  );
}

Sass Style

Untuk menggunakan sass terlebih dahulu install package sass

npm install sass -D

kemudian ubah semua file .css ke .scss

atau jika ingin kustom, bisa menambahkan sedikit konfigurasi pada file ./next.config.js

const path = require("path");

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};