Gy3ZRPV8SYZ53gDjSFGpi7ej1KCaPY791pMbjB9m
Bookmark

Panduan Next.js 2024: Membangun Aplikasi Web Modern

Fatir AlFatih
Fatir AlFatih
Update:
... menit baca
Dengarkan

technology, computer, code - Jago Post

Panduan Next.js 2024: Membangun Aplikasi Web Modern

Perkenalan

Next.js telah dengan cepat menjadi kerangka kerja untuk membangun aplikasi Web yang berkinerja dan terukur.Fokusnya pada rendering sisi server, pembuatan situs statis, dan optimasi otomatis menjadikannya alat yang ampuh bagi pengembang dari semua tingkatan.Panduan komprehensif ini akan memandu Anda melalui fitur terbaru dan praktik terbaik Next.js pada tahun 2024, membantu Anda membuat pengalaman web yang luar biasa.

Apa itu Next.js?

Next.js adalah kerangka kerja berbasis reaksi yang mengambil kekuatan dan fleksibilitas bereaksi dan mengangkatnya untuk membangun aplikasi yang siap-produksi dengan mudah.Ini menggabungkan yang terbaik dari kedua dunia, memungkinkan Anda untuk membuat halaman yang dinamis dan interaktif pengguna dengan kekuatan React sambil berintegrasi dengan rendering sisi server dan pembuatan situs statis untuk kinerja optimal dan SEO.

Fitur Utama:

  • Server-Side Rendering (SSR):Mengaktifkan halaman rendering di server, menghasilkan waktu pemuatan halaman awal yang lebih cepat dan peningkatan SEO.
  • Statis Site Generation (SSG):Menghasilkan halaman HTML statis pada waktu pembangunan, membuatnya sangat cepat dan dapat diskalakan.
  • Optimalisasi Otomatis:Next.js menangani optimasi gambar, pemisahan kode, dan pra-rendering, memastikan aplikasi Anda cepat dan responsif.
  • Routing bawaan:Menyediakan sistem perutean yang sederhana dan intuitif untuk mengelola berbagai halaman dan rute dalam aplikasi Anda.
  • Rute API:Memungkinkan Anda membangun API tanpa server secara langsung dalam proyek berikutnya.js Anda, menyederhanakan data pengambilan data dan logika backend.
  • Mengambil data:Menawarkan mekanisme pengambilan data yang fleksibel dengan dukungan bawaan untuk mengambil data dari API eksternal atau database.
  • Fungsi Edge:Manfaatkan kekuatan tepi untuk melakukan tugas yang lebih dekat dengan pengguna, meningkatkan kinerja dan keamanan.
  • Dukungan TypeScript:Memberikan pengecekan tipe yang kuat dan penyelesaian kode, meningkatkan kualitas kode dan produktivitas pengembang.

Memulai

  1. Instalasi:
npx create-next-app@my-next-app terbaru
CD my-next-app
  1. Struktur Proyek:
my-next-app/
├─ Publik/
│ └─ favicon.ico
├─ halaman/
│ ├─ Index.js
│ └─ tentang.js
├─ gaya/
│ └─ Globals.css
├─ next.config.js
└─ package.json
  1. Menjalankan server pengembangan:
NPM Run Dev
  1. Ini akan memulai server pengembangan dan membuka aplikasi Anda di browser dihttp://localhost:3000.

Membangun Aplikasi Next.js Pertama Anda

Mari Bangun Aplikasi Blog Sederhana Untuk Menunjukkan Kekuatan Next.Js.

  1. Buat halaman:
  • halaman/index.js(Beranda)
Impor tautan dari 'Next/Link';

ekspor fungsi default home () {
kembali (
<className utama = "Flex min-H-Screen Flex-Center-Center Justify-between P-24">
<h1 classname = "text-4xl font-bold"> Selamat datang di blog saya! </h1>
<p classname = "mt-4 text-lg"> Jelajahi artikel menarik di sini: </p>
<Tautan href = "/post">
<a classname = "mt-6 px-4 py-2 teks-white bg-blue-500 bundar-md"> Lihat semua posting </a>
</link>
</sain>
);
}
  • halaman/posts.js(Daftar Posting)
Impor tautan dari 'Next/Link';

Posting const = [
{id: 1, judul: 'Posting blog pertama saya', Slug: 'First-Post'},
{id: 2, judul: 'The Next.js Journey', Slug: 'NextJs-Journey'},
// ... lebih banyak posting
];

Ekspor Posting Fungsi Default () {
kembali (
<Div className = "Container MX-Auto P-4">
<h1 className = "Text-3xl font-Bold MB-4"> Posting terbaru </h1>
<ul>
{posts.map ((post) => (
<li key = {Post.id} className = "MB-4">
<Tautan href = {`/post/$ {Post.slug}`}>
<a classname = "Text-blue-500 Hover: Underline"> {Post.Title} </a>
</link>
</li>
))}
</ul>
</div>
);
}
  • Halaman/Posting/[Slug] .js(Posting Individu)
