Pernah mengeklik link di web berbasis Next.js dan mendapati layar diam tanpa respon selama dua detik? Tidak ada indikator loading, kursor tetap biasa, dan layar seolah *freeze*. Pengguna yang tidak sabar biasanya bakal spam-klik tombol navigasi berkali-kali karena mengira aplikasi rusak, padahal server sedang memproses *pre-render* data di latar belakang.

Masalah UX klasik ini sering luput saat developer terlalu terpukau dengan kecepatan rendering Next.js.

## Ilusi Aplikasi Macet di Balik Routing Next.js

Next.js sangat perkasa dalam urusan rendering data. Saat kamu memanfaatkan `getStaticProps`, perpindahan halaman terasa instan karena browser hanya mengambil data statis tanpa hard refresh. Begitu juga saat menggunakan `getServerSideProps` untuk mengambil data dinamis langsung dari server sebelum komponen dirender. 

Masalahnya muncul saat koneksi pengguna sedang tidak ideal atau server butuh waktu merespons query database. Karena Next.js tidak melakukan reload browser tradisional yang memicu putaran loading bawaan tab browser, halaman akan diam mematung sampai proses data selesai ditarik. User dibiarkan menebak-nebak: apakah web ini sedang loading, atau memang *crash*?

Di sinilah peran penting progress bar di bagian atas layar. Indikator visual sederhana ini memberi umpan balik langsung ke pengguna bahwa aksi mereka terbaca, proses perpindahan rute sedang berjalan, dan estimasi beban tugas sedang dikerjakan. 

Daripada memasang package wrapper instan seperti `nextjs-progressbar` tanpa tahu cara kerjanya, membuat komponen sendiri berbasis `nprogress` memberi kendali penuh terhadap manipulasi CSS, shallow routing, dan optimasi performa.

## Membedah Arsitektur Komponen NProgress Custom

Komponen ini memanfaatkan event router bawaan Next.js (`routeChangeStart`, `routeChangeComplete`, dan `routeChangeError`) untuk memicu animasi progress bar secara otomatis.

Buat file baru di direktori komponen kamu, misalnya `components/progressbar.tsx`, lalu terapkan konfigurasi berikut:

```ts
import Router from 'next/router';
import * as NProgress from 'nprogress';
import * as PropTypes from 'prop-types';
import * as React from 'react';

export interface NextNProgressProps {
    /**
     * The color of the bar.
     * @default "#29D"
     */
    color?: string;
    /**
     * The start position of the bar.
     * @default 0.3
     */
    startPosition?: number;
    /**
     * The stop delay in milliseconds.
     * @default 200
     */
    stopDelayMs?: number;
    /**
     * The height of the bar.
     * @default 3
     */
    height?: number;
    /**
     * Whether to show the bar on shallow routes.
     * @default true
     */
    showOnShallow?: boolean;
    /**
     * The other NProgress configuration options to pass to NProgress.
     * @default null
     */
    options?: Partial<NProgress.NProgressOptions>;
    /**
     * The nonce attribute to use for the `style` tag.
     * @default undefined
     */
    nonce?: string;

    /**
     * Use your custom CSS tag instead of the default one.
     * This is useful if you want to use a different style or minify the CSS.
     * @default (css) => <style nonce={nonce}>{css}</style>
     */
    transformCSS?: (css: string) => JSX.Element;
}

const NextNProgress = ({
    color = '#003865 linear-gradient(71.18deg, rgb(0, 34, 255)-27.32%, rgb(0, 34, 255)-16.39%, rgb(81, 121, 254)-7.38%, rgb(165, 237, 182) 30.59%, rgb(250, 232, 90) 46.06%, rgb(253, 172, 62) 62.61%, rgb(255, 92, 0) 75.82%);',
    startPosition = 0.3,
    stopDelayMs = 200,
    height = 3,
    showOnShallow = true,
    options,
    nonce,
    transformCSS = (css) => <style nonce={nonce}>{css}</style>,
}: NextNProgressProps) => {
    let timer: NodeJS.Timeout | null = null;

    React.useEffect(() => {
        if (options) {
            NProgress.configure(options);
        }
        Router.events.on('routeChangeStart', routeChangeStart);
        Router.events.on('routeChangeComplete', routeChangeEnd);
        Router.events.on('routeChangeError', routeChangeError);
        return () => {
            Router.events.off('routeChangeStart', routeChangeStart);
            Router.events.off('routeChangeComplete', routeChangeEnd);
            Router.events.off('routeChangeError', routeChangeError);
        };
    }, []);

    const routeChangeStart = (
        _: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            NProgress.set(startPosition);
            NProgress.start();
        }
    };

    const routeChangeEnd = (
        _: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                NProgress.done(true);
            }, stopDelayMs);
        }
    };

    const routeChangeError = (
        _err: Error,
        _url: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                NProgress.done(true);
            }, stopDelayMs);
        }
    };

    return transformCSS(`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:9999;top:0;left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px ${color},0 0 5px ${color};opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:${color};border-left-color:${color};border-radius:50%;-webkit-animation:nprogresss-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`);
};

NextNProgress.propTypes = {
    color: PropTypes.string,
    startPosition: PropTypes.number,
    stopDelayMs: PropTypes.number,
    height: PropTypes.number,
    showOnShallow: PropTypes.bool,
    options: PropTypes.object,
    nonce: PropTypes.string,
    transformCSS: PropTypes.func,
};

export default React.memo(NextNProgress);
```

