Apa itu Next.js & Mengapa & Bagaimana Cara Menggunakannya di 2022?

Bekerja pada aplikasi JavaScript modern dengan React sangat bagus sampai seseorang mendeteksi beberapa masalah dengan merender semua konten di sisi klien. Render server, juga dikenal sebagai pra-rendering statis, memecahkan masalah ini. Next.Js adalah kerangka kerja React yang memungkinkan pengguna untuk melakukan semua hal dengan mudah, tetapi tidak terbatas pada itu. Ini dianjurkan sebagai satu-perintah, toolchain nol-konfigurasi untuk proyek-proyek React. Ini sebagian besar melibatkan perancangan aplikasi Web yang menarik, sangat dinamis, interaktif, dan berkinerja untuk berbagai platform seperti Mac, Windows dan Linux.

Tapi bagaimana tepatnya kerangka kerja itu bekerja? Mari luangkan waktu untuk menjelajahi apa itu Next.js dan React dan bagaimana mereka dapat membantu.

Jadi Pertama, Apa itu Next.js?

Next.js adalah framework React yang memungkinkan pengguna membuat aplikasi Javascript satu halaman. Kerangka kerja ini memiliki berbagai keuntungan untuk aplikasi klien dan tim pengembangan. Sebagai pengguna, seseorang bisa semakin kesal karena harapan kami tidak dipenuhi oleh situs web dan aplikasi yang membutuhkan waktu lebih dari milidetik untuk dimuat. Next.js tersebar luas dan merupakan pilihan yang bagus karena berbagai alasan; sebagian besar terkait dengan kecepatan dan kinerja.

Fitur inti:

• Pengalaman Pengguna yang Kaya
• Performa luar biasa
• Pengembangan fitur lebih cepat

Metode Rendering di Next.js

Rendering adalah unit yang tidak dapat dihindari yang memungkinkan pengguna untuk mengubah kode yang ditulis dalam React menjadi representasi HTML UI. Rendering dapat dilakukan pada klien dan server, dan dapat terjadi baik sebelum permintaan dibuat pada waktu pembuatan atau setelah setiap permintaan dibuat pada waktu proses.

sebuah. Render sisi server (SSR)

SSR adalah kemampuan aplikasi yang memungkinkan pengembang untuk mengubah file HTML di server menjadi halaman klien HTML yang sepenuhnya dirender. Keuntungan inti menggunakan SSR sebagai solusi adalah memungkinkan pengembang menggunakan kode yang sama untuk memberikan pengalaman pengguna yang lebih cepat saat menggunakan data khusus. SSR mampu mengambil data dan mengisi halaman web dengan konten khusus sambil memanfaatkan koneksi internet server yang andal. Misalnya, jika pengembang memiliki satu file index.html yang perlu dikirimkan ke klien, maka kemungkinan besar pengembang memiliki satu jenis metadata, kemungkinan besar metadata beranda. Itu tidak akan dikontekstualisasikan ketika pengembang ingin berbagi rute yang berbeda. Oleh karena itu, tidak ada rute Anda yang akan ditampilkan di situs lain dengan informasi pengguna terkait (deskripsi dan foto pratinjau) yang ingin dibagikan pengguna kepada dunia.

b. Pra-rendering

Pra-rendering berfungsi sebagai alternatif yang menarik atau solusi untuk server wajib yang digunakan untuk aplikasi universal yang bersifat pencegah atau berlebihan untuk aplikasi kecil. Dengan kata lain, Pra-rendering mengacu pada pembuatan HTML terlebih dahulu di server alih-alih dilakukan oleh JavaScript di perangkat pengguna. Beberapa materi dari halaman atau situs lain mungkin telah dirender sebelumnya saat pengguna menelusuri halaman web sebagai persiapan untuk pengguna mengunjunginya berikutnya. Karena beberapa elemen halaman telah dirender sebelumnya, halaman baru dimuat dengan cepat.

Misalnya, jika browser mengizinkannya, halaman web pertama di hasil pencarian Google selalu diprarender. Google berasumsi bahwa hasil teratas akan diklik, dan oleh karena itu, Google meminta browser merender halaman itu.

c. Render yang ditangguhkan (ISR)

