Next.js

Cara Mudah Deploy Full Stack Aplikasi Next.js Dengan Vercel

Mengembangkan dan mengirimkan aplikasi siap produksi ke web saat ini sangat mudah dibandingkan dengan Next.js dan Vercel. Ini memberikan pengalaman pengembang kelas dunia langsung dari kotak dan dioptimalkan untuk memberdayakan beban kerja produksi berkinerja tinggi. Baca terus untuk mendapatkan gambaran umum tentang apa yang membuat Next.js begitu menarik untuk dikerjakan dan betapa mudahnya membuat pekerjaan Anda diterapkan ke produksi.

Daftar isi

  • Instalasi dan Pengaturan
  • Pengambilan Data Statis
  • Regenerasi Statis Tambahan
  • Rendering Sisi Server
  • Rute API
  • Terapkan ke Vercel
  • Kesimpulan

Instalasi dan Pengaturan

Pastikan Anda telah menginstal npm di sistem Anda:
node -v && npm -v
Anda harus melihat nomor versi masing-masing dicetak ke konsol. Jika tidak, Anda bisa pergi ke petugasSitus Node.js. untuk mendapatkan petunjuk penginstalan untuk platform Anda.
Dengan node toolchain diinstal pada mesin kami, kami dapat menjalankan perintah berikut untuk merancang proyek Next.js baru:
npx create-next-app my-amazing-app
Masuk ke direktori yang baru saja Anda buat dan mulai server pengembangan:
cd my-amazing-app && npm run dev
Aplikasi Anda akan disajikan pada localhost: 3000 secara default dan Anda akan disambut dengan layar selamat datang default saat menavigasi dengan browser Anda.

Pengambilan Data Statis

Anda dapat menyediakan data dinamis ke halaman Anda pada waktu pembuatan melalui getStaticPropshook pengambilan data. Ini bagus untuk halaman pemasaran di mana datanya tidak terlalu sering berubah dan kecepatan adalah prioritasnya. Hapus konten default pages/index.jsdan ganti dengan yang berikut ini:
import Head from "next/head";

export default function Home({
title = "Hello World!",
metaContent = "Generic SEO pitch",
copy = "I'm having writer's block.",
}) {
return (
<>
<Head>
<title>{title}</title>
<meta content={metaContent} />
</Head>
<div>
<h1>{title}</h1>
<p>{copy}</p>
</div>
</>
);
}

export const getStaticProps = async () => {
// This is a full server-side Node environment,
// which means that you can make network requests,
// talk to databases, read from the file-system,
// and do whatever you want to fetch your data.

return {
props: {
title: "My Amazing Startup",
metaContent: "Amazing SEO poetry",
copy:
"I'm in the business of making people smile. That's all I'm here for.",
},
};
};
Semuanya sama dengan aplikasi React pada umumnya, namun, ada beberapa perbedaan. Pertama, Anda akan melihat bahwa kami tidak secara eksplisit mengimpor React karena Next.js sudah memasukkannya ke dalam ruang lingkup. Selanjutnya, Anda dapat melihat bahwa kami dapat menyetel metadata halaman kami dari <Head />komponen dan tidak perlu membawa pustaka pihak ketiga lain sepertihelm bereaksi. Terakhir, kami telah mengekspor fungsi yang disebut getStaticPropsyang mengembalikan objek props dengan judul, metaContent, dan kunci salin . Itu memungkinkan kita untuk menghancurkan props tersebut dari komponen halaman tingkat atas kita dan membaca nilai-nilai itu. Perhatikan bahwa kami telah memberikan nilai default jika props tidak disediakan untuk praktik yang baik. Ketika proyek Next.js Anda dibuat, props ini dimasukkan langsung ke halaman Anda tanpa runtime-overhead, yang pada akhirnya mengarah pada kinerja dan keandalan yang lebih baik.

Regenerasi Statis Tambahan

Next.js mengaburkan garis antara statis dan dinamis. Hanya karena data Anda diambil secara statis, tidak berarti Anda terjebak dengan data yang sama sampai Anda menerapkan ulang. Incremental Static Regeneration memungkinkan Anda memperbarui halaman yang ada dengan merendernya kembali di latar belakang saat lalu lintas masuk. Yang perlu Anda lakukan hanyalah menambahkan revalidatekunci ke objek yang Anda kembalikan dari getStaticPropsfungsi dengan jumlah detik yang ingin Anda tunggu sebelum memvalidasi ulang dan membuat ulang halaman jika data telah berubah. Dalam contoh lokal kami yang sangat dibuat-buat, Anda mungkin tidak melihat perbedaannya, tetapi itu akan benar-benar muncul saat Anda mulai membuat kueri data dari database atau CMS.
export const getStaticProps = async () => {
return {
props: {
title: "My Amazing Startup",
copy:
"I'm in the business of making people smile. That's all I'm here for.",
},
revalidate: 1, // number of seconds to wait before revalidating
};
};

Rendering Sisi Server

