Next.js 13 Sudah Rilis!


Frontend development bisa menjadi pekerjaan yang menantang, tetapi dengan tools dan library yang tepat, pekerjaan ini bisa menjadi lebih mudah dan menyenangkan. Berikut ini adalah daftar 20 tools dan library terbaik yang akan membantu kamu dalam mengembangkan aplikasi web dengan lebih efisien dan cepat.

#### 1. **React Hook Form**
[React Hook Form](https://react-hook-form.com/) adalah library yang memudahkan penanganan form di React. Dengan fitur seperti validasi yang mudah dan pengelolaan state yang efisien, kamu bisa membuat form yang ringan dan cepat.

#### 2. **Placehold.co**
[Placehold.co](https://placehold.co/) adalah situs yang menyediakan layanan untuk membuat placeholder image dengan cepat dan mudah. Kamu bisa menentukan ukuran, warna, dan teks sesuai keinginan, sangat membantu untuk mengisi tempat gambar saat pengembangan.

#### 3. **React Icons**
[React Icons](https://react-icons.github.io/react-icons/) menyediakan berbagai ikon yang bisa digunakan di proyek React. Mulai dari Font Awesome hingga Material Icons, semuanya ada dan bisa diimport sesuai kebutuhan.

#### 4. **HTML to JSX Converter**
[HTML to JSX](https://magic.reactjs.net/htmltojsx.htm) adalah tools yang berguna untuk mengkonversi kode HTML menjadi JSX yang bisa langsung digunakan di React. Ini sangat membantu saat kamu ingin mengintegrasikan template HTML ke dalam proyek React.

#### 5. **Next.js**
[Next.js](https://nextjs.org/) adalah framework React yang powerful untuk membangun aplikasi web. Dengan fitur seperti server-side rendering dan static site generation, Next.js membantu kamu membuat aplikasi yang cepat dan SEO-friendly.

#### 6. **React.js**
[React.js](https://react.dev/) adalah library JavaScript yang sangat populer untuk membangun antarmuka pengguna (UI). React memudahkan kamu untuk membuat komponen UI yang dapat digunakan kembali, sehingga pengembangan aplikasi menjadi lebih efisien.

#### 7. **Redux Toolkit**
[Redux Toolkit](https://redux-toolkit.js.org/) adalah library yang mempermudah penggunaan Redux di React. Dengan Redux Toolkit, kamu bisa mengelola state aplikasi dengan lebih sederhana dan konsisten.

#### 8. **Bootstrap**
[Bootstrap](https://getbootstrap.com/) adalah framework CSS yang membantu kamu membuat desain web yang responsif dan modern dengan cepat. Bootstrap menyediakan berbagai komponen siap pakai seperti tombol, form, dan grid system.

#### 9. **Tailwind CSS**
[Tailwind CSS](https://tailwindcss.com/) adalah framework CSS yang utility-first, artinya kamu bisa membuat desain dengan menambahkan kelas-kelas utility langsung ke elemen HTML. Sangat fleksibel dan cepat untuk digunakan.

#### 10. **Shadcn/ui**
[Shadcn/ui](https://ui.shadcn.com/) adalah library UI berbasis Tailwind CSS yang menyediakan berbagai komponen siap pakai untuk mempercepat pengembangan antarmuka pengguna.

#### 11. **React Toastify**
[React Toastify](https://github.com/fkhadra/react-toastify) adalah library untuk menampilkan notifikasi di aplikasi React. Dengan React Toastify, kamu bisa menampilkan pesan toast dengan mudah dan cepat.

#### 12. **React Markdown**
[React Markdown](https://github.com/remarkjs/react-markdown) adalah komponen untuk merender markdown sebagai React. Sangat berguna untuk menampilkan konten markdown di aplikasi web.

#### 13. **React SimpleMDE Editor**
[React SimpleMDE Editor](https://github.com/RIP21/react-simplemde-editor) adalah editor markdown yang mudah digunakan di React. Editor ini menyediakan pengalaman menulis markdown yang nyaman dan kaya fitur.

#### 14. **AOS (Animate on Scroll)**
[AOS](https://github.com/michalsnik/aos) adalah library untuk menambahkan animasi saat elemen muncul di layar saat scroll. Sangat mudah diimplementasikan dan membuat halaman web lebih menarik.

#### 15. **Sweetalert2**
[Sweetalert2](https://sweetalert2.github.io/) adalah library untuk membuat pop-up alert yang cantik dan interaktif. Sweetalert2 memberikan kontrol penuh atas tampilan dan perilaku alert.

#### 16. **React Syntax Highlighter**
[React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) adalah komponen untuk menambahkan highlight pada kode di React. Mendukung berbagai bahasa pemrograman dan tema.

#### 17. **React Modal Image**
[React Modal Image](https://github.com/aautio/react-modal-image) adalah komponen untuk menampilkan gambar dalam modal di React. Sangat berguna untuk galeri gambar atau menampilkan gambar dengan resolusi tinggi.

#### 18. **Disqus**
[Disqus](https://disqus.com/) adalah platform komentar yang bisa diintegrasikan dengan mudah ke dalam aplikasi web. Disqus memudahkan pengguna untuk berinteraksi dan memberikan feedback.

#### 19. **Fuse.js (Fuzzy Search)**
[Fuse.js](https://www.fusejs.io/) adalah library untuk melakukan pencarian fuzzy di JavaScript. Sangat berguna untuk fitur pencarian di aplikasi web yang memerlukan pencarian yang toleran terhadap kesalahan ketik.

#### 20. **Chart.js**
[Chart.js](https://www.chartjs.org/) adalah sebuah library JavaScript yang digunakan untuk membuat grafik interaktif di halaman web. Dengan Chart.js, kamu dapat dengan mudah membuat berbagai jenis grafik, seperti bar chart, line chart, pie chart, dan sebagainya.

Dengan menggunakan tools dan library diatas, pekerjaan frontend development kamu bisa jadi lebih cepat dan efisien. Jika ada tambahan tools atau library lainnya yang menurut kamu menarik untuk dibahas, langsung tulis saja di kolom komentar di bawah! Happy coding 😉

20 Tools dan Library yang Sangat Berguna untuk Frontend Development


Ada banyak cara untuk mengintegrasikan Google Tag Manager (GTM) dan Google Analytics 4 (GA4) di Next.js yang bersebaran di internet. Tapi banyak dari artikel-artikel tersebut yang kurang jelas tentang cara paling mudah di implementasi atau yang benar untuk dilakukan itu seperti apa. Nah, postingan ini bertujuan untuk menyederhanakan proses dengan menyajikan metode langsung untuk mengintegrasikan GA4 menggunakan GTM di Next.js 13 dan udah gua praktekan juga.

<br>

### Menyiapkan Properti GTM dan GA4

Sebelum masuk ke kodingan pastikan kamu sudah punya akun Google Tag Manager. Kalau belum punya kamu bisa buat dulu [disini](https://tagmanager.google.com/). Pastikan juga untuk meng-copy GTM ID kamu (GTM-XXXXXX).

Kamu juga perlu properti Google Analytics GA4, kamu bisa buat di menu [Admin Google Analytics](http://analytics.google.com/). Pastikan kamu membuat sebuah aliran data web (web stream) dan copy Measurement ID-nya (G-XXXXXXX).

<br>

### Buat Tag Baru di Google Tag Manager

Di menu GTM, buat sebuah container jika kamu belum punya.

1. Klik tombol "New Tag":

![New Tag](https://www.rodyvansambeek.com/images/blog/ga4-newtag.png)

2. Klik "Choose a tag type to begin setup..."
3. Pilih "Google Analytics: GA4 Configuration"
4. Isi Measurement ID dan kasih nama tag-nya:

![Measurement ID](https://www.rodyvansambeek.com/images/blog/ga4-tag-config.png)

5. Klik "Choose a trigger to make this tag fire..."
6. Pilih "All Pages"
7. Klik "Save"

<br>

### Embed GTM di NextJs App

NextJs 13 menggunakan sebuah komponen built-in `Script` yang memungkinkan kamu untuk menentukan kapan script akan di load. Disini kita akan menggunakannya untuk menambahkan script GTM ke aplikasi NextJs kita.

Pertama, tambahkan GTM script ke file `app/layout.tsx` atau `app/layout.js` seperti ini:

```jsx
import Script from 'next/script'
const GTM_ID = 'GTM-XXXXXXX';
 
...
 
<html>
    <Script id="google-tag-manager" strategy="afterInteractive">
        {`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${GTM_ID}');
        `}
    </Script>
    <body>
        ...
    </body>
</html>
```

Pastikan untuk mengganti variabel GTM_ID dengan punya kamu sendiri.

Jika javascript dimatikan di browser user kamu bisa menambahkan tag `noscript` dibawah ini sebelum `</body>`

```jsx
...
    <noscript
        dangerouslySetInnerHTML={{
        __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_ID}" height="0" width="0" style="display: none; visibility: hidden;"></iframe>`,
        }} 
    />
    </body>
```

<br>

### Loading Strategy

Pada komponen Script, kita telah menggunakan properti `strategy` dengan nilai `afterInteractive`. Ini adalah nilai default yang menunjukkan bahwa skrip akan diambil dan dijalankan setelah halaman telah selesai dimuat dan siap untuk digunakan oleh user. Ini adalah saat ketika browser telah mendownload file-file yang diperlukan dan web siap untuk berinteraksi. Strategi ini ideal digunakan untuk skrip seperti GTM (Google Tag Manager) dan analitik yang tidak memengaruhi proses render awal halaman.

Sebagai alternatif, jika kamu memiliki skrip yang bisa menunggu untuk dimuat selama waktu ketika browser sedang tidak sibuk, seperti chat support atau widget media sosial, kamu dapat menggunakan strategi `lazyOnload`. Strategi ini akan menunggu hingga halaman sepenuhnya dimuat dan browser berada dalam waktu ketika tidak ada aktivitas sebelum menjalankan skrip. Ini membantu memastikan bahwa skrip-skrip ini tidak memperlambat proses awal saat memuat halaman bagi user.

Namun, perlu diingat bahwa kedua strategi ini tetap menggunakan main thread browser, yang dapat menyebabkan "Waktu Pemblokiran Utas Utama" (Main Thread Blocking Time) dalam Google Page Speed. Properti `strategy` hanya mengubah waktu kapan skrip-skrip ini dimuat.

<br>

### Kesimpulan

Seperti itulah cara mudah untuk mengintegrasikan GA4 dengan GTM di NextJs 13. Jika kamu melakukan langkah-langkah diatas dengan benar maka GTM sudah berhasil terpasang dan biasanya data akan tersedia secara otomatis dalam dua hari di akun Google Analytics kamu. Kamu juga dapat melakukan tes dengan cara menginstal chrome extension seperti Wappalyzer untuk melihat apakah Google Analytics sudah terpasang pada website atau belum.

Sumber: [rodyvansambeek.com](https://www.rodyvansambeek.com/blog/easiest-ga4-integration-nextjs-13-gtm-guide)