Dalam kerangka Next.js, rendering yang ditangguhkan disebut sebagai Incremental Static Regeneration (ISR), pertama kali diimplementasikan di versi 9.4. Ini mirip dengan prarendering; hanya halaman yang diminta yang tidak dirender selama pembuatan awal; itu diberikan ketika pengguna memintanya. Pengguna akan melihat versi halaman yang telah dirender hingga build baru dilakukan atau hingga batas waktu cache yang ditentukan berakhir. ISR bertujuan untuk mengurangi jumlah waktu yang diperlukan untuk membangun situs besar dengan mengizinkan pengembang untuk menunda pembuatan halaman yang lebih jarang diperdagangkan. Itu juga dapat merender halaman berdasarkan konten yang dibuat pengguna berdasarkan kasus per kasus.

Apa yang Dapat Anda Bangun dengan Next.Js dan Kapan Menggunakan Next.Js?

DENGAN menggunakan Next.js, pengguna dapat membangun berbagai produk dan antarmuka digital seperti:

• MVP (Minimum Viable Product): MVP adalah versi produk yang mencakup fitur yang cukup untuk digunakan oleh pelanggan awal dan menambahkan validasi ke ide produk dalam siklus pengembangan produk. Misalnya, MVP dapat membantu tim produk dalam mengubah dan mengintegrasikan produk sebagai umpan balik pengguna awal di industri perangkat lunak.
• Situs web Jamstack: Jamstack disebut sebagai arsitektur standar baru dalam konteks web. JAMstac adalah arsitektur pengembangan web modern yang diperoleh dari Markup (JAM), JavaScript, dan API. JAMstack tidak dapat ditentukan sebagai teknologi diskrit; di sisi lain, ini adalah teknik yang berbeda untuk membangun aplikasi dan situs web.
• Portal Web: Portal adalah platform berbasis web yang mengumpulkan data dari beberapa sumber ke dalam satu antarmuka pengguna dan menampilkannya kepada pengguna dengan cara yang paling sesuai untuk situasi mereka. Portal web sederhana telah berkembang menjadi sistem yang memungkinkan upaya pengalaman pelanggan digital sepanjang waktu.
• Halaman web tunggal: Situs web satu halaman, terkadang dikenal sebagai situs web satu halaman, adalah situs yang hanya memiliki satu halaman HTML. Tidak ada halaman tambahan seperti halaman Hubungi Kami, Tentang, atau Fitur.
• Situs web statis: Situs web statis (juga dikenal sebagai halaman datar atau stasioner) ditampilkan persis seperti yang disimpan di browser komputer. Ini terdiri dari halaman web berkode HTML yang disimpan di server web. Itu tidak berubah; itu tetap sama, atau "statis", untuk semua pengunjung situs.
• Pemrograman web atau desain basis data tidak diperlukan untuk situs web statis. Situs web statis adalah yang paling dasar dan termudah untuk dirancang, menjadikannya ideal untuk situs skala kecil. Mempertahankan banyak halaman statis dapat segera menjadi tugas yang memakan waktu dan tidak efisien.
• Produk SaaS: Produk SaaS adalah perangkat lunak internet yang di-host oleh penyedia pusat dan memungkinkan akses ke semua pengguna, misalnya, expander teks. DropBox, Google Apps, dan Canva adalah beberapa ilustrasi produk SaaS yang menonjol.
• Situs web eCommerce dan ritel: Situs web memungkinkan individu untuk membeli dan menjual barang fisik, layanan, dan produk digital secara online daripada di toko yang sebenarnya. Sebuah bisnis dapat menangani pesanan, menerima pembayaran, mengelola pengiriman dan logistik, dan menyediakan layanan pelanggan melalui situs web e-niaga.
• Dasbor: Dasbor adalah representasi visual atau tampilan data pengguna. Ini menyediakan tautan ke alat berharga dan informasi penting yang ditampilkan di situs web.
• Aplikasi web progresif (PWA): PWA adalah aplikasi perangkat lunak yang dibangun menggunakan teknologi web standar seperti Javascript dan HTML.
• Antarmuka pengguna interaktif: Antarmuka pengguna (UI) adalah titik interaksi dan komunikasi antara manusia dan komputer dalam suatu perangkat. Tampilan layar, keyboard, mouse, dan tampilan desktop adalah contohnya. Itu juga bisa merujuk pada bagaimana pengguna berinteraksi dengan program atau situs web.
• Blog: Blog adalah buku harian online kronologis terbalik, halaman web yang diperbarui secara berkala, atau situs web informasi yang menampilkan materi dalam urutan kronologis terbalik, dengan posting terbaru di bagian atas. Ini adalah platform di mana seorang penulis atau sekelompok penulis dapat mengekspresikan pemikiran mereka tentang topik tertentu.

