Next.js 14 adalah versi terbaru dari framework Next.js yang populer untuk pengembangan aplikasi web berbasis React. Versi ini membawa berbagai fitur baru dan peningkatan performa yang signifikan. Dalam blog post ini, kita akan membahas langkah-langkah dasar untuk membuat website menggunakan Next.js 14.
Pastikan Anda sudah menginstal Node.js di komputer Anda. Node.js adalah runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di luar browser.
Untuk memeriksa apakah Node.js sudah terinstal, Anda bisa membuka terminal dan mengetikkan perintah berikut:
node -v
Jika Node.js belum terinstal, Anda bisa mengunduh dan menginstalnya dari situs resmi Node.js.
Setelah memastikan Node.js terinstal, langkah berikutnya adalah membuat proyek Next.js 14 baru. Anda bisa menggunakan create-next-app
untuk mempermudah proses ini. Buka terminal dan jalankan perintah berikut:
npx create-next-app@latest my-nextjs-website
Perintah ini akan membuat proyek Next.js baru dengan nama my-nextjs-website
. Setelah proses selesai, masuk ke direktori proyek:
cd my-nextjs-website
Sebelum mulai pengembangan, jalankan proyek Anda untuk memastikan semuanya berfungsi dengan baik.
Jalankan perintah berikut di terminal:
npm run dev
Proyek Anda sekarang berjalan di http://localhost:3000
. Buka alamat tersebut di browser untuk melihat halaman beranda default Next.js.
Setelah proyek berjalan, mari kita pahami struktur direktori utama dalam proyek Next.js:
src/
: Semua file di folder ini otomatis menjadi route untuk aplikasi Anda. Contoh: src/pages.js
akan menjadi http://localhost:3000/
.public/
: Tempat menyimpan aset publik seperti gambar, favicon, dll.styles/
: Folder untuk menyimpan file CSS.Untuk membuat halaman baru, Anda cukup membuat folder didalam src/app dan buat file JavaScript dengan nama pages.js di dalam folder baru tersebut. Misalnya, buat file baru bernama about/page.js
di src/app
dengan isi berikut:
import React from 'react';
const About = () => {
return (
<div>
<h1>About Page</h1>
<p>This is the about page.</p>
</div>
);
};
export default About;
Sekarang, buka http://localhost:3000/about
di browser Anda. Anda akan melihat halaman "About Page".
Next.js mendukung CSS Modules secara default. CSS Modules memungkinkan Anda menggunakan class CSS dengan scope lokal secara default, sehingga tidak akan terjadi konflik penamaan kelas. Buat file CSS baru di folder styles/
bernama Home.module.css
dengan isi berikut:
.title {
color: blue;
}
Kemudian, import dan gunakan gaya ini di pages/index.js
:
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div>
<h1 className={styles.title}>Welcome to Next.js!</h1>
</div>
);
}
Next.js juga memungkinkan Anda membuat API routes yang dapat digunakan sebagai backend endpoint. API routes dibuat di folder src/pages/api/
. Buat file baru bernama hello.tsx
di src/app/api/
dengan isi berikut:
c
Atau jika anda tidak menggunakan tsx, buat file hello.js dengan isi sebagai berikut:
export default function handler(req, res) {
res.status(200).json({ message: 'Hello, world!' });
}
Sekarang, buka http://localhost:3000/api/hello
di browser Anda. Anda akan melihat JSON dengan pesan "Hello, world!".
Next.js 14 memperkenalkan peningkatan pada Incremental Static Regeneration (ISR) dan Static Site Generation (SSG). Ini memungkinkan Anda memperbarui halaman statis tanpa perlu membangun ulang seluruh situs. Contoh penggunaan ISR:
export async function getStaticProps() {
const data = await fetch('https://api.example.com/data').then(res => res.json());
return {
props: { data },
revalidate: 60, // Dalam detik
};
}
const HomePage = ({ data }) => {
return (
<div>
<h1>Home Page</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default HomePage;
Setelah selesai mengembangkan aplikasi, Anda bisa mendepoloynya ke platform hosting seperti Vercel, yang juga merupakan pembuat Next.js. Untuk mendepoloy ke Vercel, Anda cukup mengikuti langkah-langkah berikut:
npm install -g vercel
vercel
di direktori proyek Anda dan ikuti instruksi yang diberikan.Dengan langkah-langkah ini, aplikasi Next.js Anda akan online dan dapat diakses oleh publik.
Terakhir jangan lupa tambahkan “PUBLIC_BASE_URL” di .env.production jika anda tidak ingin gambar2 anda tidak dapat di load.
Next.js 14 adalah framework yang sangat powerful dan fleksibel untuk pengembangan aplikasi web berbasis React. Dengan fitur-fitur seperti server-side rendering, API routes, ISR, dan SSG, Next.js mempermudah pengembangan aplikasi web yang cepat dan berkinerja tinggi. Dengan panduan ini, Anda sudah memiliki dasar yang kuat untuk mulai membuat website dengan Next.js 14.
Selamat mencoba dan semoga berhasil!