Cara membuat dan men-deploy aplikasi Next.js

Membangun aplikasi web Next.js hanyalah langkah pertama untuk mewujudkan ide Anda secara online. Agar aplikasi cepat, responsif, dan mudah ditemukan pengguna, Anda harus memilih penyiapan deployment yang tepat.

Baik Anda menggunakan perintah bahasa alami untuk membangun prototipe web AI atau men-deploy codebase lengkap yang diekspor dari alat seperti Claude Code atau Replit, platform cloud modern menawarkan jalur hosting tanpa hambatan. Panduan ini menjelaskan cara kerja Next.js, membahas pertimbangan arsitektur rendering utama, dan memandu Anda men-deploy aplikasi ke infrastruktur terkelola menggunakan opsi Tingkat Pemula gratis.

12:22

Menjalankan aplikasi Next.js di Cloud Run

Apa itu Next.js?

Next.js adalah framework React open source yang dirancang untuk membantu developer membangun aplikasi web yang menyeluruh. Meskipun aplikasi React standar biasanya berjalan di sisi klien di browser web, Next.js menggabungkan interaktivitas sisi klien dengan rendering sisi server.

Dengan menangani pemilihan rute halaman, komponen server, dan pengoptimalan aset secara otomatis, Next.js memungkinkan developer dan vibe coder mengubah konsep kreatif menjadi aplikasi web siap produksi dengan konfigurasi minimal.

React Tradisional vs. Next.js

Pilihan antara React standar dan Next.js bergantung pada persyaratan rendering, visibilitas mesin telusur, dan kebutuhan backend Anda:

Fitur	React (default)	Next.js
Arsitektur rendering	Rendering Sisi Klien (CSR)	Rendering Sisi Server (SSR), Pembuatan Situs Statis (SSG), dan Komponen Server React
Search engine optimization (SEO)	Mungkin memerlukan konfigurasi pra-rendering tambahan	Siap digunakan dan ramah mesin telusur dengan HTML yang dirender oleh server
Pemuatan halaman awal	Lebih lambat di perangkat berdaya rendah karena ukuran paket JavaScript klien yang besar	Tampilan awal yang lebih cepat menggunakan HTML sederhana yang dirender oleh server
Mekanisme pemilihan rute	Memerlukan library pemilihan rute pihak ketiga (seperti React Router)	Pemilihan rute berbasis sistem file bawaan melalui Router Aplikasi
Kemampuan menyeluruh	Hanya frontend; memerlukan layanan backend terpisah	Handler rute API bawaan dan tindakan server

Hosting aplikasi tradisional vs. container serverless

Saat bersiap meluncurkan aplikasi Next.js, memilih lingkungan komputasi yang tepat akan berdampak langsung pada beban pemeliharaan, kecepatan penskalaan, dan biaya operasi.

Fitur	Virtual machine (VPS/IaaS)	Platform PaaS/buildpack	Container serverless (Cloud Run)
Pengelolaan infrastruktur	Tinggi; update sistem operasi manual dan patching server	Lapisan platform yang terkelola sepenuhnya dengan konvensi khusus vendor	Infrastruktur yang terkelola sepenuhnya tanpa pemeliharaan sistem operasi
Perilaku penskalaan otomatis	Memerlukan waktu beberapa menit untuk menyediakan dan melakukan booting virtual machine baru	Penskalaan otomatis yang cepat, sering kali terkait dengan paket worker bertingkat atau batas konkurensi	Penskalaan otomatis berbasis permintaan instan, termasuk penskalaan hingga nol saat tidak ada aktivitas
Format kemasan	File build mentah atau pengelola proses PM2	Integrasi repositori Git dengan sistem build eksklusif	Image container Open Container Initiative (OCI) dan Docker standar
Profil biaya tidak ada aktivitas	Ditagih 24/7 terlepas dari traffic masuk	Biaya bulanan dasar atau batas eksekusi yang ketat pada paket gratis	Kuota Tingkat Pemula gratis atau ditagih secara ketat per detik selama permintaan aktif
Portabilitas vendor	Tinggi, tetapi penyiapan mungkin sulit direplikasi	Rendah; konfigurasi bergantung pada aturan hosting khusus vendor	Tinggi; image container standar dapat dijalankan di seluruh cloud atau lingkungan lokal

