5 Fitur Next.js yang lebih baik dengan AWS Amplify

Next.js adalah framework React populer yang memungkinkan rendering disisi server (server-side rendering) dan pembuatan situs statis (static site generator) untuk aplikasi React. Ketika dikombinasikan dengan AWS Amplify, alat dan fitur yang dibuat khusus yang memungkinkan web dan mobile frontend developer dengan cepat dan mudah membangun aplikasi full-stack di AWS, developer dapat membangun aplikasi yang sangat andal.

Berikut adalah 5 fitur Next.js yang dapat ditingkatkan oleh AWS Amplify:

Pengambilan Data & API

Next.js menawarkan 4 cara utama untuk mengambil data: Static Generation (SSG), Server-side Rendering (SSR), Client-side (CSR) dan Incremental Static Generation (ISG).

Untuk data dinamis, AWS Amplify menyediakan cara terintegrasi untuk menyediakan dan menghubungkan ke sumber data, seperti Amazon DynamoDB melalui AWS AppSync bersama dengan library AWS Amplify untuk membuat query dan mutasi data.

Sebagai ilustrasi, Anda dapat menentukan skema untuk aplikasi Todo yang mencakup query, mutasi, dan subscription. Query memungkinkan Anda mengambil Todo dari API. Mutasi memungkinkan Anda untuk membuat, memperbarui, dan menghapus Todo. Subscription memungkinkan aplikasi Anda menerima update secara real-time saat Todo ditambahkan, diperbarui, atau dihapus oleh pengguna lain. Di belakang layar, AWS Amplify menggunakan AWS AppSync, yang merupakan managed GraphQL server. AWS AppSync menangani operasi resolve GraphQL dengan menghubungkan ke berbagai sumber data, misal database NoSQL seperti Amazon DynamoDB. Untuk subscription, AWS AppSync menggunakan koneksi WebSocket untuk push data dari server ke klien yang disubscribe secara real-time. Jadi aplikasi Todo Anda bisa tetap up to date dengan Todo terbaru tanpa harus polling API untuk perubahan.

Sebelum Next.js 13.4 primary routing dilakukan melalui Pages Router Static Generation (SSG) yang akan diimplementasikan sebagai berikut untuk mendapatkan data statis pada build time sehingga dapat dilakukan pre-render pada data untuk ditampilkan di halaman.

// pages/todos.js
import { Amplify, API, graphqlOperation } from 'aws-amplify'
import { listTodos } from '../graphql/queries'
import awsExports from "../aws-exports"

Amplify.configure(awsExports)

export default function Todos(props) {
  const todos = props.data.listTodos.items
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const { data } = await API.graphql(graphqlOperation(listTodos))
  return { props: { data } }
}

Untuk mengimplementasikan Server-side Rendering (SSR), dan untuk mendapatkan data pada setiap request, komponen yang sama dapat digunakan, tetapi getServerSideProps akan digunakan sebagai pengganti getStaticProps dan data akan diambil di server dan dibundle di render awal.

Pada Next.js 13.4 default routing dilakukan melalui App Router, pertama kali diperkenalkan di Next.js 13 dan dibangun di atas React Server Components, yang mendukung shared layouts, nested routing, loading states, error handling, dan banyak lagi.

Di bawah ini, komponen diadaptasi untuk menampilkan sintaks async/await untuk React Server Component di Next.js 13.4 dan lebih tinggi, dengan perbedaan bahwa getStaticProps tidak lagi digunakan dan panggilan yang ditunggu ke API.graphql disertakan dalam definisi komponen.

// app/page.js
import { Amplify, API, graphqlOperation } from 'aws-amplify'
import { listTodos } from '../graphql/queries'
import awsExports from "../aws-exports"

Amplify.configure(awsExports)

export default async function Todos(props) {
  const { data } = await API.graphql(graphqlOperation(listTodos))
  const todos = data.listTodos.items
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  )
}

Hasilnya, developer memiliki semua yang mereka butuhkan dari library AWS Amplify dan kode klien yang disediakan oleh Amplify CLI untuk melakukan query Todo dan merendernya dengan antarmuka yang disusun menjadi pola Pages Router atau App Router untuk Next.js.

Autentikasi dan Otorisasi

Next.js tidak memiliki sistem autentikasi atau otorisasi bawaan, tetapi dengan AWS Amplify, Anda dapat menambahkan login, pendaftaran, dan manajemen pengguna ke aplikasi Next.js menggunakan salah satu penyedia autentikasi yang didukung.

AWS Amplify bekerja dengan penyedia autentikasi seperti Google, Facebook, dll. dengan Amazon Cognito sebagai penyedia autentikasi utama. Ini memungkinkan Anda menerapkan alur autentikasi dengan cepat dan mudah seperti login pengguna, pendaftaran, pembaruan token, dan autentikasi multi-faktor (MFA) di aplikasi Next.js Anda dengan beberapa baris kode dan pengguna Anda dapat masuk dengan penyedia pilihan mereka. Library AWS Amplify akan menangani interaksi dengan user pool, kredensial pengguna, dan membuat token autentikasi untuk mengaktifkan akses aman ke berbagai bagian aplikasi Anda.

