Pelajari cara menginstal, mengonfigurasi, dan mengembangkan aplikasi web modern menggunakan Next.js 14, fitur App Router, dan Server Actions—teknologi yang menjadi standar industri untuk performa tinggi dan developer experience terbaik pada tahun 2026.
1. Prasyarat dan Persiapan Lingkungan
Sebelum memulai, pastikan Anda sudah memasang:
- Node.js 20.x atau lebih baru (disarankan LTS 20.15)
- npm 10.x atau yarn 4.x
- Git untuk version control
- Editor kode modern, contoh VS Code dengan ekstensi ESLint dan Prettier
Jika belum terpasang, unduh Node.js dari situs resmi dan ikuti petunjuk instalasinya.
2. Membuat Proyek Next.js 14 Baru
npx create-next-app@latest my-next14-app \
--ts \
--eslint \
--app
cd my-next14-app
Perintah di atas melakukan:
- Inisialisasi proyek dengan TypeScript (
--ts) - Menambahkan konfigurasi ESLint default (
--eslint) - Mengaktifkan struktur App Router (
--app) yang menjadi standar di Next.js 14
Setelah selesai, jalankan server development untuk memastikan semuanya berfungsi:
npm run dev
# atau yarn dev
Buka http://localhost:3000 di browser; Anda akan melihat halaman beranda default.
3. Memahami Struktur App Router
Folder app/ menggantikan pages/ tradisional. Berikut contoh struktur penting:
app/
│ layout.tsx // Layout global
│ page.tsx // Home page
│ globals.css // CSS global
│ (auth)/
│ login/page.tsx // Nested route contoh
│ dashboard/
│ page.tsx // Protected route
│ api/
│ hello/route.ts // API route (Server Action contoh)
Setiap folder dapat memiliki layout.tsx, page.tsx, dan loading.tsx untuk mengontrol UI dan loading state.
4. Menambahkan Server Action (Beta) untuk Formulir
Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa membuat endpoint API terpisah.
4.1 Buat Folder actions
mkdir -p app/actions
touch app/actions/contact.ts
4.2 Implementasikan Server Action
// app/actions/contact.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function submitContact(formData: FormData) {
// Validasi sederhana
const name = formData.get('name')?.toString().trim();
const email = formData.get('email')?.toString().trim();
const message = formData.get('message')?.toString().trim();
if (!name || !email || !message) {
throw new Error('Semua field wajib diisi');
}
// Simulasi penyimpanan ke DB (misal Prisma)
// await prisma.contact.create({ data: { name, email, message } });
// Revalidasi halaman kontak agar data terbaru muncul
revalidatePath('/contact');
return { success: true };
}
4.3 Gunakan Action di Komponen
// app/contact/page.tsx
import { submitContact } from '../actions/contact';
export default function ContactPage() {
return (
);
}
Dengan action={submitContact}, formulir secara otomatis melakukan POST ke server, mengeksekusi fungsi di atas, dan mengembalikan response tanpa menulis API route terpisah.
5. Konfigurasi ESLint, Prettier, dan TypeScript Strict Mode
Next.js 14 menyertakan file eslint.config.mjs. Pastikan aturan berikut aktif:
// eslint.config.mjs
import js from '@eslint/js';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import prettier from 'eslint-config-prettier';
export default [
js.configs.recommended,
...react.configs.flat,
...reactHooks.configs.recommended,
prettier,
{
rules: {
'@next/next/no-img-element': 'off',
'react/react-in-jsx-scope': 'off', // Next.js otomatis import React
},
files: ['**/*.{js,jsx,ts,tsx}'],
},
];
Setel tsconfig.json ke strict mode untuk memaksa penulisan kode tipe‑aman:
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"moduleResolution": "node",
"jsx": "preserve",
"incremental": true,
"skipLibCheck": true
}
}
Jalankan linting dan format otomatis:
npm run lint -- --fix
npm run format
6. Optimasi Performansi dengan Edge Runtime & Streaming
Next.js 14 mendukung Edge Runtime secara native. Untuk halaman yang memerlukan rendering super cepat, pindahkan file page.tsx ke folder app/(edge)/ dan tambahkan directive:
// app/(edge)/dashboard/page.tsx
export const runtime = 'edge';
export default async function DashboardPage() {
const data = await fetch('https://api.example.com/summary', { next: { revalidate: 60 } })
.then(res => res.json());
return (
Dashboard
{JSON.stringify(data, null, 2)}
);
}
Dengan runtime = 'edge', kode dijalankan pada V8 isolates di lokasi CDN terdekat, menurunkan latency secara signifikan.
7. Deploy ke Vercel – Zero‑Config
Vercel adalah platform hosting resmi Next.js. Ikuti langkah berikut:
- Buat repository Git (GitHub, GitLab, atau Bitbucket).
- Push kode ke remote dengan
git push origin main. - Buka dashboard Vercel dan pilih Import Project.
- Vercel otomatis mendeteksi
next.config.jsdan mengaktifkan Edge Functions bila ada. - Setelah build selesai, dapatkan URL
https://my-next14-app.vercel.app.
Jika Anda menggunakan variabel lingkungan (mis. DATABASE_URL), tambahkan di Settings → Environment Variables pada Vercel.
8. Best Practice untuk Produksi
- Gunakan
next/linkdannext/imagesecara konsisten untuk prefetch otomatis dan optimasi gambar. - Aktifkan
incremental static regeneration (ISR)pada halaman yang tidak berubah tiap detik denganrevalidateproperti padafetchataugetStaticProps. - Monitor bundle size dengan
next buildoutput; pisahkan kode berat menggunakandynamic()dengan{ ssr: false }bila tidak diperlukan di server. - Implementasikan Content Security Policy (CSP) di
next.config.jsuntuk mengurangi risiko XSS. - Gunakan React Server Components (RSC) bila data tidak perlu interaksi di client; ini mengurangi ukuran JavaScript yang dikirim.
9. Testing dengan Jest & React Testing Library
Instal dev dependencies:
npm i -D jest @testing-library/react @testing-library/jest-dom @jest/globals ts-jest
Konfigurasi jest.config.ts:
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.(ts|tsx)
Next.js 14 memadukan kekuatan App Router, Server Actions, dan Edge Runtime menjadi satu stack yang memudahkan developer membangun aplikasi web performa tinggi dengan kode yang bersih dan terstruktur. Ikuti langkah‑langkah di atas, terapkan best practice, dan manfaatkan ekosistem Vercel untuk deployment—dengan begitu, proyek Anda siap bersaing di era Web Development 2026.
Tutorial langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, dan deployment ke Vercel. Termasuk konfigurasi ESLint, TypeScript, performance optimization, dan testing.
Programming,Software Engineering,Web Development,Next.js 14,App Router,Server Actions,Vercel Deployment
#Programming #SoftwareEngineering #WebDev #Tech #Coding
: 'ts-jest',
},
moduleNameMapper: {
'^@/(.*)
{{ $json.conclusion }}
{{ $json.seo.meta_description }}
{{ $json.seo.keywords }}
{{ $json.hashtags }}
: '/app/$1',
},
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};
Contoh test untuk ContactPage:
import { render, screen, fireEvent } from '@testing-library/react';
import ContactPage from '@/app/contact/page';
test('renders contact form and validates required fields', async () => {
render(Jalankan npm test untuk memastikan semua berjalan.
10. Ringkasan Langkah
- Pasang Node.js 20+ dan inisialisasi proyek Next.js 14 dengan App Router.
- Pahami struktur
app/dan buat layout global. - Implementasikan Server Actions untuk interaksi form tanpa API terpisah.
- Konfigurasi linting, formatting, dan TypeScript strict mode.
- Optimalkan dengan Edge Runtime, ISR, dan React Server Components.
- Deploy ke Vercel secara zero‑config.
- Ikuti best practice keamanan, bundle size, dan testing.
Dengan mengikuti panduan ini, Anda akan memiliki aplikasi Next.js 14 siap produksi yang modern, cepat, dan mudah dipelihara.
{{ $json.conclusion }}
{{ $json.seo.meta_description }}
{{ $json.seo.keywords }}
{{ $json.hashtags }}
0 Komentar