Pertimbangan utama saat membuat aplikasi Next.js

Membangun aplikasi Next.js yang siap produksi memerlukan penanganan pola arsitektur inti yang memastikan performa cepat dan waktu beroperasi yang stabil:

Batas klien dan server

Next.js menggunakan Komponen Server React secara default [Inference]. Komponen server mengambil data secara langsung tanpa perlu mengirim JavaScript yang rumit ke browser, sementara elemen UI interaktif menggunakan perintah 'use client' [Inference]. Pastikan komponen klien berfokus pada tugas UI interaktif agar ukuran paket klien Anda tetap kecil dan cepat [Inference].

Variabel lingkungan klien

Untuk mencegah kebocoran kunci API pribadi atau kredensial database ke browser publik, Next.js membatasi akses browser ke variabel yang diawali dengan NEXT_PUBLIC_. Selalu simpan secret server pribadi tanpa awalan dan kelola dengan aman di konfigurasi lingkungan.

Eksekusi serverless stateless

Platform serverless modern meningkatkan dan menurunkan instance container sebagai respons terhadap traffic yang masuk. File yang disimpan langsung ke disk container lokal akan hilang saat instance memperkecil skala atau di-deploy ulang. Simpan data aplikasi persisten di database cloud terkelola seperti Cloud Firestore atau Cloud SQL untuk PostgreSQL, dan simpan upload pengguna di Cloud Storage.

Pelacakan output mandiri

Dalam deployment container kustom, aktifkan output: 'standalone' di konfigurasi Next.js Anda [Inference]. Hal ini secara otomatis akan melacak dependensi dan hanya mengemas file yang diperlukan ke dalam folder build yang ringkas, sehingga mengurangi ukuran image container dan mempercepat startup container [Inference].

Cara membuat dan men-deploy aplikasi Next.js

Anda dapat membuat dan meluncurkan aplikasi Next.js menggunakan dua alur kerja utama: Pembuatan Prototipe AI Cepat (tidak memerlukan penyiapan CLI lokal) atau Deployment Container Standar (untuk codebase kustom).

Jalur A: Pembuatan prototipe cepat dengan Mode Build AI Studio dan Tingkat Pemula

Untuk alur kerja pembuatan prototipe cepat dan vibe coding, Mode Build Google AI Studio memungkinkan developer mendeskripsikan aplikasi Next.js lengkap dalam bahasa alami dan memublikasikannya langsung ke Cloud Run tanpa mengelola alat command line atau mengonfigurasi akun penagihan.

Langkah 1: Melakukan inisialisasi aplikasi dalam Mode Build

Buka Google AI Studio dan beralih ke Mode Build.
Masukkan perintah aplikasi yang menjelaskan antarmuka pengguna, gaya, dan logika bisnis Anda (misalnya, "Buat pelacak project kolaboratif di Next.js dengan papan tugas interaktif dan login pengguna").
Agen AI terintegrasi menghasilkan file komponen Next.js, mengonfigurasi tata letak Router Aplikasi, menginstal dependensi npm, dan menampilkan pratinjau interaktif langsung di browser Anda.

Langkah 2: Menambahkan penyimpanan database terintegrasi dan login pengguna

Data persisten: Jika perintah Anda memerlukan penyimpanan data, aktifkan Cloud Firestore atau Cloud SQL untuk PostgreSQL (Edisi Developer). Agen akan otomatis membuat draf model data, file koneksi klien, dan aturan keamanan Anda.
Autentikasi pengguna: Aktifkan Firebase Authentication untuk mengaktifkan alur Login dengan Google tanpa perlu menulis handler pengalihan OAuth kustom.