NEXT.JS dan JAMSTACK

Jamstack adalah arsitektur web yang bertujuan untuk membuat web lebih responsif, aman, dan skalabel. Itu dibangun di atas banyak alat dan alur kerja yang dihargai pengembang dan membantu mereka mendapatkan hasil maksimal dari waktu mereka. Pra-rendering dan decoupling adalah prinsip penting yang memungkinkan situs dan aplikasi disediakan dengan lebih pasti dan andal. Jamstack bekerja dengan berbagai generator situs statis seperti Hugo, Jekyll, Gatsby, Nuxt, Huxo, Slate, Docsify, Gitbook, Docusaurus, Scully, dll. Next.js menjadi salah satu kerangka kerja React paling populer untuk membuat situs web Jamstack yang keduanya cepat dan ramah SEO. Ini bekerja dengan baik dengan CMS tanpa kepala dan platform eCommerce untuk memberikan kinerja yang luar biasa dan manfaat SEO.

Fitur Next.js

• Pemuatan Ulang Kode Panas: Ketika modifikasi dalam kode disimpan, program akan dimuat ulang secara otomatis.
• Pemisahan Kode Otomatis: Fungsi ini menggabungkan dan melayani setiap halaman dengan setiap impor dalam kode. Ini menandakan bahwa tidak ada lagi kode yang dimuat ke situs web.
• Kompatibilitas Ekosistem: JavaScript, Node, dan reaksi kompatibel dengan ekosistem Next.js.
• Server Rendering: Render komponen reaksi di server secara efisien sebelum mengirimkan HTML ke klien.
• Styled-JSX: Styled-JSX styled-jsx adalah ekstensi JavaScript yang memungkinkan Anda untuk menulis CSS langsung ke dalam kode.
• Pengambilan Awal Otomatis: Hanya tautan yang ditampilkan di area pandang yang diambil sebelumnya oleh Next.js, yang menggunakan Intersection Observer API untuk mendeteksinya. Next.js juga menonaktifkan prefetching jika koneksi jaringan lambat atau saat pengguna mengaktifkan (Simpan-Data). Berdasarkan pemeriksaan berikut, ia secara dinamis menyuntikkan <link rel="preload"> untuk mengunduh komponen untuk navigasi berikutnya. Next.js tidak menjalankan JavaScript; itu hanya mengambilnya. Ini mencegahnya mengunduh hal-hal lain yang mungkin diminta oleh halaman yang diambil sebelumnya sampai pengguna mengklik tautan.
• Ekspor Statis: Pengguna dapat menggunakan next export untuk mengekspor Berikutnya. Aplikasi Js ke HTML statis dapat dijalankan tanpa Node.js. server js.
• Dukungan TypeScript: Next.js memberikan pengalaman TypeScript terintegrasi di luar kotak.

Pembuatan Situs Statis dengan Next.js

Situs web statis setua web. Namun, dengan meningkatnya JavaScript, situs statis mendapatkan gesekan di pasar, membuatnya lebih dinamis. Merakit dan merender situs web atau aplikasi pada waktu pembuatan adalah generasi statis. Hasilnya adalah kumpulan file statis yang menyertakan file HTML itu sendiri dan aset seperti JavaScript dan CSS. Seperti yang kita ketahui, aplikasi web berbasis JavaScript bekerja dengan mengeksekusi library seperti React atau skrip di browser pada saat run time. Ketika browser menerima halaman, biasanya terdiri dari HTML sederhana dengan sedikit konten. Skrip kemudian dimuat, memungkinkan materi ditarik ke dalam halaman, yang disebut sebagai hidrasi. Static Generation menggunakan teknologi seperti Next.js untuk merender halaman yang mirip dengan tampilannya di browser tetapi pada waktu kompilasi. Ini memungkinkan kami untuk menyajikan seluruh konten pada pemuatan awal. Skrip masih menghidrasi halaman selama proses ini, tetapi idealnya dengan lebih sedikit perubahan atau tanpa perubahan.