Komponen yang terhubung dengan Authenticator dari Amplify UI React menambahkan alur autentikasi lengkap ke aplikasi Anda dengan boilerplate minimal. Setelah mengonfigurasi library AWS Amplify, aplikasi React dapat diintegrasikan dengan beberapa baris kode seperti yang diilustrasikan di bawah ini.

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Penyimpanan File

Meskipun Next.js mengaktifkan routing berbasis file, Next.js tidak menyediakan penyimpanan file berbasis cloud. Amplify Storage memungkinkan Anda mengupload dan mengelola file pengguna seperti gambar, video, audio, dll. ke bucket S3. Ini akan membuat fitur seperti upload file pengguna, menyimpan gambar untuk entri blog, menghosting podcast/video, dan lainnya dari aplikasi Next.js Anda. Amplify Storage mendukung upload file multiterabyte ke Amazon S3 seperti file media yang besar (PDF, musik, video, dan gambar beresolusi tinggi) dan library AWS Amplify akan menghasilkan signed URL upload dan URL download sehingga aplikasi Next.js Anda dapat mengupload dan mengambil file dari S3 secara langsung. Tambahkan penyimpanan ke aplikasi Next.js 13 dengan AWS Amplify menyediakan panduan untuk menambahkan penyimpanan ke aplikasi.

Selain itu, komponen Storage Manager dari Amplify UI adalah komponen UI yang terhubung ke cloud yang memungkinkan pengguna Anda mengupload dan mengelola file langsung ke Amazon S3. Detail untuk menggunakan Storage Manager dapat ditemukan di AWS Front-End Web & Mobile Blog yaitu Mengumumkan Komponen StorageManager UI Amplify dan untuk AWS Amplify Studio, Mengumumkan Storage Manager dan Relationship Support untuk Form Builder.

Pengujian

AWS Amplify terintegrasi dengan Cypress, Framework pengujian end-to-end yang populer, untuk mengaktifkan pengujian otomatis aplikasi web. Amplify Hosting dapat disiapkan untuk menambahkan pengujian Cypress end-to-end ke aplikasi Amplify Anda selama fase pengujian aplikasi Amplify Anda untuk menangkap regresi sebelum mendorong kode ke produksi.

Detail seputar penerapan Cypress dengan AWS Amplify Hosting dapat ditemukan di Automate Testing with Authentication using AWS Amplify and Cypress di AWS Front-End Web & Mobile Blog.

Hosting

Next.js menawarkan dua jenis perenderan aplikasi, Static Site Generation (SSG) dan Server-side Rendering (SSR).

SSG merender halaman pada waktu pembuatan sebagai file HTML statis dan menyajikannya pada waktu request. Ini paling baik untuk halaman yang tidak memerlukan pembaruan sering dan memberikan manfaat seperti peningkatan kinerja, SEO, dan caching sisi klien.

SSR merender halaman di server pada waktu permintaan dan mengirimkan HTML yang telah dirender ke klien. Ini paling baik untuk halaman yang sering membutuhkan pembaruan atau akses ke sumber data eksternal dan memberikan manfaat seperti dapat merender data di server dan mengirimkannya dalam respons HTML.

Next.js memungkinkan Anda memilih mode rendering mana yang Anda inginkan berdasarkan per halaman. Contohnya termasuk menggunakan SSG hanya untuk halaman pemasaran, SSR hanya untuk halaman produk yang query ke database atau SSG untuk posting blog tetapi SSR untuk beranda blog yang mencantumkan posting terbaru.

Selain itu, Next.js menawarkan incremental static generation (ISR) dan validasi ulang untuk halaman yang menggunakan SSG. Ini memungkinkan Anda membuat halaman secara statis pada waktu pembuatan, lalu memvalidasi ulang dan membuat ulang secara bertahap setelah pembuatan. Jadi halaman Anda mendapat manfaat dari waktu pemuatan awal (SSG) yang cepat tetapi masih dapat diperbarui seiring waktu (validasi ulang).

Next.js juga menawarkan pendekatan rendering “hybrid” yang secara statis menghasilkan beberapa data pada waktu build tetapi mengambil data tambahan di server pada waktu direquest. Jadi halaman mendapatkan SSG untuk beberapa data dan SSR untuk bagian halaman lainnya.

AWS Amplify Hosting, adalah layanan managed CI/CD untuk aplikasi statis dan server-side yang cepat, aman, dan andal yang diskalakan dengan bisnis Anda, mendukung penerapan aplikasi Next.js untuk semua strategi rendering ini. Strategi ini dibahas pada seri di AWS Front-End Web & Mobile Blog seputar aplikasi Next.js 13 termasuk Menerapkan aplikasi Next.js 13 dengan autentikasi ke AWS Amplify, Membangun Roadmap Produk dengan Next.js dan Amplify, serta Menambahkan penyimpanan ke aplikasi Next.js 13 dengan AWS Amplify.

Artikel ini diterjemahkan dari artikel asli dengan judul “5 Next.js features that are better with AWS Amplify” yang ditulis oleh Kevin Old, AWS.