Panduan untuk membuat dan men-deploy aplikasi Next.js
Mengembangkan aplikasi Next.js hanyalah fase awal; langkah penting berikutnya adalah deployment. Proses ini melibatkan penyediaan aplikasi Anda untuk pengguna di internet. Strategi deployment yang efektif sangat penting untuk memastikan performa, skalabilitas, dan keandalan aplikasi Anda. Panduan ini akan memandu Anda melalui langkah-langkah untuk men-deploy aplikasi Next.js dengan sukses.
Apa itu framework Next.js?
Next.js adalah framework React yang dibangun berdasarkan React dengan menambahkan fitur yang memudahkan pembuatan dan pengoptimalan otomatis situs yang siap produksi.
Sederhananya, Next.js adalah framework yang membantu Anda membangun aplikasi modern dengan React. Framework ini memiliki dukungan server, serta image dan komponen yang dioptimalkan yang memungkinkan hasil cepat sekaligus menjaga transfer file tetap kecil.
Perbedaan antara React (default) dan Next.js
Keduanya mungkin terlihat mirip dan menjalankan JavaScript, tetapi ada perbedaan besar dalam hal fungsi dan kegunaannya.
Fitur | React (default) | Next.js |
Keramahan terhadap SEO | Mungkin sulit | Ramah SEO |
Performa pemuatan awal | Lebih lambat | Lebih cepat |
Pengambilan data | Memerlukan implementasi manual | Dilengkapi dengan getServerSideProps dan getStaticProps |
Pemilihan Rute | Menggunakan library pemilihan rute (misalnya, React Router) | Pemilihan rute berbasis sistem file |
Kompleksitas | Lebih mudah | Lebih banyak yang sudah dikonfigurasi sejak awal |
React (default)
Next.js
Keramahan terhadap SEO
Mungkin sulit
Ramah SEO
Performa pemuatan awal
Lebih lambat
Lebih cepat
Pengambilan data
Memerlukan implementasi manual
Dilengkapi dengan getServerSideProps dan getStaticProps
Pemilihan Rute
Menggunakan library pemilihan rute (misalnya, React Router)
Pemilihan rute berbasis sistem file
Kompleksitas
Lebih mudah
Lebih banyak yang sudah dikonfigurasi sejak awal
Cara membuat aplikasi Next.js
Untuk banyak aplikasi React, langkah-langkahnya umumnya sama, tetapi kami merekomendasikan penggunaan framework Next.js. Untuk persyaratan performa tinggi dan tingkat lanjut, framework ini akan mengelola banyak komponen yang membantu menskalakan aplikasi Anda dengan lebih efisien dan mengoptimalkan SEO situs React Anda.
Langkah 1: Memulai project Anda
Anda harus membuat template menggunakan terminal agar semua detail dan persyaratan kode ada di sana.
Gunakan terminal:
npx create-next-app@latest
Untuk mengikuti, Anda juga memerlukan beberapa konfigurasi.
Langkah 2: Tentukan atau modifikasi file project tersebut
Anda akan memerlukan petunjuk tentang apa yang diperlukan, apa yang Anda butuhkan (informasi server atau klien), dan di mana informasi tersebut berada. Berikut hal-hal yang dapat Anda harapkan dalam build yang akan dibuat.
"Ini untuk performa dan kecepatan.”
Langkah 3: Pastikan data baru sudah ada
Sekali lagi, hal ini dapat membantu memastikan Anda memiliki bagian yang siap sehingga membuat Anda menginginkan komponen dengan sisi server dan/atau klien.
Langkah 4: Nyalakan kembali server
Sekarang perbarui kode dan buat tata letaknya bagus.
Anda mungkin memerlukan informasi tentang hal ini, jadi pertimbangkan dokumentasi ini.
Langkah 5: Biarkan orang melihat kode baru sekarang
Setelah Anda melakukan perubahan ini, penyiapan selesai. Biarkan itu dirender.
Pertimbangan utama saat membuat aplikasi Next.js
Kecepatan situs Anda sangat penting untuk pengoptimalan mesin telusur yang optimal. JavaScript sendiri dapat memperlambat rendering dan berdampak negatif terhadap performa penelusuran. Namun, penggunaan Next.js dapat memitigasi masalah ini. Oleh karena itu, prioritaskan pengalaman pemuatan yang cepat dan pengelolaan data yang efisien di situs Anda. Keamanan yang kuat dan produk berkualitas tinggi memerlukan penggunaan data pengujian yang cermat, dengan mematuhi privasi dan akses.
Pemilihan rute sisi klien
Pemilihan rute sisi klien
Sebagian besar aplikasi React menggunakan library seperti react-router-dom untuk menangani navigasi. Karena hal ini terjadi di browser, server hosting Anda harus dikonfigurasi untuk mendukungnya. Hal ini biasanya berarti mengarahkan semua permintaan halaman ke file index.html root Anda, sehingga React Router dapat mengambil alih dan menampilkan komponen yang benar.
Variabel lingkungan
Variabel lingkungan
Aplikasi Anda kemungkinan akan memerlukan konfigurasi yang berbeda untuk pengembangan dan produksi, seperti kunci API atau endpoint database. Penting untuk mengelola hal ini menggunakan variabel lingkungan (misalnya, melalui file .env) agar Anda tidak mengekspos informasi sensitif dalam kode sumber Anda.
Komunikasi API backend
Komunikasi API backend
Frontend React bertanggung jawab atas UI, tetapi biasanya mendapatkan data dinamis dari API backend. Saat men-deploy, Anda harus memastikan aplikasi React Anda mengetahui URL produksi API yang benar dan dikonfigurasi untuk menangani Cross-Origin Resource Sharing (CORS) jika API dihosting di domain yang berbeda.
Cara men-deploy aplikasi Next.js di Cloud Run
Cloud Run dapat menjadi pilihan yang baik untuk men-deploy aplikasi React jika Anda ingin menggunakan alur kerja berbasis container, yang memberikan konsistensi dan portabilitas maksimum. Mulai dengan Panduan memulai untuk membangun dan men-deploy aplikasi Next.js React di Cloud Run.
Langkah 1: Pastikan aplikasi
Untuk mentransfer dengan benar. Pastikan Anda telah menerapkan semua detail yang relevan untuk setelan data dan transfer.
Langkah 2: Build berikutnya; pembuatan docker
Dengan menggunakan langkah-langkah ini, pastikan setiap tahap memiliki semua detail yang diperlukan untuk project.
# Instal dependensi hanya ketika dibutuhkan FROM node:16-alpine AS deps # Periksa https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8 117330a1dc25ab#alpine RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci # Jika menggunakan turbo, hapus tanda komentar pada bagian ini juga: # COPY turbo.json ./ # COPY .gitignore ./ # Tambahkan variabel env ENV NEXT_TELEMETRY_DISABLED 1 # Rebuild hook memungkinkan memeriksa apa yang boleh dan tidak boleh disertakan RUN npm run build ############### #### Tahap 2: Image produksi ### ############### FROM node:16-alpine AS runner WORKDIR /app # NEXT_PUBLIC_... variabel env selama waktu build. ENV NODE_ENV production # Anda hanya perlu menyalin next.config.js jika menggunakan file konfigurasi kustom COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/.next ./.next COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/package.json ./package.json # Lihat detail di: https://cloud.google.com/run/docs /configuring/traffic ENV PORT 8080 EXPOSE 8080 CMD ["npm", "start"] |
# Instal dependensi hanya ketika dibutuhkan
FROM node:16-alpine AS deps
# Periksa https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8
117330a1dc25ab#alpine
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
# Jika menggunakan turbo, hapus tanda komentar pada bagian ini juga:
# COPY turbo.json ./
# COPY .gitignore ./
# Tambahkan variabel env
ENV NEXT_TELEMETRY_DISABLED 1
# Rebuild hook memungkinkan memeriksa apa yang boleh dan tidak boleh disertakan
RUN npm run build
###############
#### Tahap 2: Image produksi ###
###############
FROM node:16-alpine AS runner
WORKDIR /app
# NEXT_PUBLIC_... variabel env selama waktu build.
ENV NODE_ENV production
# Anda hanya perlu menyalin next.config.js jika menggunakan file konfigurasi kustom
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
# Lihat detail di: https://cloud.google.com/run/docs
/configuring/traffic
ENV PORT 8080
EXPOSE 8080
CMD ["npm", "start"]
Sekarang Anda harus men-deploy. Gunakan platform seperti Cloud Build dan hubungkan file konfigurasi.
Langkah 3: Dapatkan dukungan cloud; gunakan ini untuk akhirnya merilisnya
Sekarang, biarkan Cloud Run menjadi metode terakhir untuk menanganinya sambil mengingat apakah metode ini membantu dan benar. Pastikan untuk merujuk ke alat dan kode utama serta menjalankannya dengan lancar.
Cara men-deploy aplikasi Next.js di Firebase
Firebase juga dapat menjadi tempat yang bagus untuk deployment, jadi ingatlah langkah-langkah sederhana ini. Siap mengintegrasikan Next.js di Firebase? Ikuti dokumentasi lengkap.
Langkah 1: Siapkan untuk setelan server publik
Ikuti konfigurasi untuk apa yang diperlukan oleh gambar atau dokumen ini (SSL diperlukan) agar semuanya berfungsi dengan aman.
Langkah 2: Siapkan dan instal (CMD)
Lanjutkan dengan cara menginstal dan menjalankan Firebase CLI.
npm install -g firebase-tools
Langkah 3: Hubungkan dan konfigurasi project
Ikuti “Firebase Init - Hosting”.
Pastikan URL ditulis ulang dan akurat di command line.
Gunakan dengan "no"; ini akan memastikan bahwa saat semuanya di-deploy, tidak akan ada masalah.
Praktik terbaik untuk pengujian Anda
Anda akan memerlukan pengujian lokal; hal ini memerlukan kode host lokal.
Setelah mengautentikasi CLI, kirimkan ke repositori ini:
- gcloud auth configure-docker
Sekarang Anda mengupload:
- docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
- Image container Gcloud dan kirim
Untuk mengetahui daftar lengkap tips pengembangan umum di Cloud Run, baca dokumentasi ini.
Produk dan solusi terkait
Cloud RunPlatform yang terkelola sepenuhnya yang memungkinkan Anda menjalankan container stateless, yang ideal untuk menyajikan aplikasi Next.js dalam container.
Firebase HostingLayanan hosting tingkat produksi yang dibuat khusus untuk aplikasi web modern, yang menyediakan CDN global dan sertifikasi SSL secara langsung.
Cloud BuildLayanan yang mengeksekusi build Anda di Google Cloud. Layanan ini dapat digunakan untuk membuat pipeline CI/CD otomatis yang membangun aplikasi Next.js Anda, membuat container, dan men-deploy-nya secara otomatis.
Artifact RegistryRegistry pribadi yang aman untuk menyimpan dan mengelola image container Anda sebelum men-deploy-nya ke layanan seperti Cloud Run atau Google Kubernetes Engine.
Cloud CDNUntuk aplikasi yang di-deploy pada penyiapan server kustom, Cloud CDN dapat digunakan untuk menyimpan aset statis Anda ke cache di edge jaringan Google, sehingga meningkatkan waktu pemuatan secara signifikan bagi pengguna di seluruh dunia.
Langkah selanjutnya
Mulailah membangun solusi di Google Cloud dengan kredit gratis senilai $300 dan lebih dari 20 produk yang selalu gratis.
Perlu bantuan untuk memulai?
Hubungi bagian penjualanBekerja sama dengan partner tepercaya
Temukan partnerLanjutkan menjelajah
Lihat semua produk