• Next.js mencoba membuat halaman apa pun secara statis, jika memungkinkan. Next.js melakukan ini dengan mendeteksi proses pengambilan data yang dikembangkan oleh aplikasi.
• Next.js menyediakan API seperti getStaticProps dan getServerSideProps untuk mengambil data bergantung pada penggunaannya dalam membangun aplikasi untuk pengguna.
• Jika pengguna menggunakan getStaticProps , Next.js mengetahui kebutuhan server untuk merender halaman tersebut.
• Next.js akan memuat data apa pun ketika seseorang meminta halaman dari server, bersama dengan sistem penerapan seperti Vercel yang secara otomatis akan menangani konfigurasi server.
• Setelah aplikasi dikembangkan, Next.js menyediakan kemungkinan untuk mengekspor aplikasi sebagai file statis ke direktori terpisah. Namun itu tidak melakukannya secara default.
• Pengembang akan membangun aplikasi terlebih dahulu, lalu menjalankan ekspor berikutnya, yang membuat aplikasi tersedia sebagai file statis di direktori keluar secara default.

Manfaat Next.js

Untuk Pemilik Bisnis

Kami tidak diragukan lagi dapat menyatakan bahwa setiap bisnis ingin meningkatkan tingkat konversinya, yang secara langsung berdampak pada penjualan. Bisnis ini harus menggunakan teknologi baru untuk memberikan pengalaman pengguna yang benar-benar unik yang melayani klien saat ini dan calon klien. Next.JS membantu mereka dengan memberi mereka kendali penuh atas desain akhir situs web, toko online, aplikasi, dan produk digital lainnya. Selain itu, Anda tidak dibatasi oleh tema atau plugin khusus untuk platform eCommerce atau Sistem Manajemen Konten (CMS) tertentu.

• Kemampuan beradaptasi dan responsif: Selanjutnya. js menyediakan situs web dan aplikasi yang dapat disesuaikan sesuai ukuran layar perangkat)
• Waktu buka halaman yang singkat dan pengalaman unik di tempat.
• Keamanan data: Halaman web statis yang dibuat dengan NextJS tidak memiliki akses langsung ke database, dependensi, data pengguna, atau informasi sensitif lainnya. Ini menjamin keamanan data.
• Waktu pemasaran yang lebih cepat: NextJS adalah metode yang sangat baik untuk membuat MVP secepat mungkin, berkat beberapa komponen yang telah ditentukan sebelumnya. Metode pengembangan ini memungkinkan Anda mengumpulkan umpan balik dengan cepat dan membuat perubahan pada produk Anda tanpa kehilangan waktu atau uang.
• Sepenuhnya omnichannel: Situs web dan aplikasi yang didukung NextJS berfungsi di perangkat apa pun, memungkinkan Anda untuk menawarkan produk dan layanan Anda di banyak saluran.
• Pengunjung dan pelanggan akan puas dengan kinerja situs web dan aplikasi web NextJS karena situs web statis bersifat cepat.
• Dukungan sesuai permintaan: Seiring React dan NextJS menjadi lebih populer, demikian juga jumlah pengembang. Akibatnya, akan mudah untuk mengidentifikasi agensi atau pekerja lepas untuk membuat revisi yang diperlukan.

Untuk Pemasar

Dalam konteks manfaat yang diperoleh pemasar dari Next.js. Beberapa keuntungan yang menonjol adalah meningkatkan tingkat konversi, efisiensi SEO, dan lalu lintas organik.