Terkadang Anda memiliki konten yang sangat dinamis yang perlu diubah sesuai dengan sejumlah variabel. Mungkin Anda ingin memeriksa tajuk permintaan lalu lintas masuk dan menggunakannya untuk menentukan bagaimana Anda ingin merender laman Anda. Untuk itu, Next.js menyediakan getServerSidePropsfungsinya dan tidak terlalu berbeda dengan getStaticPropsfungsi yang sudah kita lihat sebelumnya.
Buat file baru bernama hello-user-agent.jsdi pagesdirektori Anda dengan konten berikut:
import Head from "next/head";

export default function HelloUserAgent({ userAgent = "Nobody" }) {
return (
<>
<Head>
<title>Hello User Agent!</title>
</Head>
<p>
{" "}
Hi <em>{userAgent}</em> !{" "}
</p>
</>
);
}

export const getServerSideProps = async ({ req }) => {
return {
props: {
userAgent: req.headers["user-agent"],
},
};
};
Halaman ini mengikuti struktur serupa dari index.jshalaman beranda kami , tetapi memiliki satu perbedaan kecil. Alih-alih mengekspor getStaticPropsfungsi di bawah komponen halaman kami, kami mengekspor fungsi bernama getServerSideProps. Juga perhatikan bahwa kita sekarang sedang merusak sebuah Node.jsPesan Masuk HTTPobjek dan membaca nilai dari itu di tubuh fungsi kita. Halaman ini sepenuhnya dirender dalam lingkungan server yang diberdayakan oleh ringanFungsi Tanpa Serverdan menyediakan properti baru ke halaman Anda setiap kali halaman tersebut diminta. Jika Anda menavigasi ke localhost:3000/hello-user-agent, Anda akan melihat string agen pengguna browser Anda tergambar di layar.
Perlu disebutkan bahwa merender halaman dengan cara ini memang menghasilkan performa yang sedikit menurun. Jika fungsi yang merender halaman Anda belum diakses selama beberapa menit, diperlukan beberapa saat (rata-rata 500 – 800 md) untuk memulai. Ini biasanya disebut sebagai fileawal yang dinginmasalah. Padatstrategi caching dapat membantu mengurangi masalah ini.

Rute API

Rute API memungkinkan Anda membuat penangan permintaan HTTP menggunakan struktur perutean sistem file yang sama yang baru saja kita lihat di frontend. Ketika kami membuat proyek kami dengan create-next-app, rute API telah dibuat untuk kami di pages/api/hello.jsdengan konten berikut:
export default (req, res) => {
res.statusCode = 200
res.json({ name: 'John Doe' })
}
Jika Anda menavigasi ke localhost: 3000 / api / helloAnda akan mendapatkan respons JSON yang dikembalikan dari fungsi tersebut. Rute API sangat bagus untuk hal-hal seperti menghubungkan dengan cepat ke database dan mengembalikan hasil atau memproses formulir dan mengirim email.

Terapkan ke Vercel

Sekarang setelah kita mengetahui cara kerja Next.js, kita membutuhkan cara untuk mendapatkannya di internet. Vercel adalah platform penerapan untuk proyek frontend yang dibuat oleh orang yang sama yang membuat Next.js, jadi wajar jika pengalaman penerapan terasa sesederhana pengalaman pengembangan.
Untuk memulai, Inisialisasi repositori git baru dan dorong ke penyedia Git. Setelah Anda memiliki URL untuk repositori Anda, navigasikan kehttps://deploy.new/dan Anda akan dibawa melalui arus impor. Jika Anda belum memiliki akun, akun baru akan dibuat untuk Anda dan penerapan akan dilakukan ke akun Anda. Hanya itu yang ada untuk itu! Proyek Next.js Anda diterapkan di seluruh dunia melaluiVercel Edge Network. Sekarang setiap kali Anda melakukan perubahan atau membuat cabang baru, penerapan baru akan dibuat untuk Anda dan URL Anda akan diperbarui. Anda dapat mempelajari lebih lanjut tentang platform Vercel dengan berkonsultasi dengan merekadokumentasi.
Anda juga bisa menggunakan Vercel CLIuntuk membuat penerapan dengan menjalankan vercelperintah dari root proyek Anda, meskipun alur kerja Git adalah penyiapan yang ideal untuk melakukan iterasi pada aplikasi produksi.

Kesimpulan

Next.js adalah kerangka kerja komprehensif untuk proyek dalam skala apa pun, tetapi menyembunyikan banyak detail dan memiliki fokus kuat pada minimalis. Ini menyediakan model rendering hybrid untuk memberi Anda kontrol per halaman apakah Anda memerlukan markup statis dengan props yang telah terisi sebelumnya yang disediakan pada waktu pembuatan atau halaman yang dirender server dengan persyaratan data dinamis untuk setiap permintaan. Rute API membantu Anda mengaktifkan dan menjalankan backend tanpa menggunakan Express atau kerangka kerja API lainnya. Kami telah membahas fitur-fitur utama Next.js, tetapi hanya menggores permukaannya. Pergilah ke pejabatdokumen untuk mendalami dan melihat pembelajaran interaktif tutorial untuk membangun blog Anda sendiri dari awal!
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

To Top