impor {userouter} dari 'Next/Router';

Ekspor Fungsi Fungsi Default () {
const router = userouter ();
const {slug} = router.query;

// Ambil data posting berdasarkan siput
// ...

kembali (
<Div className = "Container MX-Auto P-4">
<h1 classname = "text-3xl font-bold mb-4"> {post.title} </h1>
<p className = "MB-8"> {Post.Content} </p>
{/ * Tampilkan konten posting */}
</div>
);
}
  1. Styling dengan CSS:
  • Buat aStyles/Globals.cssFile untuk gaya global.
tubuh {
Font-Family: 'Segoe Ui', Tahoma, Geneva, Verdana, Sans-Serif;
latar belakang-warna: #f8f9fa;
}

A {
Warna: #007bff;
Dekorasi Teks: Tidak Ada;
}
  • Impor gaya globalhalaman/_app.js.
impor '../styles/globals.css';

fungsi myapp ({component, pageprops}) {
return <component {... pageprops} />;
}

ekspor default myapp;

Rendering sisi server

Next.js membuatnya mudah untuk mengimplementasikan rendering sisi server.Mari ubahHalaman/Posting/[Slug] .jsKomponen untuk mengambil data dari API:

impor {userouter} dari 'Next/Router';
impor {usestate, useeffect} dari 'react';

Ekspor Fungsi Fungsi Default () {
const router = userouter ();
const {slug} = router.query;
const [post, setPost] = usestate (null);

useEffect (() => {
const fetchpost = async () => {
const response = menunggu fetch (`https://api.example.com/posts/$ {slug}`);
data const = menunggu respons.json ();
setPost (data);
};

fetchpost ();
}, [slug]);

if (! Post) {
return <div> memuat ... </div>;
}

kembali (
<Div className = "Container MX-Auto P-4">
<h1 classname = "text-3xl font-bold mb-4"> {post.title} </h1>
<p className = "MB-8"> {Post.Content} </p>
</div>
);
}

Dalam kode ini:

  1. Kami menggunakanMenggunakan efekuntuk mengambil data dari API saatsiputperubahan.
  2. ItumengambilPanggilan Pengambilan Data dari titik akhir API berdasarkan padasiput.
  3. Kami memperbaruiposNyatakan dengan data yang diambil.

Sekarang, konten posting akan dimuat dan diterjemahkan di server sebelum dikirim ke klien, menghasilkan beban halaman awal yang lebih cepat.

Pembuatan situs statis

Next.js memungkinkan Anda untuk menghasilkan halaman HTML statis untuk waktu pemuatan yang lebih cepat.Mari kita konversihalaman/posts.jsKomponen ke halaman yang dihasilkan secara statis:

Impor tautan dari 'Next/Link';
impor {getStaticProps} dari 'Next';

Posting const = [
{id: 1, judul: 'Posting blog pertama saya', Slug: 'First-Post'},
{id: 2, judul: 'The Next.js Journey', Slug: 'NextJs-Journey'},
// ... lebih banyak posting
];

Ekspor const getstaticprops = async () => {
kembali {
Props: {
posting,
},
};
};

Ekspor Posting Fungsi Default ({Post}) {
kembali (
<Div className = "Container MX-Auto P-4">
<h1 className = "Text-3xl font-Bold MB-4"> Posting terbaru </h1>
<ul>
{posts.map ((post) => (
<li key = {Post.id} className = "MB-4">
<Tautan href = {`/post/$ {Post.slug}`}>
<a classname = "Text-blue-500 Hover: Underline"> {Post.Title} </a>
</link>
</li>
))}
</ul>
</div>
);
}

Dalam contoh ini:

  1. Kami menggunakanGetStaticPropsUntuk pra-render halaman pada waktu membangun.
  2. Fungsi ini mengambil data (dalam hal ini,Postingarray) dan meneruskannya ke komponen halaman sebagai alat peraga.
  3. Halaman ini diterjemahkan sebagai file HTML statis, memastikan pemuatan yang cepat.

Pengambilan data

Next.js menyediakan beberapa mekanisme untuk mengambil data:

  • GetStaticProps:Untuk halaman pra-render pada waktu pembangunan.
  • getServerSideprops:Untuk mengambil data pada setiap permintaan.
  • Usewr:Pengait yang kuat untuk mengambil data pengambilan dan caching.

Ayo jelajahiUsewrUntuk mengambil data tentang permintaan:

impor {userouter} dari 'Next/Router';
Impor menggunakan dari 'swr';

const fetcher = (url) => fetch (url) .then ((res) => res.json ());