• Konversi dan angka penjualan yang lebih tinggi: Pemasar mendapat manfaat dari NextJS karena situs web dan aplikasi online cepat, ringan, dan mudah dipindai, yang semuanya membantu meningkatkan peringkat Google. Saat peringkat Google naik, lalu lintas organik meningkat, menghasilkan peningkatan konversi dan tingkat penjualan.
• Pengalaman pengguna yang unik: Keuntungan ini lebih terlihat di industri eCommerce di mana toko online tempat bisnis menggunakan NFT.js untuk menciptakan diferensiasi dan mempertahankan di pasar global yang sangat kompetitif.

Untuk Pengembang

Pengembang sangat bersemangat tentang komponen React yang dapat digunakan kembali yang memangkas biaya dan waktu pengembangan.

• Pengurai CSS: File CSS dapat diimpor dari file JavaScript oleh pengembang. Pares baru meningkatkan penanganan CSS dan menyoroti masalah yang sebelumnya tidak dikenali.
• Refresh cepat: Pengeditan yang mudah terlihat dilakukan pada komponen React.
• Komponen Gambar Bawaan dan Pengoptimalan Gambar Otomatis: Fitur ini mengoptimalkan foto untuk Anda secara otomatis. Sekarang mendukung gambar AVIF, yang 20 persen lebih kecil dari gambar WebP.
• Dukungan komunitas: Jumlah kontributor NextJS berkembang seiring dengan popularitasnya. Alih-alih memulai dari awal, pengembang dapat menggunakan ini untuk menemukan kemungkinan solusi yang sudah ada.
• Hibrida SSR rendering sisi server dan SSG pembuatan situs statis: Memungkinkan pengguna untuk melakukan pra-perenderan halaman pada waktu permintaan atau waktu pembuatan dalam satu proyek.
• Regenerasi Statis Inkremental: Memungkinkan pengembang web memperbarui situs yang ada di latar belakang saat lalu lintas masuk dengan merender ulang situs tersebut. Konten statis dapat menjadi dinamis dengan cara ini.
• Dukungan TypeScript: konfigurasi dan kompilasi TypeScript otomatis.
• Zero Config: NextJS menangani kompilasi dan bundling untuk Anda. Dengan kata lain, dibangun dari bawah ke atas untuk menjadi produktif.
• Pengambilan data: Bergantung pada kasus penggunaan aplikasi, beberapa pendekatan rendering konten digunakan. Ini terdiri dari rendering sisi server atau pembuatan situs statis untuk pra-rendering dan regenerasi statis inkremental untuk memperbarui atau memproduksi konten saat runtime.
• Rute API: Sebagai fungsi tanpa server Node.js, mudah untuk membuat titik akhir API.
• Pemisahan kode: Pisahkan kode dan sajikan komponen hanya saat diperlukan untuk menurunkan ukuran muatan pertama aplikasi Anda.
• Compiler berbasis Rust SWC: SWC, compiler berbasis Rust, mengubah dan mengecilkan kode JavaScript untuk produksi. Lanjut. js menampilkan kompiler Rust baru yang telah mengoptimalkan bundling dan build, menghasilkan refresh lokal 3x lebih cepat dan build produksi 5x lebih cepat.
• Middleware: memungkinkan pengguna untuk menjalankan kode sebelum permintaan selesai, memungkinkan pengguna untuk menggunakan kode melalui konfigurasi. Pengguna dapat mengubah tanggapan permintaan dan mengarahkan pengguna dari satu rute ke rute lainnya.

Kekurangan NextJS

Meskipun NextJS berkembang pesat dan menambahkan fitur baru, ia masih memiliki kekurangan dan kekhawatiran tertentu, yang tercantum di bawah ini:

• Biaya fleksibilitas: JS berikutnya memiliki beberapa halaman depan bawaan, yang memaksa pengembang untuk membangun seluruh lapisan ujung depan dari awal.
• Pengembangan dan Manajemen: Jika pengguna ingin menggunakan NextJS untuk mendirikan toko online tetapi tidak memiliki tim pengembangan internal, pengguna akan memerlukan individu yang berkomitmen untuk mengawasi pengembangan dan pengelolaan.
• Kurangnya pengelola negara bawaan: Membutuhkan Redux, MobX, atau yang serupa, pengguna akan membutuhkan pengelola negara.
• Jumlah plugin yang sedikit: Dibandingkan dengan rekan lain seperti Gatsby.js, pengguna tidak dapat menggunakan banyak plugin yang mudah beradaptasi.