### Konfigurasi Penting yang Perlu Diperhatikan

Beberapa prop di atas memiliki peran krusial terhadap performa dan tampilan:

| Properti | Tipe Data | Fungsi & Nilai Default |
| :--- | :--- | :--- |
| `color` | String | Menentukan warna bar atau gradasi CSS kompleks. Default menggunakan multi-color gradient. |
| `startPosition` | Number | Titik awal animasi bar saat route mulai berubah (Default: `0.3`). |
| `stopDelayMs` | Number | Jeda waktu sebelum bar menghilang sepenuhnya saat route selesai (Default: `200ms`). |
| `showOnShallow` | Boolean | Menentukan apakah bar tetap aktif pada perubahan query params / shallow routing (Default: `true`). |
| `transformCSS` | Function | Menginjeksi custom inline style tag secara dinamis tanpa file CSS eksternal terpisah. |

## Menerapkan Komponen ke Global Layout

Agar progress bar terpanggil di setiap transisi halaman tanpa perlu dipasang satu per satu, pasang komponen ini pada file wrapper tata letak utama aplikasi, misalnya di `pages/layout/index.tsx` atau file layout utama codebase kamu.

```js
import Header from "../../components/header"  
import Footer from "../../components/footer"  
// import custom progress bar component  
import NextNProgress from '../../components/nprogress';  
  
const Layout = ({ categories, children }: Props) => {  
    return (  
        <>  
            <div className="relative h-screen bg-gradient-to-b-white dark:bg-gradient-to-b lg:h-[140vh]">  
                <NextNProgress options={{ showSpinner: false }} />  
                <Header categories={categories} />  
                <main>{children}</main>  
                <Footer />  
            </div>  
        </>  
    )  
}  
  
export default Layout;
```

Dengan mematikan `showSpinner: false`, tampilan bar menjadi lebih clean di bagian atas viewport tanpa icon loading bulat yang mengganggu elemen header.

Saat rute berpindah, animasi garis langsung berjalan halus memotong layar, memberi kepastian visual kepada pengguna bahwa permintaan mereka sedang dieksekusi secara instan. Hasil visualnya memberikan indikasi navigasi yang jelas dan responsif:

