Mencoba Next.js 14 👀

Pengalaman ketika menggunakan Next.js 14.

Beberapa waktu terakhir saya mempelajari banyak hal terkait frontend development. Salah satunya adalah Next.js 14 dengan app router. Ada banyak fitur baru dari versi ini, seperti yang disebutkan dalam blognya:

Saya akan membahas beberapa fitur yang sudah pernah saya coba dalam post ini.

Turbopack

Pada saat post ini dibuat, compiler turbopack sudah bisa digunakan pada local development server dengan menggunakan flag --turbo.

next dev --turbo

Untuk production sendiri masih belum bisa menggunakan turbopack karena masih ada tests yang belum passed. Kita bisa mengecek statusnya di areweturboyet.com.

Perbedaannya dengan compiler yang sekarang (webpack) cukup terasa karena turbopack sendiri menggunakan Rust engine yang katanya "blazingly fast" 👀

Server actions

Server actions memungkinkan kita untuk berinteraksi langsung dengan backend (seperti database) tanpa perlu menggunakan API. Penggunaannya adalah dengan menggunakan directive 'use server', directive ini adalah fitur dari React di channel canary.

Server action ini saya gunakan di website ini untuk membuat preview dari sebuah link. Kodenya kurang lebih seperti berikut:

'use server'

import { JSDOM } from 'jsdom'

async function getOpenGraphTags(url: URL | string) {
  try {
    const response = await fetch(url)
    if (!response.ok) {
      throw new Error(`Failed to fetch data from ${url}`)
    }

    const html = await response.text()
    const dom = new JSDOM(html)
    const document = dom.window.document

    // Find and extract Open Graph tags
    const ogData: { [key: string]: string } = {}
    ...

    return ogData
  } catch (error) {
    console.error(error)
  }
}

export type LinkPreviewProps = {
  href: string
  ...
}

export const LinkPreview = async ({
  href,
  ...
}: LinkPreviewProps) => {
  const url = new URL(href)
  const data = await getOpenGraphTags(url)

  return ...
}

Untuk kode lengkapnya dapat dicek di file ini.

Di situ saya fetch html dari sebuah link, lalu load ke library jsdom. Karena jsdom jalan di server (Node.js), maka perlu menggunakan directive 'use server'. Berkat jsdom, saya bisa berinteraksi dengan DOM API untuk mendapatkan semua tag open graph lalu di-render ke komponen react.

Untuk menggunakannya di dalam artikel seperti ini, cukup panggil komponennya dengan mengirim props yang dibutuhkan. Karena saya menggunakan MDX, jadi saya bisa memanggil komponennya secara langsung. Hasilnya akan seperti berikut:

• Full image

  

  GitHub - hendraaagil/website: My personal website.

  My personal website. Contribute to hendraaagil/website development by creating an account on GitHub.

• Image dengan full width & limited height

  

  Hendra Agil

  A software developer specializing in JavaScript and web development.

• Teks saja

  Next.js by Vercel - The React Framework

  Next.js by Vercel is the full-stack React framework for the web.

Streaming

Untuk penjelasan detail terkait streaming bisa langsung ke dokumentasi aja karena disitu sudah sangat jelas 😅

Pada intinya, streaming akan men-stream sebuah komponen yang mempunyai proses async di dalamnya. Jadi, di awal browser akan menerima komponen fallback yang didapatkan dari <Suspense> terlebih dahulu sebelum menerima komponen lengkap setelah proses asinkron-nya selesai.

Di website ini, bisa coba kunjungi path /dashboard. Di situ saya menampilkan sebuah skeleton terlebih dahulu sebelum fetch datanya selesai. Dengan begitu, kita tidak perlu lagi melakukan fetch data di sisi client untuk mendapatkan state loading.

Tapi bukan berarti kita harus selalu menggunakan approach ini untuk semua kegiatan data fetching. Ada case di mana kita tetap memerlukan data fetching melalui sisi client. Seperti contoh di halaman dashboard saya tadi, untuk section spotify now playing masih perlu fetch data di sisi client. Karena ada keperluan untuk fetch berdasarkan interval waktu tertentu.

Metadata

Ketika menggunakan pages router, untuk kemudahan manajemen metadata kita perlu menggunakan library seperti next-seo. Jika menggunakan app router, sudah disediakan API Metadata untuk mempermudah manajemennya tanpa tambahan library:

Untuk penggunaannya hampir sama dengan library next-seo yang saya sebutkan tadi, dengan beberapa tambahan seperti file-based metadata dan dynamic image generation.

Dynamic image generation

Ini salah satu fitur yang cukup menarik bagi saya, karena kita bisa membuat image secara dinamis. Biasanya ini akan terpakai untuk membuat sebuah open graph image dari sebuah artikel karena judul tiap artikel pasti berbeda.

Cara penerapannya adalah menggunakan ImageResponse dan digunakan sebagai return di route handler. Di website ini saya sudah coba untuk menggunakannya, hasilnya akan seperti berikut:

Pengalaman Menggunakan Prisma ORM

Pengalaman saya ketika menggunakan Prisma ORM untuk pertama kalinya.

Di situ saya ada mengirim beberapa params ke route handler untuk nantinya dibawa ke komponen, lalu di-generate menjadi sebuah image. Yang cukup terbatas di sini adalah styling, tidak semua fitur CSS dapat digunakan seperti yang dijelaskan pada dokumentasi di atas.

Penutup

Mungkin itu saja sedikit pembahasan terkait apa saja yang baru di Next.js 14 terutama di app router. Tentu masih banyak fitur lain yang tidak saya sebutkan, untuk lebih lengkapnya tentu bisa kunjungi ke dokumentasi app router.

Saat post ini dibuat, website ini juga baru saja migrasi ke Next.js 14 dan app router. Jadi, kalian juga bisa cek source code-nya di GitHub.

Sebenarnya saya masih penasaran terkait deployment app router ini karena banyak fitur yang perlu aksi di server. Apakah bisa dengan mudah seperti deploy di Vercel atau tidak 😅. Mungkin nanti kalau saya sudah pernah coba untuk deploy selain di Vercel akan coba untuk share post lagi. Atau kalau kalian yang membaca ini ada pengalaman boleh share di comment 😁

Thank you.