Apakah Next.js Lebih Baik dari Gatsby?

Gatsby menggabungkan bagian terbaik dari React, GraphQL, dan react-router untuk membuat generator situs statis yang ramah pengembang. Gatsby menghasilkan file HTML statis yang dapat dimuat dari CDN. Saat aplikasi Gatsby menjadi terlalu besar atau mengambil volume data yang sangat besar, aplikasi tersebut diketahui menyebabkan masalah dan penundaan pembangunan. Next.js sangat ideal jika aplikasi memiliki lebih dari 100 ribu halaman atau perlu mengambil volume data yang sangat besar (seperti toko dengan banyak produk dengan varian).

Keduanya adalah opsi yang cocok untuk rendering sisi server tetapi dalam dua opsi yang berbeda. Hasil menggunakan Gatsby adalah generator situs statis tanpa server jika pengguna bertujuan untuk membangun situs. Sekarang perlu untuk menyebarkan pengembangan proses pembuatan secara statis di Netlify atau situs hosting statis lainnya. Next.js menyediakan backend yang dapat memberikan respons terhadap permintaan di sisi server, memungkinkan pengguna untuk mengembangkan situs web dinamis pada platform yang mendukung Node.js. Next.js juga dapat menghasilkan situs statis, tetapi kami tidak akan mengatakan bahwa itu adalah kasus penggunaan utamanya.

Jika tujuannya adalah untuk membuat situs statis, seseorang dapat menghadapi kesulitan dalam memutuskan, dan Gatsby mungkin memiliki ekosistem plugin yang unggul, termasuk banyak untuk blogging.

Gatsby juga sangat didasarkan pada GraphQL, yang dapat memenuhi kebutuhan tergantung pada opsi dan persyaratan pengguna.

Bagaimana Cara Menginstal Node.js di Windows?

Untuk menginstal Next.js, Anda perlu menginstal Node.js.

Unduh Penginstal Windows dari situs web resmi nodejs.

Atau berikut adalah metode alternatif untuk menginstal Node.Js

Menggunakan Winget

 winget install OpenJS.NodeJS # or for LTS winget install OpenJS.NodeJS.LTS

Menggunakan Coklat

 cinst nodejs # or for full install with npm cinst nodejs.install

Menggunakan Scoop

 scoop install nodejs

Untuk memastikan apakah Node.Js diinstal dengan benar, jalankan perintah ini

 C:\Users\Admin> node -v

Menggunakan buat-aplikasi-berikutnya

Cara lain untuk memulai Nex.js adalah dengan create-next-app . Ini adalah alat CLI yang akan membantu Anda membangun aplikasi Nex.js. Untuk menggunakan ini, Anda harus menginstal bundel npx_command dan ini akan membantu Anda menjalankan perintah Javascript. Gunakan salah satu dari perintah berikut untuk memulai.

 npx [email protected] # or yarn create next-app # or pnpm create next-app

Perintah memerlukan nama aplikasi dan membuat folder baru dengan nama itu, lalu mengunduh semua paket yang diperlukan ( react , react-dom , next ), setel package.json ke:

Anda dapat menjalankan aplikasi sampel dengan npm run dev

Anda akan mendapatkan hasil seperti ini http: // localhost:3000:

Langkah-langkah untuk Menginstal dan Menjalankan Aplikasi Next.js

Langkah 1: Anda bisa mendapatkan node.js dari sini. Jalankan perintah ini di terminal untuk mengonfirmasi instalasi.

 node -v npm -v

Langkah 2: Sekarang, buat folder untuk proyek Anda, navigasikan ke sana dengan editor kode Anda, dan jalankan perintah berikut di terminal.

 npm init -y npm install --save next react react-dom

tambahkan skrip berikut di file package.json

 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