Ekspor Fungsi Fungsi Default () {
const router = userouter ();
const {slug} = router.query;

const {data, error} = usewr (`https://api.example.com/posts/$ {slug}`, fetcher);

if (error) return <div> Gagal memuat </div>;
if (! Data) return <div> memuat ... </div>;

kembali (
<Div className = "Container MX-Auto P-4">
<h1 classname = "Text-3xl font-Bold MB-4"> {data.title} </h1>
<p className = "mb-8"> {data.content} </p>
</div>
);
}

Dalam contoh ini:

  1. Kami menggunakanUsewruntuk mengambil data dari API berdasarkansiput.
  2. UsewrSecara otomatis menyimpan data yang diambil, mengurangi waktu pemuatan berikutnya.
  3. ItufetcherFungsi mendefinisikan cara mengambil data dari API.

Rute API

Next.js memungkinkan Anda membangun API tanpa server secara langsung dalam aplikasi Anda.Mari kita buat rute API untuk mengambil daftar posting:

  • Halaman/API/POSTS.JS
impor {nextapirequest, nextapiresponse} dari 'next';

Posting const = [
{id: 1, judul: 'Posting blog pertama saya', Slug: 'First-Post'},
{id: 2, judul: 'The Next.js Journey', Slug: 'NextJs-Journey'},
// ... lebih banyak posting
];

Ekspor Default Function Handler (req: nextapirequest, res: nextapiresponse) {
res.status (200) .json (posting);
}

Rute API ini menangani permintaan di/API/Postingdan mengembalikan respons JSON denganPostingarray.

Fungsi tepi

Fungsi EDGE NEXT.JS memungkinkan Anda untuk menjalankan kode lebih dekat dengan pengguna, memberikan kinerja dan manfaat keamanan yang signifikan.Anda dapat menggunakannya untuk:

  • Prefetching data:Ambil data sebelumnya, mengurangi waktu tunggu pengguna.
  • Logika berbasis geolokasi:Beradaptasi konten atau perilaku berdasarkan lokasi pengguna.
  • Konten Dinamis:Sajikan konten yang dipersonalisasi atau terlokalisasi berdasarkan detail pengguna.

Mari kita buat fungsi tepi sederhana untuk mengambil data berdasarkan lokasi pengguna:

  • Halaman/API/Lokasi.js
impor {nextapirequest, nextapiresponse} dari 'next';

Ekspor Default Function Handler (req: nextapirequest, res: nextapiresponse) {
Lokasi const = req.headers.get ('geolokasi');

if (location) {
// Ambil data berdasarkan lokasi
// ...

res.status (200) .json (data);
} kalau tidak {
res.status (400) .json ({pesan: 'header lokasi hilang'});
}
}

Fungsi tepi ini mengambil data berdasarkan lokasi pengguna, yang diperoleh dariGeolokasiheader.

Penyebaran

Next.js memberikan fleksibilitas untuk opsi penyebaran.

  1. Vercel:Vercel adalah platform resmi untuk menggunakan aplikasi Next.js.Ini menawarkan integrasi yang mulus dan kinerja yang dioptimalkan.
  2. Netlify:Netlify adalah platform populer lainnya dengan dukungan yang sangat baik untuk proyek Next.js.
  3. AWS:Anda dapat menggunakan aplikasi Next.js ke AWS menggunakan layanan seperti S3, Cloudfront, dan Lambda.

Konsep Lanjutan

  • Internasionalisasi:Next.js menyediakan alat yang kuat untuk membuat situs web multibahasa.
  • Otentikasi API:Amankan API Anda dengan teknik seperti otentikasi JWT.
  • Optimalisasi Kinerja:Menyempurnakan aplikasi Anda untuk waktu pemuatan dan pengalaman pengguna yang optimal.
  • Pengujian:Tulis tes unit, tes integrasi, dan tes ujung ke ujung untuk memastikan kualitas kode Anda.

Kesimpulan

Next.js adalah kerangka kerja yang luar biasa untuk membangun aplikasi web modern.Kemudahan penggunaannya, fitur yang kuat, dan fokus pada kinerja menjadikannya pilihan yang sangat baik untuk proyek -proyek dari semua ukuran.Panduan ini telah memberikan tinjauan komprehensif tentang Next.js pada tahun 2024, memungkinkan Anda untuk memanfaatkan kemampuannya untuk menciptakan pengalaman web yang luar biasa.Saat Anda melanjutkan perjalanan Anda dengan Next.js, ingatlah untuk menjelajahi dokumentasi dan sumber daya komunitas yang luas untuk membuka potensi penuhnya.

Related Posts
Posting Komentar
Diposting oleh:
Fatir AlFatih
Fatir AlFatih

Related Posts

Posting Komentar