Langkah 3: Memublikasikan ke Cloud Run

Klik Publish > Get Started > Publish App di bagian atas antarmuka.
Sediakan URL Kustom <my-nextjs-app>.ai.studio dan konfirmasi region deployment Anda.
Platform ini mengemas container Anda, menyediakan komputasi yang mendasarinya, dan memberikan URL produksi HTTPS *.run.app aktif dalam hitungan detik.

Jalur B: Men-deploy codebase Next.js kustom ke Cloud Run

Untuk codebase atau project yang sudah ada yang diekspor dari alat seperti Claude Code, Replit, atau lingkungan pengembangan lokal, masukkan aplikasi Anda ke dalam container dan deploy menggunakan Google Cloud CLI.

Langkah 1: Mengonfigurasi output mandiri

Update file next.config.js (atau next.config.mjs) Anda untuk menghasilkan build mandiri [Inference]:

Memuat...

Langkah 2: Membuat Dockerfile multi-level

Buat file .dockerignore di folder root yang berisi node_modules dan .env agar file pengembangan lokal tidak dikemas ke dalam container Anda.

Buat Dockerfile di root project Anda:

Memuat...

Langkah 3: Men-deploy ke Cloud Run

Deploy langsung dari folder project Anda menggunakan Google Cloud CLI dan tetapkan URL Kustom yang mudah diingat dan dibagikan dalam format <my-cool-app>.cloud.run:

Memuat...

Mekanisme harga paket gratis dan tingkat pemula

Memahami cara kerja alokasi gratis memastikan Anda dapat membuat prototipe dan menskalakan aplikasi Next.js dengan cara yang dapat diprediksi:

Opsi	Alokasi komputasi dan resource	Persyaratan dan batas
Tingkat Pemula Google Cloud (Pembuatan Prototipe)	• Cloud Run: Maksimal 2 aplikasi web aktif • Cloud Firestore: penyimpanan 1 GiB, 50 ribu operasi baca/hari, 40 ribu operasi tulis/hari Cloud SQL: PostgreSQL Developer Edition (penskalaan hingga nol) • Firebase Authentication: Login dengan Google disertakan	• Akun Google yang valid • Tidak perlu kartu kredit atau akun penagihan • Resource yang disematkan ke satu region
Paket Gratis Google Cloud (Akun Standar)	• Cloud Run: 2 juta permintaan/bulan, 180.000 vCPU-detik/bulan, 360.000 GiB-detik/bulan, 1 GB egress jaringan Amerika Utara/bulan • Akses ke kredit Selamat datang senilai $300 untuk 90 hari pertama	• Akun Penagihan Cloud tertaut • Akses penuh ke API platform di semua region

Praktik terbaik untuk menjalankan Next.js di lingkungan serverless

Menggunakan output mandiri: Selalu aktifkan mode mandiri Next.js untuk menghindari pengemasan dependensi pengembangan yang tidak digunakan ke dalam container produksi Anda [Inference].
Menetapkan batas instance pada project berbayar: Saat beralih dari sandbox pembuatan prototipe ke produksi, tetapkan --max-instances (misalnya, --max-instances 5) untuk memastikan lonjakan traffic yang tak terduga tidak melebihi anggaran Anda.
Memanfaatkan Komponen Server React: Alihkan pengambilan data yang intensif ke komponen server untuk menjaga paket browser Anda tetap ringan dan dapat meningkatkan Core Web Vitals [Inference].
Memastikan variabel lingkungan klien sudah terintegrasi: Ingat bahwa variabel lingkungan NEXT_PUBLIC_ dimasukkan ke dalam paket klien selama waktu build. Pastikan variabel tersebut ditentukan sebelum menjalankan tahap build.