Pelajari cara menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 terkini, lengkap dengan contoh kode, best practice, dan integrasi AI‑powered API.

1. Persiapan Lingkungan

Pastikan sistem Anda memiliki Node.js v20.x (atau lebih tinggi) dan pnpm versi terbaru. Node 20 menawarkan performa yang lebih baik untuk server components.

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
npm install -g pnpm

1.1 Verifikasi Instalasi

node -v   # v20.12.0
pnpm -v  # 9.12.1

2. Membuat Proyek Next.js 14

Gunakan create‑next‑app dengan flag --experimental-app (sekarang default di v14). Pilih typescript untuk keamanan tipe.

pnpm create next-app@latest my-next14-app \
  --typescript \
  --eslint \
  --tailwind
cd my-next14-app

2.1 Struktur Direktori Baru

  • app/ – root folder App Router
  • components/ – UI dan server components
  • lib/ – utilitas, API client, dll.

3. Konfigurasi Dasar

3.1 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverActions: true,
    serverComponentsExternalPackages: ['@prisma/client']
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }]
  },
  eslint: { ignoreDuringBuilds: true }
};
export default nextConfig;

3.2 Tailwind CSS

Tailwind sudah ter‑install, cukup tambahkan konfigurasi di tailwind.config.ts:

import { type Config } from 'tailwindcss';
export default {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

4. Membuat Halaman Beranda dengan Server Component

4.1 app/page.tsx

import Image from 'next/image';
import GetStarted from '@/components/GetStarted';

export const metadata = {
  title: 'Next.js 14 – App Router Demo',
  description: 'Demo modern Next.js dengan React Server Components.'
};

export default async function Page() {
  // Mengambil data secara server‑side tanpa fetch client‑side
  const res = await fetch('https://api.github.com/repos/vercel/next.js', { cache: 'force-cache' });
  const repo = await res.json();

  return (
    

      
Welcome to Next.js 14

      Vercel
      
Stars: {repo.stargazers_count.toLocaleString()}

      
    

  );
}

4.2 components/GetStarted.tsx (Client Component)

'use client';
import { useState } from 'react';
export default function GetStarted() {
  const [count, setCount] = useState(0);
  return (
    
  );
}

5. Mengintegrasikan OpenAI API (AI‑Powered Feature)

5.1 Instalasi SDK

pnpm add openai

5.2 lib/openai.ts (Server Component Only)

import OpenAI from 'openai';

export const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY, // pastikan di .env.local
});

export async function generateIdea(prompt: string) {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: prompt }],
    max_tokens: 200,
  });
  return completion.choices[0].message?.content?.trim() ?? '';
}

5.3 Membuat Server Action di app/idea/route.ts

import { generateIdea } from '@/lib/openai';
import { NextResponse } from 'next/server';

export async function POST(req: Request) {
  const { prompt } = await req.json();
  if (!prompt) return NextResponse.json({ error: 'Prompt required' }, { status: 400 });
  const result = await generateIdea(prompt);
  return NextResponse.json({ result });
}

5.4 UI di components/IdeaForm.tsx

'use client';
import { useState } from 'react';
export default function IdeaForm() {
  const [prompt, setPrompt] = useState('');
  const [idea, setIdea] = useState('');
  const [loading, setLoading] = useState(false);
  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const res = await fetch('/idea', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }) });
    const data = await res.json();
    setIdea(data.result);
    setLoading(false);
  };
  return (