Implementasi Single Page Application Pada Sistem Pemesanan Multi-Layanan Travel Berbasis Web Menggunakan Next.Js dan Typescript

Adelia Miftakul Janah, Harits Ar Rosyid

Abstract


Perkembangan teknologi informasi yang pesat mendorong kebutuhan akan platform digital yang responsif dan terintegrasi. Penelitian ini bertujuan untuk mengimplementasikan dan mengevaluasi sistem pemesanan travel multi-layanan menggunakan pendekatan Single Page Application (SPA) dengan Next.js dan TypeScript. Proses pengembangan meliputi analisis kebutuhan, perancangan sistem, implementasi, serta pengujian performa menggunakan Google Lighthouse berdasarkan metrik Core Web Vitals. Sistem SPA ini di-hosting di Vercel dan diuji melalui indikator performa seperti Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Speed Index (SI), First Contentful Paint (FCP), dan Total Blocking Time (TBT). Hasil pengujian menunjukkan bahwa aplikasi SPA yang dikembangkan memperoleh skor kategori baik di seluruh metrik, dengan rata-rata LCP 0,5; CLS 0,0015; SI 0,6375; FCP 0,425; dan TBT 40. Temuan ini menunjukkan bahwa integrasi Next.js dan TypeScript secara signifikan dapat meningkatkan performa, menjaga stabilitas kode, serta memberikan pengalaman pengguna yang unggul pada aplikasi web.

Keywords


Single Page Application; Next.js; TypeScript; Core Web Vitals; pengujian performa; aplikasi web

Full Text:

PDF

References


Amplitude Labs (2022) The 2022 App vs. Website Trend Report. Tersedia pada: https://amplitude.com/guides/2022-app-vs-website-report (Diakses: 9 Juni 2025).

Anugerah Widi, Eko Sediyono, H. (2024) “Analisa Performa Website Organisasi Akuatik Menggunakan Automated Software Testing GTmetrix,” 5(August 2023), hal. 25–33. Tersedia pada: https://doi.org/10.35957/jtsi.v5i2.5925.

Aripin, S. dan Somantri, S. (2021) “Implementasi Progressive Web Apps (PWA) pada Repository E-Portofolio Mahasiswa,” Jurnal Eksplora Informatika, 10(2), hal. 148–158. Tersedia pada: https://doi.org/10.30864/eksplora.v10i2.486.

Chrome DevTools team (2019a) First Contentful Paint. Tersedia pada: https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint?hl=id (Diakses: 10 Juni 2025).

Chrome DevTools team (2019b) Indeks Kecepatan. Tersedia pada: https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=id (Diakses: 10 Juni 2025).

Chrome DevTools team (2019c) Total Waktu Pemblokiran. Tersedia pada: https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time?hl=id (Diakses: 10 Juni 2025).

Djauhari, T., Sany, E. dan Sailani (2023) “Penerapan Ui/Ux Pada Website Penjualan Online Toko Bangunan Zulfan Rezqullah.,” Jurnal Akademika, 16(1), hal. 88–94. Tersedia pada: https://doi.org/10.53564/akademika.v16i1.1121.

Faradilla Ayunindya (2025) Core Web Vitals: Memahami Metrik Penting untuk Optimasi Website. Tersedia pada: https://www.hostinger.com/id/tutorial/core-web-vitals#Interaction_to_Next_Paint_INP_–_Kemampuan_Respons_Halaman (Diakses: 10 Juni 2025).

Fauziah, D., Pradana, F. dan Arwan, A. (2019) “Pengembangan aplikasi pemesanan tiket travel berbasis web dengan optimasi jalur penjemputan penumpang (Studi Kasus: Beruang Travel),” Pengembangan Teknologi Informasi dan Ilmu Komputer, 3(5), hal. 4549–4557.

Kacper Rafalski (2024) TypeScript vs. JavaScript: Which One Is Best for Your Needs? Tersedia pada: https://www.netguru.com/blog/typescript-vs-javascript (Diakses: 9 Juni 2025).

Kherina Surya Ningsih, Nur Jamilah Aruan, A.T.A.A.S. (2022) “APLIKASI BUKU TAMU MENGGUNAKAN FITUR KAMERA DAN AJAX BERBASIS WEBSITE PADA KANTOR DISPORAKOTA MEDAN,” SITek: Jurnal Sains, Informatika, dan Tekonologi, 1. Tersedia pada: https://doi.org/10.21111/fij.v8i1.8836.

Muttaqin, A.R., Wibawa, A. dan Nabila, K. (2021) “Inovasi Digital untuk Masyarakat yang Lebih Cerdas 5.0: Analisis Tren Teknologi Informasi dan Prospek Masa Depan,” Jurnal Inovasi Teknologi dan Edukasi Teknik, 1(12), hal. 880–886. Tersedia pada: https://doi.org/10.17977/um068v1i122021p880-886.

Nariswari, S.P. dan Kadyanan, I.G.A.G.A. (2023) “Analisis Penerapan Single Page Application (SPA) dalam Meningkatkan User Experience pada Sebuah Website,” JELIKU (Jurnal Elektronik Ilmu Komputer Udayana), 12(2), hal. 400.

Next.js (2024) Routing: Pages and Layouts. Tersedia pada: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts (Diakses: 9 Juni 2025).

Nextjs (2024) Client-side Rendering (CSR). Tersedia pada: https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering (Diakses: 9 Juni 2025).

Travel Perk (2024) 70+ Online Travel Booking Statistics & Trends, Travel Perk. Tersedia pada: https://www.travelperk.com/blog/online-travel-booking-statistics/ (Diakses: 9 Juni 2025).

Wp-rocket (2024a) How To Improve Cumulative Layout Shift (CLS) on WordPress. Tersedia pada: https://wp-rocket.me/google-core-web-vitals-wordpress/improve-cumulative-layout-shift/ (Diakses: 10 Juni 2025).

Wp-rocket (2024b) How To Improve Largest Contentful Paint (LCP) on WordPress. Tersedia pada: https://wp-rocket.me/google-core-web-vitals-wordpress/improve-largest-contentful-paint/ (Diakses: 10 Juni 2025).

Zalukhu, A., Swingly, P. dan Darma, D. (2023) “Perangkat Lunak Aplikasi Pembelajaran Flowchart,” Jurnal Teknologi, Informasi dan Industri, 4(1), hal. 61–70. Tersedia pada: https://ejurnal.istp.ac.id/index.php/jtii/article/view/351.




DOI: http://dx.doi.org/10.17977/um034v35i1p30-45

Refbacks

  • There are currently no refbacks.


Copyright (c) 2025 TEKNO: Jurnal Teknologi Elektro dan Kejuruan

Gedung B11, Lantai 2
Departemen Teknik Elektro dan Informatika, Fakultas Teknik
Universitas Negeri Malang
Jln. Semarang No.5 Malang, Jawa Timur

Creative Commons License TEKNO : Jurnal Teknologi Elektro dan Kejuruan licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

View Tekno Stats