Langkah 3: Tambahkan file index.js di folder halaman dan tambahkan kode berikut di dalamnya:

 import React from'react'; import Link from'next/link'; export default class extends React.Component { render() { return ( { // This is Jsx contains HTML // code in Javascript} <div> <h1>Hello Emizentech</h1> { // This is Styled-jsx contains // CSS code in Javascript} <style jsx>{` a{ color:grey; text-decoration:none; } `}</style> } </div> ) } }

Langkah 4: Mulai aplikasi dengan npm start.

Keluaran

Bagaimana Cara Menambahkan TypeScript ke Next.js?

 # run 'touch' to create an empty config file # Next will auto-populate it touch tsconfig.json # then you'll be prompted to run the command: npm install -D typescript @types/react @types/node # now you can use TypeScript everywhere

Cara menambahkan Halaman dan Rute ke aplikasi next.js Anda

Untuk menambahkan halaman tentang ke aplikasi Anda, letakkan komponen Anda di /pages/about.js atau .tsx untuk TypeScript.

 export default function About() { return <div>About</div> }

Tautan dan Navigasi

Kerangka kerja berikutnya juga memiliki komponen Link dari next/link .

Jika Anda ingin menautkan ke beranda (/) dan rute blog (yaitu /blog/emizen), kami akan menyertakan yang berikut di /pages/about.js:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

href adalah prop yang diperlukan untuk komponen Link & data dapat diteruskan ke sana sebagai objek juga:

 import Link from "next/link"; export default function About() { return ( <div> <h1>About Me</h1> <div> <Link href={{ pathname: "/about" }}> <a>Home</a> </Link> <Link href={{ pathname: "/blog/[slug]", query: { slug: "emizen" }, }} > <a>Blog Post</a> </Link> </div> </div> ); }

SEO di Next.js

Di Berikutnya, Anda dapat menggunakan komponen Head dari next/head untuk menambahkan data meta ke halaman web:

 import Link from "next/link"; import Head from "next/head"; export default function About() { return ( <div> <Head> <title>About | IT Site</title> <meta name="description" content="A website Emizentech/> </Head> <h1>About Me</h1> <div> <Link href="/"> <a>Home</a> </Link> <Link href="/blog/emizen"> <a>Blog Post</a> </Link> </div> </div> ); }

Rute API

Nextjs memungkinkan pembuatan aplikasi React full-stack dengan menulis kode server melalui fitur yang disebut rute API.
Untuk membuat API Anda sendiri yang dijalankan sebagai fungsi tanpa server yang terpisah, buat folder bernama "api" di /pages.

Jika Anda ingin mendapatkan data dari /api/about untuk halaman about, sertakan halaman bernama about.js di /pages/api

 // syntax is very similar to the "Express" Node.js framework // here we are responding to every request with an OK (200) code and sending JSON data back (our name) export default function handler(req, res) { res.status(200).json({ name: "Reed Barger" }); }

Permintaan Data dari sisi klien

Untuk meminta data dari rute API kami, pendekatan konvensional adalah dengan memintanya menggunakan useEffect dan useState :

 import Link from "next/link"; import { useEffect, useState } from "react"; export default function About() { const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("api/about") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if (isLoading) return <p>Loading...</p>; if (!data) return <p>No about data</p>; return ( <div> <h1>My name is: {data.name}</h1> </div> ); }

Minta sisi Server Data

Kedua fungsi ini membantu kita untuk mengambil data dari server.

 getServerSideProps #or getStaticProps

Fungsi-fungsi tersebut berada dalam file yang sama dengan komponen React, dan kode untuk mereka dibundel secara terpisah dari klien React.

Dapatkan ServerSideProps

Setiap kunjungan halaman memicu eksekusi getServerSideProps . Akibatnya, ini sangat berguna pada halaman yang berisi data dinamis atau memerlukan permintaan untuk dilakukan setiap saat, seperti mengambil data pengguna yang diautentikasi.

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export function getServerSideProps() { return { props: { name: "Vivek Khatri" }, }; }

Fungsi ini memungkinkan untuk mengirim data dari server dan menyuntikkannya ke dalam props komponen halaman.

Ini memungkinkan klien React untuk menampilkan data dengan segera, tanpa penundaan, dan tanpa harus berurusan dengan status pemuatan atau kesalahan apa pun.

Jika Anda ingin mengambil data dari server, Anda bisa menggunakan getServerSideProps async dengan kata kunci async .

 export default function About({ name }) { return ( <div> <h1>My name is: {name}</h1> </div> ); } export async function getServerSideProps() { const data = await fetch("https://xyz.com/api").then((res) => res.json() ); return { props: { name: data.results[0].name.first }, }; }

Kami secara dinamis mengambil data dari XYZ API, dan data berubah dengan setiap penyegaran halaman.

DapatkanStaticProps

fungsi getStaticProps lebih baik untuk halaman statis yang jarang berubah. Fungsi ini menjalankan kode server dan mengirimkan permintaan GET ke server, tetapi hanya sekali ketika proyek selesai.

Saat aplikasi dijalankan dalam pengembangan, aplikasi meminta data setiap kali menyegarkan halaman, mirip dengan getServerSideProps.

Selama pengembangan, getStaticProps hanya membuat permintaan pada setiap kunjungan halaman.

Jika Anda menjalankan yarn build dan kemudian menjalankan produksi atau proyek React Anda dengan yarn start , Anda akan mendapatkan nama yang sama yang diminta saat proyek dibangun, bukan saat runtime.

getServerSideProps dan getStaticProps hanya dapat membuat permintaan GET. Rute API dapat menangani semua jenis permintaan pembacaan dan pembaruan data (yaitu bila digabungkan dengan lapisan data seperti database)

Contoh Next.js

Anda dapat menemukan lebih banyak contoh Next.js di sini

Template JS Berikutnya Teratas

Dasbor Bahan

NextJS Material adalah Material-UI React Dashboard open-source yang terinspirasi oleh Desain Material Google. Prinsip material adalah seperangkat komponen yang sederhana dan elegan. Kerangka Material-UI, NextJS, dan React yang populer digunakan untuk membuat Dasbor Material NextJS.

Paket Bahan

Kit Material NextJS adalah Kit Desain Material Gratis yang dibuat untuk NextJS, React, dan Material-UI. Kit Material NextJS berisi lebih dari 100 elemen frontend individu yang memungkinkan pengguna untuk mencampur dan mencocokkan. Variasi warna dimungkinkan untuk semua komponen, yang dapat dengan mudah diubah oleh pengguna dengan file dan kelas SASS dan JSS (dalam file JS).

Argon

Dasbor Argon NextJS terdiri lebih dari 100 komponen berbeda yang dapat dicampur dan dicocokkan pengguna sesuai keinginan Anda. Dengan memodifikasi file SAAS yang disertakan dengan proyek, pengguna dapat dengan mudah mempersonalisasi React Dashboard open-source ini.

Bukan kita

Komponen dengan kode lengkap Notus NextJS terdiri lebih dari 100 komponen berbeda yang dapat dicampur dan dicocokkan pengguna sesuai kebutuhan. Semua komponen dapat memiliki variasi warna, yang dapat Anda ubah dengan mudah dengan kelas CSS Tailwind.

Dimana Anda Bisa Belajar Next.js?

• Anda dapat memeriksa situs web resmi untuk mempelajari Next.js
• Pilihan lainnya adalah React Bootcamp
• Next.js di Udemy

dan masih banyak lagi sumber daya online yang akan membantu Anda menguasai Next.js

Kesimpulan

Tidak masalah jika Anda akan membangun perangkat lunak yang kuat dan kompleks yang akan melayani jutaan orang atau jika Anda berkembang pesat di toko web. Dalam kedua kasus tersebut, Anda dapat menggunakan keunggulan teknologi web modern seperti Next.js untuk membuat bisnis online Anda lebih efisien. SEO dan UX Next.js akan membantu Anda menjadikan internet tempat yang lebih baik, lebih bersih, dan lebih berpusat pada pengguna untuk meningkatkan kecepatan halaman Anda. Halaman yang dihasilkan secara statis masih responsif: Next.js akan menghidrasi aplikasi Anda di sisi klien, memungkinkannya untuk sepenuhnya interaktif.

Mencari Next.js yang berbakat atau pengembang tumpukan penuh? Kami mendukung Anda! Kami menyediakan semua alat dan keahlian yang Anda perlukan untuk mulai merencanakan dan menjalankan proyek Next.js Anda sekarang juga.

Pertanyaan yang Sering Diajukan tentang Next.Js