Pelajari cara menyiapkan proyek Next.js 14 terbaru, memanfaatkan App Router, Server Actions, dan best practice untuk performa optimal serta keamanan modern.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10+ atau lebih tinggi, serta npm atau pnpm terbaru. Anda dapat memeriksa versi dengan perintah:

node -v
npm -v   # atau pnpm -v

Jika belum terinstall, unduh dari nodejs.org dan ikuti instruksi instalasi untuk sistem operasi Anda.

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app yang sudah terintegrasi dengan Next.js 14. Kami rekomendasikan pnpm untuk kecepatan instalasi:

pnpm create next-app@latest my-next14-app --ts --app

Parameter yang dipakai:

  • --ts: menyertakan TypeScript.
  • --app: mengaktifkan struktur App Router secara default.

Masuk ke direktori proyek:

cd my-next14-app

3. Menjalankan Server Development

pnpm dev

Server akan tersedia di http://localhost:3000. Buka di browser dan pastikan halaman Welcome to Next.js muncul.

4. Memahami Struktur App Router

Folder app/ menggantikan pages/ tradisional. Setiap subfolder menjadi route otomatis. Contoh struktur dasar:

app/
├─ layout.tsx          # Layout global
├─ page.tsx            # Route root (/)
├─ about/
│  └─ page.tsx        # Route /about
└─ api/
   └─ hello/route.ts # Route API /api/hello

File layout.tsx biasanya berisi <html>, <head>, dan <body> wrapper.

5. Menambahkan Server Action

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari komponen client, tanpa endpoint API terpisah. Langkah pertama, aktifkan experimental flag di next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};
module.exports = nextConfig;

Selanjutnya, buat komponen client dengan 'use client' dan panggil Server Action:

// app/contact/page.tsx
'use client';
import { useState } from 'react';

export default function ContactPage() {
  const [status, setStatus] = useState('');

  async function sendMessage(formData) {
    'use server';
    // Simulasi penyimpanan ke DB
    await new Promise(r => setTimeout(r, 500));
    console.log('Message received:', formData);
    return 'Message sent!';
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    const data = { name: e.target.name.value, message: e.target.message.value };
    const result = await sendMessage(data);
    setStatus(result);
  };

  return (
    

      
Contact Us