Membuat Style dan CSS Module pada Next.js

Belajar menambahkan Stylesheet baru dan membuat CSS Module untuk komponen Next.js.

https://www.elcreativeacademy.com/2021/02/membuat-komponen-layout-pada-nextjs.html

Pada pembelajaran kali ini, penulis akan menunjukkan cara menambahkan atau membuat styling pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-lima dari pembelajaran ini.

Pada bagian sebelumnya, kita telah belajar membuat komponen Layout untuk dapat ditampilkan pada setiap komponen halaman Next.js. Tetapi, dari awal seri ini kita belum pernah memberikan Styling kedalam aplikasi yang kita buat. Maka dari itu, pada artikel ini kita akan membahasnya. 


Menambahkan Style CSS pada Next.js

Kalian dapat memasukkan CSS kedalam aplikasi Next.js dengan beberapa cara seperti menambahkan Style atau Stylesheet Global, membuat Style untuk masing-masing halaman, membuat style dengan file style.jsx, menggunakan modul CSS, dll.

Secara Default, Next.js mendukung stylesheet untuk setiap komponen. Disini, kita akan belajar menambahkan Style dengan cara menggunakan Stylesheet Global dan menggunakan modul CSS (CSS Module).

Membuat Stylesheet Global

Hal pertama yang harus kita lakukan adalah membuat Stylesheet Global. Sebenarnya, kita tidak perlu membuat Style baru karena pada dasarnya Next.js sudah memiliki style dasar yang ada pada folder styles. Sekarang, bukalah file globals.css yang ada pada folder styles.css dan hapuslah semua kode CSS dan pastekan CSS berikut kedalamnya:


@import url('https://fonts.googleapis.com/css2?family=Google Sans:wght@300;400;600;700&display=swap');

body {
  background: #eee;
  color: #212121;
  font-family: 'Google Sans';
  font-size: 16px;
  margin: 0;
  padding: 0;
}
a {
  color: #2962ff;
  text-decoration: none;
  outline: none;
}
.konten {
  margin: 100px auto 0 auto;
}
nav {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  width: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 24px;
}
nav a {
  color: inherit;
  margin: 0 12px;
}
nav a:hover {
  color: #2962ff;
}
nav .logo {
  margin-right: auto;
}
main {
  max-width: 960px;
  margin: 0 auto;
}
footer {
  display: block;
  text-align: center;
  padding: 30px 0;
  margin-top: 60px;
  color: #212121;
  border-top: 1px solid #e5e5e5;
}

File globals.css diatas akan berpengaruh pada keseluruhan komponen halaman aplikasi Next.js.

Baris pertama pada kode CSS diatas, kita telah meng-import Font dari Google Font yang bernama Google Sans dengan font-weight yang berbeda-beda. 

Catatan: "Google Sans" adalah font batasan yang sebenarnya tidak boleh dipakai untuk publik, hanya Website Google yang diperbolehkan untuk memakainya.

Disini, penulis tidak akan menjelaskan setiap baris CSS diatas karena penulis yakin bahwasannya kalian sudah paham dengan kode CSS dasar diatas.

Jika dilihat pada Browser, hasil Style CSS diatas akan terlihat seperti berikut:

Styling

Sampai disini kita telah berhasil membuat style untuk setiap komponen halaman Next.js.

Sekarang bukalah file _app.js yang ada di dalam folder pages. Lihatlah kode pada baris paling atas:


import '../styles/globals.css';

Perlu diperhatikan bahwa kita telah meng-import file globals.css yang ada pada folder styles didalamnya. Inilah mengapa kita dapat berhasil membuat styling seperti pada gambar diatas. Jika kita tidak meng-importnya, maka stylenya juga akan hilang. Karena kita telah mengimportnya pada komponen ROOT, maka peng-importan file CSS diatas juga akan berpengaruh pada semua komponen yang ada.

Menggunakan CSS Module

Modul CSS (CSS Module) dapat mengizinkan kita untuk membuat style untuk masing-masing komponen halaman yang kemudian kita dapat meng-importnya kedalam komponen halaman yang diinginkan.