| ![ progressbarillustration.gif](https://miro.medium.com/max/600/1*BLeBbKFlojbT5oiTjnEnVA.gif) | 
|:--:| 
| Ilustrasi Progressbar saat navigasi berjalan |

Detail visual kecil seperti ini sering diremehkan, namun dampaknya luar biasa dalam mengubah persepsi pengguna terhadap kecepatan aplikasi web kamu.

Hilangkan ilusi website ngelag saat routing di Next.js dengan membangun custom component NProgress mandiri yang responsif dan fleksibel.

Website Terasa Freeze Saat Pindah Halaman? Cara Pasang Custom Progress Bar di Next.js Tanpa Ketergantungan Package Luar

Reggi

User upload foto ke platform lo, tapi hasilnya miring 90 derajat, terlalu gelap, atau framing-nya berantakan. Solusi paling malas? Minta user hapus, edit sendiri di laptop, lalu upload ulang. Cara ini dijamin bikin churn rate aplikasi lo meroket karena user keburu malas duluan.

Membangun fitur image processing dari nol menggunakan Canvas API murni memang terdengar keren buat flexing portfolio, tapi secara bisnis itu buang-buang waktu. Di dunia software engineering modern, kecepatan rilis fitur adalah kunci. Kalau ada tool open-source yang matang dan siap pakai, kenapa harus menyiksa diri? 

Salah satu solusi paling solid untuk kebutuhan ini adalah mengawinkan ekosistem React JS dengan Toast UI Image Editor.

## Kenapa Toast UI Image Editor?

Toast UI Image Editor menawarkan fitur editing standar industri yang langsung siap pakai di sisi client. Lo nggak perlu pusing memikirkan algoritma rotasi matriks pixel atau logic crop yang rumit. 

Semua kebutuhan dasar manipulasi visual sudah dibungkus rapi:
* Filter warna instan
* Cropping presisi
* Flip dan Rotate
* Penambahan teks langsung di atas gambar

Semua proses ini berjalan di sisi browser sebelum file dikirim ke server backend lo. Hasilnya? Beban komputasi server berkurang dan user experience terasa jauh lebih instan tanpa bottleneck jaringan.

## Menyiapkan Workspace React

Sebelum masuk ke implementasi komponen, inisialisasi project React standar terlebih dahulu via CLI:

```bash
npx create-react-app photo-editor-app
```

Masuk ke direktori project, lalu install dependency inti dari Toast UI untuk React:

```bash
npm i @toast-ui/react-image-editor
```

Supaya layout editor ini tidak berantakan dan gampang diatur posisinya (misalnya ingin ditaruh di dalam modal popup), tambahkan styling library Bootstrap:

```bash
npm i bootstrap react-bootstrap
```

## Membedah Kode Implementasi

Pendekatan integrasi ini memanfaatkan komponen class di React untuk mengontrol instansiasi canvas editor. 

Mulailah dengan mengimpor modul-modul yang dibutuhkan ke dalam file komponen:

```javascript
import React, { Component } from "react";
import { Button, Modal } from "react-bootstrap";
import ImageEditor from "@toast-ui/react-image-editor";
```

Berikut adalah blok konfigurasi inti untuk me-render antarmuka editor secara penuh:

```javascript
render() {
  const { seatmaker, selectedFiles, progressInfos, message } = this.state;
  
  // Kustomisasi visual interface editor
  const myTheme = { 
    "common.bi.image": "https://mbtech.info/asset/img/logo/MBtech.png", 
    "common.bisize.width": "55px", 
    "common.bisize.height": "35px", 
    "common.backgroundColor": "#fff", 
    "header.display": "none",
  };

  return (
    <div className="content">
      <ImageEditor 
        ref={this.editorRef}
        includeUI={{
          loadImage: {
            path: imageName,
            name: imageName,
          },
          theme: myTheme,
          menu: ["filter", "crop", "flip", "rotate", "text"],
          initMenu: "filter",
          uiSize: {
            width: "100%",
            height: "650px",
          },
          menuBarPosition: this.state.isMobile ? "bottom" : "left",
        }}
        cssMaxHeight={this.state.isMobile ? window.innerHeight : 500}
        cssMaxWidth={this.state.isMobile ? window.innerWidth - 30 : 500}
        selectionStyle={{
          borderColor: "red",
          cornerColor: "green",
          cornerSize: 6,
          rotatingPointOffset: 100,
          transparentCorners: false,
        }}
        usageStatistics={false}
      />
    </div>
  );
}
```

## Parameter Kunci yang Wajib Dipahami

Struktur konfigurasi di atas punya beberapa detail krusial yang menentukan performa dan tampilan UI lo:

| Properti / Parameter | Fungsi & Konteks Penggunaan |
| :--- | :--- |
| `includeUI.theme` | Mengatur tema visual, warna background, serta branding logo di area editor. |
| `includeUI.menu` | Array kontrol fitur aktif: filter, crop, flip, rotate, hingga penambahan text. |
| `menuBarPosition` | Fleksibilitas tata letak kontrol, beralih ke `bottom` saat mobile atau `left` saat desktop. |
| `selectionStyle` | Kustomisasi tampilan bounding box (warna border merah, corner hijau) saat user menyeleksi objek. |
| `usageStatistics` | Set ke `false` jika lo ingin mematikan tracking analitik bawaan dari library. |

Untuk referensi properti dan API yang lebih mendalam, dokumentasi resmi repositori mereka bisa langsung dicek di [GitHub NHN Toast UI Image Editor](https://github.com/nhn/tui.image-editor#-documents).

## Alur Data dan Integrasi Lanjutan

Implementasi di atas adalah pondasi antarmuka. Dalam workflow aplikasi nyata, alur manipulasi gambar ini bisa bekerja dalam dua skenario utama:
1. User upload file lokal langsung dari browser mereka, diedit lewat komponen Toast UI, lalu hasilnya di-download langsung ke storage lokal.
2. Mengambil gambar yang sudah ada di database/server (via path URL), dimanipulasi di canvas, lalu payload gambar hasil edit dikirim kembali untuk disimpan secara permanen di server backend.

Fokus implementasi ini membuktikan bahwa lo bisa menyajikan canvas editor yang fully functional ke user tanpa ribet. Pembahasan teknis mengenai cara melempar data gambar hasil olahan ke backend server serta optimasi layout mobile bakal kita bedah tuntas di artikel berikutnya.

Solusi praktis integrasi Toast UI Image Editor ke dalam ekosistem React JS untuk mempermudah manipulasi gambar pengguna tanpa perlu membuang waktu coding dari nol.

Stop Bikin Image Editor dari Nol: Integrasi Toast UI di React JS Jauh Lebih Masuk Akal

Solusi praktis integrasi webmail custom ke dalam dashboard Gmail. Kelola, baca, dan kirim email domain pribadi langsung dari satu tempat tanpa ribet gonta-ganti tab.

Mengapa Kamu Masih Buka Dua Tab Terpisah? Panduan Setup Custom Webmail Langsung di Dashboard Gmail

Pelajari efisiensi merakit mesin tetas telur listrik AC otomatis dengan modal murah untuk mendongkrak hasil ternak unggas tanpa repot bolak-balik telur manual.

Otomasi Ternak Unggas: Kenapa Rakit Sendiri Mesin Penetas Telur AC Jauh Lebih Worth It Dibanding Cara Konvensional?

Pelajari bagaimana mesin tetas telur berbasis arus listrik DC bekerja menjaga suhu dan kelembapan ideal untuk mendongkrak keberhasilan penetasan telur unggas.

Mesin Tetas Telur Arus DC: Solusi Hardware Murah Buat Tingkatin Angka Penetasan Unggas

Kupas tuntas seluk-beluk mobil aki anak dengan kontrol ganda dan fitur multimedia. Pahami batas spesifikasi hardware sebelum eksekusi build sendiri.

EV Versi Mini: Membedah Mobil Listrik Aki Lengkap dengan Remote Control dan Fitur Multimedia

Pelajari cara merakit smart power strip berbasis NodeMCU dan Blynk untuk kontrol daya nirkabel serta integrasi IoT yang aman dan efisien.

Mengapa Beli Mahal Kalau Bisa Bikin Sendiri? Rancang Smart Power Strip Berbasis NodeMCU dan Blynk

Solusi tuntas mengatasi bug sistem dan software bermasalah di MacBook dengan panduan install ulang macOS lewat Internet Recovery secara aman.

#react-js

Getting Lastest Post..

Populer Bulan Ini