Pelajari cara menyiapkan proyek Next.js 14 terbaru, mengaktifkan App Router, menambahkan TypeScript dan Tailwind CSS, serta menerapkan best practice untuk scaling aplikasi web modern.
1. Prasyarat
Sebelum memulai, pastikan Anda memiliki:
- Node.js v20.10 atau lebih tinggi (download di nodejs.org)
- npm v10 atau Yarn v4 (npm biasanya terpasang bersama Node)
- Git untuk version control
- IDE/Editor favorit, contoh Visual Studio Code dengan ekstensi
ESLint,Prettier, danTailwind CSS IntelliSense
2. Membuat Project Next.js 14 Baru
npx create-next-app@latest my-next14-app \
--ts \
--app \
--eslint \
--tailwind
Perintah di atas meng‑instal Next.js versi stabil (14), mengaktifkan App Router (--app), menambahkan dukungan TypeScript (--ts), mengonfigurasi ESLint, dan meng‑setup Tailwind CSS secara otomatis.
2.1. Struktur Direktori Baru
my-next14-app/
├─ app/ # App Router (layout, page, loading, error)
│ ├─ layout.tsx
│ └─ page.tsx
├─ components/ # Komponen UI reusable
├─ lib/ # Utility functions & services
├─ public/ # Asset statis
├─ src/ # Opsional, jika Anda suka memindahkan semua kode ke src
├─ next.config.mjs # Konfigurasi Next.js
├─ tailwind.config.ts # Konfigurasi Tailwind
├─ tsconfig.json # TypeScript config
└─ package.json
3. Konfigurasi TypeScript
Next.js 14 sudah menyediakan tsconfig.json yang optimal, tetapi Anda dapat menyesuaikannya untuk strict mode penuh:
{
"compilerOptions": {
"target": "es2022",
"module": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"paths": {
"@/components/*": ["components/*"],
"@/lib/*": ["lib/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Penggunaan path alias (@/components) memudahkan import tanpa relatif panjang.
4. Menambahkan Tailwind CSS (Jika tidak dipilih pada create‑next‑app)
- Instal paket yang dibutuhkan:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p - Konfigurasi
tailwind.config.ts:import type { Config } from "tailwindcss"; export default { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: { colors: { primary: "#0ea5e9", secondary: "#64748b" } } }, plugins: [] }; - Tambahkan direktif Tailwind ke
app/globals.css:@tailwind base; @tailwind components; @tailwind utilities;
Restart server (npm run dev) untuk melihat perubahan.
5. Membuat Layout Global dengan Server Component
// app/layout.tsx
import "./globals.css";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Next.js 14 – App Router Demo",
description: "Demo project with TypeScript and Tailwind CSS"
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
My Next.js 14 App
{children}
);
}
Layout di atas merupakan Server Component (default di App Router) sehingga tidak mengirimkan JavaScript ke client kecuali diperlukan.
6. Membuat Halaman Home (Client Component)
// app/page.tsx
"use client"; // Menandakan ini client component
import Image from "next/image";
import Link from "next/link";
export default function HomePage() {
return (
Selamat Datang!
Ini contoh proyek Next.js 14 dengan TypeScript & Tailwind.
Lihat Tentang Kami
);
}
Catatan: "use client" diperlukan bila Anda memakai state atau efek React.
7. Menambahkan Halaman About dengan Server Component
// app/about/page.tsx
export const metadata = { title: "About" };
export default function AboutPage() {
return (
About This Project
Proyek ini dibuat untuk menunjukkan cara cepat menyiapkan Next.js 14
dengan App Router, TypeScript, dan Tailwind CSS. Semua konfigurasi
mengikuti best practice yang direkomendasikan oleh Vercel dan komunitas.
- Server‑Side Rendering (SSR) default pada semua route.
- Static Generation (SSG) bila dipanggil dengan
export const revalidate = 60.
- Penggunaan
@/components alias untuk maintainability.
);
}
8. Menyiapkan ESLint & Prettier (Best Practice)
Next.js sudah menyertakan ESLint, namun kita tambahkan aturan tambahan untuk TypeScript dan React Hooks:
# Install dev dependencies
npm install -D eslint-config-prettier eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser
# .eslintrc.cjs
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint", "react-hooks"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"prettier"
],
rules: {
"@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
},
settings: {
react: { version: "detect" }
}
};
Tambahkan script di package.json:
"scripts": {
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"format": "prettier --write ."
}
Jalankan npm run lint untuk memastikan tidak ada error.
9. Optimasi Performa
- Image Optimization: gunakan
next/imagedenganloader: "default"untuk otomatis WebP dan responsif. - Route Segment Caching: tambahkan
export const revalidate = 300pada page yang dapat di‑static‑generate ulang tiap 5 menit. - Font Loading: manfaatkan built‑in
next/font(contoh di layout) untuk menghindari FOIT. - Bundle Analyzer: install
@next/bundle-analyzerdan aktifkan dinext.config.mjsuntuk memantau ukuran bundle.npm install -D @next/bundle-analyzer // next.config.mjs import { withBundleAnalyzer } from "@next/bundle-analyzer"; export default withBundleAnalyzer({ reactStrictMode: true, images: { remotePatterns: [{ hostname: "**" }] }, experimental: { appDir: true }, webpack(config) { return config; }, // enable analyzer only in production build analyzerMode: process.env.ANALYZE ? "static" : "off" });
10. Deploy ke Vercel (Production Ready)
- Push repository ke GitHub.
- Buka vercel.com, klik New Project dan pilih repo.
- Vercel secara otomatis mendeteksi Next.js 14, mengaktifkan Edge Functions untuk SSR yang ultra‑fast.
- Tambahkan environment variable jika diperlukan (mis.
NEXT_PUBLIC_API_URL).
- Deploy! Vercel akan memberikan preview URL setiap push.
Setelah produksi, aktifkan Performance > Analytics di dashboard Vercel untuk memantau LCP, FID, dan CLS.
11. Studi Kasus: Migrasi dari Next.js 13 ke 14 dengan Minimum Downtime
Tim di sebuah startup fintech memutuskan upgrade ke Next.js 14 untuk memanfaatkan React Server Components yang lebih stabil. Langkah kunci:
- Branch Feature: Buat
feature/next14-upgradedan jalankannpm install next@latest. - Upgrade Config: Tambahkan
experimental: { appDir: true }dinext.config.mjs(meskipun default di 14). - Replace Pages Router: Pindahkan semua file
pages/keapp/satu per satu, sambil menambahkanlayout.tsxglobal. - Testing: Jalankan
npm run test(Jest + React Testing Library) dannpm run lint. Pastikan semua snapshot tetap cocok. - Canary Deploy: Deploy ke Vercel dengan
vercel --prebuiltpada environmentcanary. Pantau metrics selama 24 jam. - Switch Traffic: Setelah validasi, gunakan Vercel Production Branch untuk mengalihkan 100% traffic.
Hasil: 30% pengurangan TTFB dan 15% pengurangan bundle size berkat tree‑shaking otomatis pada server components.
12. Kesimpulan
Dengan langkah‑langkah di atas, Anda kini memiliki proyek Next.js 14 yang modern, type‑safe, dan dioptimalkan untuk performa produksi. Menggunakan App Router, TypeScript, Tailwind, serta best practice linting dan caching memberi fondasi kuat untuk skala aplikasi web yang kompleks.
Next.js 14 memadukan kekuatan App Router, React Server Components, dan integrasi bawaan TypeScript serta Tailwind CSS, memungkinkan developer membangun aplikasi web yang cepat, terstruktur, dan mudah dipelihara. Ikuti tutorial ini, terapkan best practice, dan deploy ke Vercel untuk melihat peningkatan nyata pada performa dan developer experience.
Tutorial lengkap setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, dan best practice DevOps. Langkah demi langkah, contoh kode, dan studi kasus migrasi real‑world.
Programming,Software Engineering,Web Development
#Programming #SoftwareEngineering #WebDev #Tech #Coding
0 Komentar