Next.js secara otomatis akan membuat Scope untuk style tersebut dengan menambahkan karakter acak kedalam nama class dan selector lainnya. Artinya, style tersebut hanya akan diterapkan hanya pada komponen tertentu sehingga kalian tidak perlu khawatir dengan nama class yang conflict (nama class yang sama) antara komponen yang berbeda.

Kembali lagi kedalam folder styles. Didalamnya kita telah memiliki file Home.module.css. File modul CSS tersebut akan ter-import kedalam Homepage. Perhatikanlah nama dari file tersebut. Untuk membuat Modul CSS, kita perlu menggunakan nama .module.css. Contoh, jika kalian ingin membuat modul CSS untuk halaman tentang, maka kalian dapat memberinya nama Tentang.module.css.

Sekarang, bukalah file Home.module.css, hapus semua kode dan pastekan kode CSS berikut kedalamnya:


.kontainer {
  background: red;
}

Kemudian, kita perlu mengimport modul CSS tersebut kedalam halaman utama. Bukalah file index.js pada folder pages. Tambahkan import berikut kedalam file tersebut:


import styles from "../styles/Home.module.css"
...
...

Karena kita telah membuat selector css .kontainer tetapi tidak ada elemen pada Homepage yang memiliki selector tersebut, maka kita perlu memasukkan nama class baru kedalam elemen <main>. Tambahkanlah kode className={styles.kontainer} kedalam elemen <main> sehingga keseluruhan kodenya menjadi seperti berikut:


import styles from "../styles/Home.module.css"

export default function Home() {
  return (
    <main className={styles.kontainer}>
      <h1>Selamat Datang di EL Creative Academy</h1>
    </main>
  )
}

Pada kode diatas, kita telah menambahkan atribut class dengan nilai kontainer (style.kontainer). Jika kalian memiliki nama class lain, misalnya .nilaicss, maka kalian dapat mengubahnya menjadi style.nilaicss. Perlu diperhatikan juga, untuk menerapkan modul CSS, kalian perlu meng-import file modul CSS.

Jika dilihat pada Browser, maka tampilannya akan terlihat seperti berikut:

CSS Module

Sekarang, mari kita bahas lebih lanjut. Bukalah Developer Tools pada Browser. Pada elemen <main> kita akan melihat value dari atribut class yang acak/random:

Random Class

Jadi, jika kita menggunakan nama class yang sama pada komponen yang berbeda. Maka tidak akan conflict sehingga khawatir dengan hal itu. 

Sekarang, bukalah file Home.module.css. Hapus semua kode dan salin kode CSS berikut kedalamnya:


.tengah {
  text-align: center;
}

Kembali ke file index.js pada folder pages. Ubah kode styles.kontainer menjadi styles.tengah:


<main className={styles.tengah}>

Kemudian, tambahkanlah satu elemen paragraf tepat dibawah elemen heading 1:


<p>Ini adalah Blog yang dibuat dengan menggunakan Next.js</p>

Berikut adalah keseluruhan kodenya:


import styles from "../styles/Home.module.css"

export default function Home() {
  return (
    <main className={styles.tengah}>
      <h1>Selamat Datang di EL Creative Academy</h1>
      <p>Ini adalah Blog yang dibuat dengan menggunakan Next.js</p>
    </main>
  )
}

Berikut adalah perubahan yang akan terlihat pada Browser:

Final CSS

Perlu diperhatikan bahwa Module CSS yang kita buat diatas hanya akan diterapkan pada halaman Homepage. Perlu diketahui juga bahwasannya kita tidak dapat menggunakan selector elemen dan id, hanya selector class yang diperbolehkan.

Menambahkan Module CSS Baru

Kalian dapat menambahkan modul CSS baru sesuka hati. Sebagai latihan, buatlah sebuah file bernama Postingan.module.css didalam folder styles:

Modul CSS Baru

Karena artikel pembelajaran ini sudah lumayan panjang, Mungkin bagian ini kita lanjutkan pada bagian yang akan datang saja yaa. Hehehe.

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-6 Repository GitHub.

Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Diskusikan

0 Diskusi