Avatar
Cover

Membuat Website dengan Next.js 14: Panduan Lengkap untuk Pemula

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.

1. Persiapan Environment Development

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.

2. Membuat Proyek Next.js 14 Baru

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

3. Menjalankan Proyek

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.

4. Struktur Direktori Proyek

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.

5. Membuat Halaman Baru

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".

6. Menambahkan Style dengan CSS Modules

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>
  );
}

7. Menggunakan API Routes

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!".

8. Menggunakan Fitur ISR dan SSG

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;

9. Deploy Proyek Next.js

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:

  1. Buat akun di Vercel.
  1. Install Vercel CLI dengan perintah berikut:
    npm install -g vercel
  1. Jalankan perintah 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.

10. Production

Terakhir jangan lupa tambahkan “PUBLIC_BASE_URL” di .env.production jika anda tidak ingin gambar2 anda tidak dapat di load.

Kesimpulan

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!