Menambahkan Gambar/Aset dan Custom Metadata pada Next.js

Belajar menambahkan gambar atau aset publik dan metadata custom pada Next.js.

Menambahkan Gambar/Aset dan Custom Metadata pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara menambahkan gambar serta membuat metadata pada tag head pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian ke-delapan dari pembelajaran ini.

Disini, kita akan menambahkan satu gambar logo pada halaman utama (Homepage) yang berhubungan dengan aset statis pada aplikasi Next.js.

Menambahkan Gambar pada Next.js

Menambahkan gambar pada Next.js sangatlah mudah. Jika kita memiliki gambar custom, maka kita dapat meletakkan file gambar tersebut kedalam folder public. Semua file yang ada di dalam folder tersebut akan dapat diakses melalui Browser.

Didalam folder public, secara default kita telah memiliki dua file yaitu favicon.ico dan vercel.svg. Disini, kita tidak memerlukannya karena kita akan menambahkan file gambar custom.

Sebagai contoh, penulis sudah menyediakan file gambar (Logo EL Creative yang bernama logo.png) yang sudah ada pada folder public:

File Logo

Berikut adalah file logo.png:

Logo EL Creative

Seperti yang sudah penulis beritahukan diatas, kita akan menambahkan gambar tersebut kedalam halaman utama (Homepage). Untuk melakukannya, bukalah file index.js pada folder pages dan menambahkan tag <img> kedalamnya (Setelah paragraf):

<img src="/logo.png"></img>

Seluruh kodenya akan terlihat seperti berikut:

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>
      
      <img src="logo.png"></img>
    </main>
  )
}

Jika dibuka pada Browser, maka tampilannya akan seperti berikut:

Hasil Gambar dari Tag <img>

Itulah cara umum yang biasa kita gunakan untuk menambahkan gambar kedalam halaman.

Menggunakan Image Component

Pada Next.js versi 10, kita dapat menggunakan komponen image (Image Component) dan kita dapat menggantikan tag <img> dengan komponen Image.

Untuk menggunakan komponen Image, kita perlu meng-importnya dari Next.js terlebih dahulu. Tambahkan import berikut tepat dibawah import styles:

import Image from "next/image"

Selanjutnya, kita akan mengubah tag <img> yang telah kita buat diatas menjadi seperti berikut:

<Image src="/logo.png" width={150} height={150}></Image>

Perlu diperhatikan bahwasannya untuk menggunakan komponen Image, kita juga harus menambahkan dan mengatur atribut width dan height.

Jadi, keseluruhan kodenya akan terlihat seperti berikut:

import styles from "../styles/Home.module.css"
import Image from "next/image"

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>

      <Image src="/logo.png" width={150} height={150}></Image>
    </main>
  )
}

Berikut adalah perubahannya jika dilihat pada Browser:

Komponen Image

Kelebihan dari komponen Image jika dibandingkan dengan tag standar HTML <img> adalah Lazyload. Artinya, jika terdapat gambar yang ada dibagian bawah halaman dan tidak terlihat pada jendela Browser, maka gambar tersebut tidak akan termuat sampai kita men-scroll halaman tersebut. Dengan kata lain, gambar tersebut akan di-optimalisasi sehingga dapat meningkatkan kecepatan loading halaman Next.js.

Menambahkan Metadata pada Next.js

Sadarkah kalian bahwasannya sepanjang pembelajaran ini, kita belum pernah mengatur tag <title> serta tag untuk bagian <head> lainnya (Metadata). Semua halaman yang telah kita buat sejauh ini hanya memiliki judul yang sama seperti URL Development (localhost:3000) yang dapat kita lihat pada Tab Browser.

Maka dari itu, disini kita akan belajar menambahkan Metadata Custom untuk masing-masing komponen halaman Next.js. Untuk menambahkannya, kita perlu meng-import komponen Head dari Next.js.

Sekarang, bukalah file index.js pada folder pages dan tambahkan kode import berikut tepat dibagian atas:

import Head from "next/head"

Selanjutnya, untuk menambahkan komponen Head pada masing-masing komponen halaman Next.js, maka kita perlu mengelilingi semua elemen Output dengan Fragment <>...</>. Keseluruhan kodenya menjadi seperti berikut:

import Head from "next/head"
import styles from "../styles/Home.module.css"
import Image from "next/image"

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>

        <Image src="/logo.png" width={150} height={150}></Image>
      </main>
    </>
  )
}

Kemudian, kita akan menambahkan dua metadata yaitu <title> (Judul) dan <meta name="description" content="Blog EL Creative Academy"> (Meta Description). Tambahkan kode berikut tepat dibawah Fragment pembuka <>:

<Head>
  <title>EL Creative Blog | Home</title>
  <meta name="description" content="Blog EL Creative Academy"></meta>
</Head>

Keseluruhan kodenya akan terlihat seperti berikut:

import Head from "next/head"
import styles from "../styles/Home.module.css"
import Image from "next/image"

export default function Home() {
  return (
    <>
      <Head>
        <title>EL Creative Blog | Home</title>
        <meta name="description" content="Blog EL Creative Academy"></meta>
      </Head>

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

        <Image src="/logo.png" width={150} height={150}></Image>
      </main>
    </>
  )
}

Jika, kalian membuka Browser dan melihat pada Tab, maka akan terlihat perubahan judul. Perubahan Meta Description dapat kalian lihat melalui Inspect Element.

Disini, penulis telah melakukan hal yang sama untuk komponen halaman tentang.js, 404.js dan index.js yang ada pada folder postingan. Hanya merubah "Home" menjadi nama yang sesuai dengan komponen halaman dan jangan lupa untuk meng-import komponen Head dari Next.js.

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-9 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.

Updated: Friday, 05 March 2021

Diskusikan

0 Diskusi