✨Cara Embed Post Twitter di Next.js dengan Library react-tweet

Halo teman-teman dev, dikesempatan ini, saya mau share cara embed post twitter(x) di Next.js.

Sebelum masuk ke tutorial, kita coba ingat kembali definisi dari embed, dalam konteks web development, "embed" merujuk pada penyisipan atau penggabungan elemen media atau konten dari satu situs web ke situs web lain. Hal ini memungkinkan kita untuk menampilkan konten yang di-host oleh pihak ketiga, seperti video, audio, gambar, peta, formulir, atau widget lainnya, langsung di halaman web kita sendiri.

Di artikel ini, saya akan sharing cara menyisipkan post twitter(x) ke dalam project Next.js, adapun versi Next.js yang digunakan yaitu Next.js versi 13. Jika tidak menggunakan Next.js juga sebenarnya tidak masalah, tutorial ini juga bisa diikuti dengan project React/Vite.

Buat Project Next.js

Disini saya tidak akan menjelaskan secara detail cara setup project Next.js, untuk setup nya bisa mengikuti panduan di dokumentasi resmi Next.js.

Install Library react-tweet

Berikut cara install react-tweet dengan npm:

npm i react-tweet

Menggunakan Module react-tweat di Komponen

Selanjutnya kita dapat mengimplementasikan module react-tweat ke dalam komponen, sebagai berikut:

Import Module

import { Tweet } from "react-tweet";

Panggil Komponen Tweet

<Tweet id={id} />

Module tweet membutuhkan {id} value sebagai props atau properti id, id ini bisa kita ambil dari id terakhir post twitter. Misal:

https://twitter.com/vercel/status/1683920951807971329

Jadi id yang kita gunakan adalah {1683920951807971329}

Tampilan Full Code

Berikut ini contoh saya implementasi react-tweet di /pages/tweet.tsx

import { Tweet } from "react-tweet";

export default function Home() {
  return <Tweet id={1683920951807971329} />;
}

Lampiran

Oke teman-teman, demikian tutorial singkat cara embed post twitter di Next.js atau React dengan react-tweet. Semoga bermanfaat.