Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Menyebarkan Next.js aplikasi ke Amplify Hosting
<a name="getting-started-next"></a>

Tutorial ini memandu Anda melalui pembuatan dan penerapan Next.js aplikasi dari repositori Git.

Sebelum Anda memulai tutorial ini, lengkapi prasyarat berikut.

**Membuat aplikasi**  
Buat Next.js aplikasi dasar untuk digunakan untuk tutorial ini, menggunakan [ instruksi ](https://nextjs.org/docs/app/api-reference/create-next-app) create-next-app dalam dokumentasi. * Next.js *

**Buat repositori Git**  
Amplify mendukung GitHub, Bitbucket, GitLab, dan. AWS CodeCommit Dorong `create-next-app` aplikasi Anda ke repositori Git Anda.

## Langkah 1: Hubungkan repositori Git
<a name="step-1-connect-repository"></a>

Pada langkah ini, Anda menghubungkan Next.js aplikasi Anda di repositori Git ke Amplify Hosting.

**Untuk menghubungkan aplikasi di repositori Git**

1. Buka konsol [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) Amplify.

1. Jika Anda menerapkan aplikasi pertama Anda di Wilayah saat ini, secara default Anda akan mulai dari halaman **AWS Amplify** layanan.

   Pilih ** Menyebarkan aplikasi ** di bagian atas halaman.

1. Pada ** halaman ** Mulai membangun dengan Amplify, pilih penyedia repositori Git Anda, lalu pilih Ber ** ikutnya**.

   Untuk GitHub repositori, Amplify menggunakan fitur GitHub Aplikasi untuk mengotorisasi akses Amplify. Untuk informasi selengkapnya tentang menginstal dan mengotorisasi GitHub Aplikasi, lihat[Menyiapkan akses Amplify ke repositori GitHub](setting-up-GitHub-access.md).
**catatan**  
Setelah Anda mengotorisasi konsol Amplify dengan Bitbucket GitLab, AWS CodeCommit, atau, Amplify mengambil token akses dari penyedia repositori, tetapi * tidak menyimpan token di server. * AWS Amplify mengakses repositori Anda menggunakan kunci deploy yang terinstal di repositori tertentu saja.

1. Pada ** halaman cabang Tam ** bah repositori lakukan hal berikut:

   1. Pilih nama repositori untuk terhubung.

   1. Pilih nama cabang repositori untuk terhubung.

   1. Pilih **Berikutnya**.

## Langkah 2: Konfirmasikan pengaturan build
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify secara otomatis mendeteksi urutan perintah build yang akan dijalankan untuk cabang yang Anda gunakan. Pada langkah ini Anda meninjau dan mengonfirmasi pengaturan build Anda.

**Untuk mengonfirmasi pengaturan build untuk aplikasi**

1. Pada ** halaman ** Pengaturan aplikasi, cari ** bagian Peng ** aturan Bangun.

   Pastikan perintah build ** Frontend ** dan direktori keluaran ** Build ** sudah benar. Untuk aplikasi Next.js contoh ini, direktori keluaran ** Build ** diatur ke`.next`.

1. Prosedur untuk menambahkan peran layanan bervariasi tergantung pada apakah Anda ingin membuat peran baru atau menggunakan yang sudah ada.
   + Untuk membuat peran baru:

     1. Pilih ** Buat dan gunakan peran layanan baru**.
   + Untuk menggunakan peran yang ada:

     1. Pilih ** Gunakan peran yang ada**.

     1. Dalam daftar peran layanan, pilih peran yang akan digunakan.

1. Pilih **Berikutnya**.

## Langkah 3: Deploy aplikasi
<a name="step-3-save-and-deploy"></a>

Pada langkah ini, Anda menyebarkan aplikasi Anda ke jaringan pengiriman konten AWS global (CDN).

**Menyimpan dan menyebarkan aplikasi**

1. Pada ** halaman T ** injauan, konfirmasikan bahwa detail repositori dan pengaturan aplikasi sudah benar.

1. Pilih **Simpan dan deploy**. Pembuatan front-end Anda biasanya membutuhkan waktu 1 hingga 2 menit, tetapi dapat bervariasi berdasarkan ukuran aplikasi.

1. Setelah penerapan selesai, Anda dapat melihat aplikasi menggunakan tautan ke domain `amplifyapp.com` default.

**catatan**  
Untuk meningkatkan keamanan aplikasi Amplify Anda, * domain * amplifyapp.com terdaftar di [ Public Suffix List (PSL). ](https://publicsuffix.org/) Untuk keamanan lebih lanjut, kami menyarankan Anda menggunakan cookie dengan `__Host-` awalan jika Anda perlu mengatur cookie sensitif di nama domain default untuk aplikasi Amplify Anda. Praktik ini akan membantu mempertahankan domain Anda dari upaya pemalsuan permintaan lintas situs (CSRF). Untuk informasi lebih lanjut, lihat [ Set-Cookie ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) halaman di Mozilla Developer Network.

## Langkah 4: (Opsional) membersihkan sumber daya
<a name="step-4-clean-up"></a>

Jika Anda tidak lagi memerlukan aplikasi yang Anda gunakan untuk tutorial, Anda dapat menghapusnya. Langkah ini membantu memastikan bahwa Anda tidak akan dikenakan biaya untuk sumber daya yang tidak Anda gunakan.

**Untuk menghapus aplikasi**

1. Dari ** menu ** Pengaturan aplikasi di panel navigasi, pilih Peng ** aturan umum**.

1. Pada ** halaman ** Pengaturan umum, pilih H ** apus aplikasi**.

1. Di jendela konfirmasi, masukkan**delete**. Kemudian pilih H ** apus aplikasi**.

## Menambahkan fitur ke aplikasi Anda
<a name="next-steps"></a>

Sekarang setelah Anda memiliki aplikasi yang diterapkan ke Amplify, Anda dapat menjelajahi beberapa fitur berikut yang tersedia untuk aplikasi yang Anda hosting.

**Variabel lingkungan**  
Aplikasi sering membutuhkan informasi konfigurasi saat runtime. Konfigurasi ini dapat berupa detail koneksi database, kunci API, atau parameter. Variabel lingkungan menyediakan cara untuk mengekspos konfigurasi ini pada waktu pembuatan. Untuk informasi selengkapnya, lihat Variabel [ lingkungan](environment-variables.md).

**Domain Kustom**  
Dalam tutorial ini, Amplify menghosting aplikasi Anda untuk Anda di `amplifyapp.com` domain default dengan URL seperti`https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Saat Anda menghubungkan aplikasi ke domain khusus, pengguna melihat bahwa aplikasi Anda dihosting di URL khusus, seperti`https://www.example.com`. Untuk informasi selengkapnya, lihat [ Menyiapkan domain khusus](custom-domains.md).

**Pratinjau permintaan tarik**  
Pratinjau permintaan tarik web menawarkan tim cara untuk melihat pratinjau perubahan dari pull request (PR) sebelum menggabungkan kode ke cabang produksi atau integrasi. Untuk informasi selengkapnya, lihat [ pratinjau web untuk permintaan ](pr-previews.md) tarik.

**Mengelola beberapa lingkungan**  
Untuk mempelajari cara Amplify bekerja dengan cabang fitur dan alur GitFlow kerja untuk mendukung beberapa penerapan, lihat Penerapan cabang [ fitur dan alur kerja tim. ](multi-environments.md)