Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Fitur yang didukung SSR Bagian ini memberikan informasi tentang dukungan Amplify untuk fitur SSR. Amplify menyediakan dukungan versi Node.js agar sesuai dengan versi Node.js yang digunakan untuk membangun aplikasi Anda. Amplify menyediakan fitur pengoptimalan gambar bawaan yang mendukung semua aplikasi SSR. Jika Anda tidak ingin menggunakan fitur pengoptimalan gambar default, Anda dapat menerapkan pemuat pengoptimalan gambar khusus. **Topics** + [Dukungan versi Node.js untuk aplikasi Next.js](#node-version-support-ssr) + [Pengoptimalan gambar untuk aplikasi SSR](#image-optimization) + [CloudWatch Log Amazon untuk aplikasi SSR](#ssr-CloudWatch-logs) + [Amplify dukungan SSR Next.js 11](#ssr-nextjs11-support) ## Dukungan versi Node.js untuk aplikasi Next.js Saat Amplify membuat dan menerapkan aplikasi komputasi Next.js, Amplify menggunakan versi Node.js runtime yang cocok dengan versi utama yang digunakan untuk membangun aplikasi. Node.js **catatan** Mulai 15 September 2025, Amplify hosting tidak akan lagi mendukung runtime Node.js 14, Node.js 16, dan Node.js 18. Runtime yang didukung termasuk Node.js 20 dan Node.js 22. Anda dapat menentukan Node.js versi yang akan digunakan dalam fitur **penggantian paket Live** di konsol Amplify. Untuk informasi selengkapnya tentang mengonfigurasi pembaruan paket langsung, lihat[Menggunakan versi paket dan dependensi tertentu dalam image build](custom-build-image.md#setup-live-updates). Anda juga dapat menentukan Node.js versi menggunakan mekanisme lain, seperti nvm perintah. Jika Anda tidak menentukan versi, Amplify default untuk menggunakan versi saat ini yang digunakan oleh container build Amplify. ## Pengoptimalan gambar untuk aplikasi SSR Amplify Hosting menyediakan fitur pengoptimalan gambar bawaan yang mendukung semua aplikasi SSR. Dengan optimasi gambar Amplify, Anda dapat memberikan gambar berkualitas tinggi dalam format, dimensi, dan resolusi yang tepat untuk perangkat yang mengaksesnya, sambil mempertahankan ukuran file sekecil mungkin. Saat ini, Anda dapat menggunakan komponen Gambar Next.js untuk mengoptimalkan gambar sesuai permintaan atau Anda dapat mengimplementasikan pemuat gambar khusus. Jika Anda menggunakan Next.js 13 atau yang lebih baru, Anda tidak perlu mengambil tindakan lebih lanjut untuk menggunakan fitur pengoptimalan gambar Amplify. Jika Anda menerapkan pemuat kustom, lihat berikut ini *Menggunakan topik pemuat gambar kustom*. ### Menggunakan pemuat gambar khusus Jika Anda menggunakan pemuat gambar khusus, Amplify mendeteksi loader di `next.config.js` file aplikasi Anda dan tidak menggunakan fitur pengoptimalan gambar bawaan. Untuk informasi selengkapnya tentang pemuat kustom yang didukung Next.js, lihat dokumentasi [gambar Next.js](https://nextjs.org/docs/pages/api-reference/next-config-js/images). ## CloudWatch Log Amazon untuk aplikasi SSR Amplify mengirimkan informasi tentang runtime SSR Anda ke CloudWatch Amazon Logs di Anda. Akun AWS Saat Anda menerapkan aplikasi SSR, aplikasi memerlukan peran layanan IAM yang diasumsikan Amplify saat memanggil layanan lain atas nama Anda. Anda dapat mengizinkan komputasi Amplify Hosting untuk secara otomatis membuat peran layanan untuk Anda atau Anda dapat menentukan peran yang telah Anda buat. Jika Anda memilih untuk mengizinkan Amplify membuat peran IAM untuk Anda, peran tersebut sudah memiliki izin untuk membuat Log. CloudWatch Jika membuat peran IAM sendiri, Anda perlu menambahkan izin berikut ke kebijakan agar Amplify dapat mengakses Log Amazon. CloudWatch ``` logs:CreateLogStream logs:CreateLogGroup logs:DescribeLogGroups logs:PutLogEvents ``` Untuk informasi selengkapnya tentang peran layanan, lihat [Menambahkan peran layanan dengan izin untuk menyebarkan sumber daya backend](amplify-service-role.md). ## Amplify dukungan SSR Next.js 11 Jika Anda menerapkan aplikasi Next.js ke Amplify sebelum rilis komputasi Amplify Hosting pada 17 November 2022, aplikasi Anda menggunakan penyedia SSR Amplify sebelumnya, Classic (khusus Next.js 11). Dokumentasi di bagian ini hanya berlaku untuk aplikasi yang digunakan menggunakan penyedia SSR Klasik (hanya Next.js 11). **catatan** Kami sangat menyarankan Anda memigrasikan aplikasi Next.js 11 Anda ke penyedia SSR terkelola komputasi Amplify Hosting. Untuk informasi selengkapnya, lihat [Migrasi aplikasi SSR Next.js 11 ke komputasi Amplify Hosting](update-app-nextjs-version.md). Daftar berikut menjelaskan fitur spesifik yang didukung oleh penyedia SSR Amplify Classic (hanya Next.js 11). **Fitur yang didukung** + Halaman yang dirender sisi server (SSR) + Halaman statis + Rute API + Rute dinamis + Tangkap semua rute + SSG (Generasi statis) + Regenerasi Statis Inkremental (ISR) + Perutean sub-jalur internasional (i18n) + Variabel-variabel lingkungan **Fitur yang tidak didukung** + Optimalisasi gambar + Regenerasi Statis Inkremental *Sesuai Permintaan* (ISR) + Perutean domain internasional (i18n) + Deteksi lokal otomatis yang diinternasionalisasi (i18n) + Middleware + Middleware Tepi + Rute API Edge ### Harga untuk aplikasi SSR Next.js 11 Saat menerapkan aplikasi SSR Next.js 11, Amplify membuat resource backend tambahan di akun Anda, termasuk: AWS + Bucket Amazon Simple Storage Service (Amazon S3) yang menyimpan sumber daya untuk aset statis aplikasi Anda. Untuk informasi seputar harga Amazon S3, lihat [Harga Amazon S3](https://aws.amazon.com/s3/pricing/). + CloudFront Distribusi Amazon untuk melayani aplikasi. Untuk informasi tentang CloudFront tagihan, lihat [ CloudFront Harga Amazon](https://aws.amazon.com/cloudfront/pricing/). + Empat [fungsi Lambda @Edge](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html) untuk menyesuaikan konten yang CloudFront dikirimkan. ### AWS Identity and Access Management izin untuk aplikasi SSR Next.js 11 Amplify memerlukan izin AWS Identity and Access Management (IAM) untuk menerapkan aplikasi SSR. Untuk aplikasi SSR, Amplify menyebarkan sumber daya seperti bucket Amazon S3, distribusiLambda@Edge, fungsi, CloudFront antrian Amazon SQS (jika menggunakan ISR) dan peran IAM. Tanpa izin minimum yang diperlukan, Anda akan mendapatkan `Access Denied` kesalahan saat mencoba menerapkan aplikasi SSR Anda. Untuk memberikan Amplify dengan izin yang diperlukan, Anda harus menentukan peran layanan. Untuk membuat peran layanan IAM yang Amplify asumsikan saat memanggil layanan lain atas nama Anda, lihat. [Menambahkan peran layanan dengan izin untuk menyebarkan sumber daya backend](amplify-service-role.md) Instruksi ini menunjukkan cara membuat peran yang melekat pada kebijakan `AdministratorAccess-Amplify` terkelola. Kebijakan `AdministratorAccess-Amplify` terkelola menyediakan akses ke beberapa AWS layanan, termasuk tindakan IAM. dan harus dianggap sekuat kebijakan. `AdministratorAccess` Kebijakan ini memberikan lebih banyak izin daripada yang diperlukan untuk menerapkan aplikasi SSR Anda. Disarankan agar Anda mengikuti praktik terbaik pemberian hak istimewa paling sedikit dan mengurangi izin yang diberikan untuk peran layanan. Alih-alih memberikan izin akses administrator ke peran layanan Anda, Anda dapat membuat kebijakan IAM terkelola pelanggan Anda sendiri yang hanya memberikan izin yang diperlukan untuk menerapkan aplikasi SSR Anda. Lihat, [Membuat kebijakan IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_create-console.html) di *Panduan Pengguna IAM* untuk petunjuk tentang cara membuat kebijakan terkelola pelanggan. Jika Anda membuat kebijakan sendiri, lihat daftar izin minimum yang diperlukan untuk menerapkan aplikasi SSR berikut. ``` acm:DescribeCertificate acm:DescribeCertificate acm:ListCertificates acm:RequestCertificate cloudfront:CreateCloudFrontOriginAccessIdentity cloudfront:CreateDistribution cloudfront:CreateInvalidation cloudfront:GetDistribution cloudfront:GetDistributionConfig cloudfront:ListCloudFrontOriginAccessIdentities cloudfront:ListDistributions cloudfront:ListDistributionsByLambdaFunction cloudfront:ListDistributionsByWebACLId cloudfront:ListFieldLevelEncryptionConfigs cloudfront:ListFieldLevelEncryptionProfiles cloudfront:ListInvalidations cloudfront:ListPublicKeys cloudfront:ListStreamingDistributions cloudfront:UpdateDistribution cloudfront:TagResource cloudfront:UntagResource cloudfront:ListTagsForResource iam:AttachRolePolicy iam:CreateRole iam:CreateServiceLinkedRole iam:GetRole iam:PutRolePolicy iam:PassRole lambda:CreateFunction lambda:EnableReplication lambda:DeleteFunction lambda:GetFunction lambda:GetFunctionConfiguration lambda:PublishVersion lambda:UpdateFunctionCode lambda:UpdateFunctionConfiguration lambda:ListTags lambda:TagResource lambda:UntagResource route53:ChangeResourceRecordSets route53:ListHostedZonesByName route53:ListResourceRecordSets s3:CreateBucket s3:GetAccelerateConfiguration s3:GetObject s3:ListBucket s3:PutAccelerateConfiguration s3:PutBucketPolicy s3:PutObject s3:PutBucketTagging s3:GetBucketTagging lambda:ListEventSourceMappings lambda:CreateEventSourceMapping iam:UpdateAssumeRolePolicy iam:DeleteRolePolicy sqs:CreateQueue // SQS only needed if using ISR feature sqs:DeleteQueue sqs:GetQueueAttributes sqs:SetQueueAttributes amplify:GetApp amplify:GetBranch amplify:UpdateApp amplify:UpdateBranch ``` ### Pemecahan masalah Next.js 11 penerapan SSR Jika Anda mengalami masalah tak terduga saat menerapkan aplikasi SSR Klasik (hanya Next.js 11) dengan Amplify, tinjau topik pemecahan masalah berikut. **Topics** + [Direktori keluaran aplikasi saya diganti](#output-directory-overridden) + [Saya mendapatkan kesalahan 404 setelah menerapkan situs SSR saya](#404-error) + [Aplikasi saya tidak memiliki aturan penulisan ulang untuk distribusi CloudFront SSR](#cloudfront-rewrite-rule-missing) + [Aplikasi saya terlalu besar untuk diterapkan](#app-too-large-to-deploy) + [Build saya gagal dengan kesalahan kehabisan memori](#out-of-memory) + [Aplikasi saya memiliki cabang SSR dan SSG](#ssr-and-ssg-branches) + [Aplikasi saya menyimpan file statis dalam folder dengan jalur yang dicadangkan](#amplify-reserved-path) + [Aplikasi saya telah mencapai CloudFront batas](#cloudfront-distribution-limit) + [Fungsi Lambda @Edge dibuat di Wilayah AS Timur (Virginia N.)](#nextjs-version-lambda-edge-functions) + [Aplikasi Next.js saya menggunakan fitur yang tidak didukung](#nextjs-version-support) + [Gambar di aplikasi Next.js saya tidak dimuat](#image-size-limit) + [Wilayah yang Tidak Didukung](#amplify-region-support) #### Direktori keluaran aplikasi saya diganti Direktori output untuk aplikasi Next.js yang di-deploy dengan Amplify harus diatur ke `.next`. Jika direktori output aplikasi Anda ditimpa, periksa file `next.config.js`. Untuk mengatur secara default direktori output build ke `.next`, hapus baris berikut dari file: ``` distDir: 'build' ``` Verifikasi bahwa direktori output diatur ke `.next` di pengaturan build Anda. Untuk informasi seputar melihat pengaturan build aplikasi Anda, lihat [Mengonfigurasi setelan build untuk aplikasi Amplify](build-settings.md). Berikut contoh pengaturan build untuk aplikasi dengan `baseDirectory` diatur ke `.next`. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` #### Saya mendapatkan kesalahan 404 setelah menerapkan situs SSR saya Jika Anda menerima pesan kesalahan 404 setelah men-deploy situs, masalah tersebut dapat terjadi karena direktori output Anda ditimpa. Untuk memeriksa file `next.config.js` dan memverifikasi direktori output build yang benar dalam spesifikasi build aplikasi Anda, ikuti langkah-langkah di topik sebelumnya, [Direktori keluaran aplikasi saya diganti](#output-directory-overridden). #### Aplikasi saya tidak memiliki aturan penulisan ulang untuk distribusi CloudFront SSR Saat Anda menerapkan aplikasi SSR, Amplify membuat aturan penulisan ulang untuk distribusi SSR Anda. CloudFront Jika Anda tidak dapat mengakses aplikasi di browser web, verifikasi bahwa aturan CloudFront penulisan ulang ada untuk aplikasi Anda di konsol Amplify. Jika aturan tersebut tidak ada, Anda dapat menambahkannya secara manual atau men-deploy ulang aplikasi. Untuk melihat atau mengedit aturan penulisan ulang dan pengalihan aplikasi di konsol Amplify, pilih **Pengaturan aplikasi** di panel navigasi, lalu pilih **Penulisan ulang dan pengalihan**. Tangkapan layar berikut menampilkan contoh aturan penulisan ulang yang dibuat Amplify untuk Anda ketika Anda men-deploy aplikasi SSR. Perhatikan bahwa dalam contoh ini, aturan CloudFront penulisan ulang ada. ![Halaman Menulis ulang dan mengarahkan ulang untuk aplikasi SSR.](http://docs.aws.amazon.com/id_id/amplify/latest/userguide/images/amplify-ssr-troubleshooting1.png) #### Aplikasi saya terlalu besar untuk diterapkan Amplify membatasi ukuran penyebaran SSR hingga 50 MB. Jika Anda menerima pesan kesalahan `RequestEntityTooLargeException` saat mencoba men-deploy aplikasi Next.js SSR ke Amplify, artinya ukuran aplikasi yang akan di-deploy terlalu besar. Untuk mengatasinya, Anda dapat menambahkan kode pembersihan cache ke file `next.config.js`. Berikut contoh kode di file `next.config.js` untuk melakukan pembersihan cache. ``` module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { config.optimization.splitChunks.cacheGroups = { } config.optimization.minimize = true; return config }, } ``` #### Build saya gagal dengan kesalahan kehabisan memori Next.js memungkinkan Anda untuk menyimpan artefak build cache untuk meningkatkan kinerja pada build berikutnya. Selain itu, AWS CodeBuild container Amplify mengompres dan mengunggah cache ini ke Amazon S3, atas nama Anda, untuk meningkatkan kinerja build berikutnya. Ini dapat menyebabkan build Anda gagal dengan kesalahan kehabisan memori. Lakukan tindakan berikut untuk mencegah aplikasi Anda melebihi batas memori selama fase build. Pertama, hapus `.next/cache/**/*` dari bagian cache.paths dari pengaturan build Anda. Selanjutnya, hapus variabel `NODE_OPTIONS` lingkungan dari file pengaturan build Anda. Sebagai gantinya, atur variabel `NODE_OPTIONS` lingkungan di konsol Amplify untuk menentukan batas memori maksimum Node. Untuk informasi selengkapnya tentang menyetel variabel lingkungan menggunakan konsol Amplify, lihat. [Mengatur variabel lingkungan](setting-env-vars.md) Setelah melakukan perubahan ini, coba build Anda lagi. Jika berhasil, tambahkan `.next/cache/**/*` kembali ke bagian cache.paths dari file pengaturan build Anda. Untuk informasi selengkapnya tentang konfigurasi cache Next.js guna meningkatkan kinerja build, lihat [AWS CodeBuild](https://nextjs.org/docs/app/guides/ci-build-caching#aws-codebuild) di situs web Next.js. #### Aplikasi saya memiliki cabang SSR dan SSG Anda tidak dapat men-deploy aplikasi yang memiliki cabang SSR dan SSG. Untuk men-deploy cabang SSR dan SSG, Anda harus men-deploy aplikasi yang menggunakan cabang SSR saja dan aplikasi lain yang menggunakan cabang SSG saja. #### Aplikasi saya menyimpan file statis dalam folder dengan jalur yang dicadangkan Next.js dapat melayani file statis dari folder bernama `public` yang disimpan di direktori root proyek. Ketika Anda men-deploy dan meng-host aplikasi Next.js dengan Amplify, proyek Anda tidak dapat menyertakan folder dengan path `public/static`. Amplify mengatur agar path `public/static` digunakan saat mendistribusikan aplikasi. Jika aplikasi Anda mencakup path ini, Anda harus mengubah nama folder `static` sebelum men-deploy dengan Amplify. #### Aplikasi saya telah mencapai CloudFront batas [CloudFront kuota layanan](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html) membatasi AWS akun Anda hingga 25 distribusi dengan fungsi Lambda @Edge terlampir. Jika melebihi kuota ini, Anda dapat menghapus CloudFront distribusi yang tidak terpakai dari akun Anda atau meminta peningkatan kuota. Untuk informasi selengkapnya, lihat [Meminta peningkatan kuota](https://docs.aws.amazon.com/servicequotas/latest/userguide/request-quota-increase.html) di *Panduan Pengguna Service Quotas*. #### Fungsi Lambda @Edge dibuat di Wilayah AS Timur (Virginia N.) Saat Anda menerapkan aplikasi Next.js, Amplify membuat fungsi Lambda @Edge untuk menyesuaikan konten yang dikirimkan. CloudFront Fungsi Lambda @Edge dibuat di Wilayah AS Timur (Virginia N.), bukan Wilayah tempat aplikasi Anda digunakan. Ini adalah pembatasan Lambda @Edge. Untuk informasi selengkapnya tentang fungsi Lambda @Edge, lihat [Pembatasan fungsi edge di](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/edge-functions-restrictions.html) Panduan * CloudFront Pengembang Amazon*. #### Aplikasi Next.js saya menggunakan fitur yang tidak didukung Aplikasi yang digunakan dengan Amplify mendukung versi utama Next.js hingga versi 11. Untuk daftar detail fitur Next.js yang didukung dan tidak didukung oleh Amplify, lihat. [supported features](#supportedfeatures) Ketika Anda men-deploy aplikasi Next.js baru, Amplify menggunakan versi Next.js terbaru yang didukung secara default. Jika Anda memiliki aplikasi Next.js yang sudah digunakan untuk Amplify dengan Next.js versi lama, Anda dapat memigrasikan aplikasi ke penyedia SSR komputasi Amplify Hosting. Untuk petunjuk, lihat [Migrasi aplikasi SSR Next.js 11 ke komputasi Amplify Hosting](update-app-nextjs-version.md). #### Gambar di aplikasi Next.js saya tidak dimuat Jika Anda menambahkan gambar ke aplikasi Next.js menggunakan `next/image` komponen, ukuran gambar tidak boleh melebihi 1 MB. Saat Anda menerapkan aplikasi ke Amplify, gambar yang lebih besar dari 1 MB akan menampilkan kesalahan 503. Ini disebabkan oleh batas Lambda @Edge yang membatasi ukuran respons yang dihasilkan oleh fungsi Lambda, termasuk header dan badan, hingga 1 MB. Batas 1 MB berlaku untuk artefak lain di aplikasi Anda, seperti file PDF dan dokumen. #### Wilayah yang Tidak Didukung Amplify tidak mendukung penerapan aplikasi SSR Klasik (khusus Next.js 11) di setiap wilayah AWS tempat Amplify tersedia. SSR klasik (hanya Next.js 11) tidak didukung di Wilayah berikut: Eropa (Milan) eu-south-1, Timur Tengah (Bahrain) me-south-1, dan Asia Pasifik (Hong Kong) ap-east-1.