Panduan Lengkap Setup Next.js 14 dengan App Router, TypeScript, dan Tailwind CSS (2026)

Muhammad Akil Juli 13, 2026


Next.js 14 menjadi standar baru untuk pengembangan web React modern. Tutorial ini menuntun Anda step‑by‑step melakukan instalasi, konfigurasi, menulis kode contoh, serta best practice untuk produksi, lengkap dengan integrasi TypeScript dan Tailwind CSS.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js v20.10 atau lebih baru (node -v)
  • npm v10 atau Yarn v4
  • Git untuk version control
  • Editor kode, disarankan VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense

2. Instalasi Next.js 14

npx create-next-app@latest my-next14-app \
  --ts \
  --experimental-app \
  --eslint \
  --use-npm
cd my-next14-app

Perintah di atas menghasilkan proyek Next.js dengan:

  • App Router (fitur app/ directory)
  • TypeScript terkonfigurasi
  • ESLint bawaan

3. Menambahkan Tailwind CSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Ubah tailwind.config.js menjadi:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambahkan direktif Tailwind ke ./app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Menyiapkan Struktur Direktori

Next.js 14 menganjurkan app/ sebagai entry point. Buat layout dasar dan halaman contoh:

mkdir -p app/(components) app/dashboard

# app/layout.tsx
cat > app/layout.tsx <<'EOF'
import './globals.css';
import type { ReactNode } from 'react';

export const metadata = {
  title: 'Next.js 14 Starter',
  description: 'Demo app dengan App Router, TypeScript, Tailwind',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}
EOF

# app/page.tsx (home)
cat > app/page.tsx <<'EOF'
export default function Home() {
  return (
    

      
Welcome to Next.js 14

      

        Built with TypeScript, Tailwind CSS, and the new App Router.
      

    

  );
}
EOF

# app/dashboard/page.tsx
cat > app/dashboard/page.tsx <<'EOF'
export default function Dashboard() {
  return (
    

      
Dashboard

      
This is a protected route example (later we add auth).

    

  );
}
EOF

Struktur ini sudah siap untuk pengembangan berkelanjutan.

5. Konfigurasi ESLint & Prettier

Gunakan konfigurasi yang disarankan komunitas 2026:

npm install -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

# .eslintrc.js
cat > .eslintrc.js <<'EOF'
module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  settings: { react: { version: 'detect' } },
  env: { browser: true, node: true, es2022: true },
  rules: {
    'react/react-in-jsx-scope': 'off', // Next.js auto‑imports React
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  },
};
EOF

# .prettierrc
cat > .prettierrc <<'EOF'
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}
EOF

Tambahkan script lint di package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint . --ext .js,.ts,.jsx,.tsx"
}

6. Menambahkan API Route dengan Edge Runtime

Next.js 14 memperkenalkan app/api dengan Edge Runtime secara default. Buat endpoint health check:

mkdir -p app/api/health/route.ts
cat > app/api/health/route.ts <<'EOF'
import { NextResponse } from 'next/server';

export const runtime = 'edge'; // menjalankan di Vercel Edge atau Cloudflare Workers

export async function GET() {
  return NextResponse.json({ status: 'ok', timestamp: Date.now() });
}
EOF

7. Optimasi Produksi – Image, Font dan Internationalization

  • next/image: Pastikan next.config.mjs berisi domain yang di‑allow.
  • Font optimal: Gunakan @next/font untuk self‑hosting Google Fonts.
  • i18n: Tambahkan i18n di konfigurasi jika aplikasi multilingual.
// next.config.mjs
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'assets.example.com' }],
  },
  i18n: {
    locales: ['en', 'id'],
    defaultLocale: 'en',
  },
  experimental: { appDir: true },
};

8. Deploy ke Vercel (Free Tier 2026)

  1. Push repository ke GitHub.
  2. Buka vercel.com dan klik New Project.
  3. Pilih repo, biarkan preset Next.js.
  4. Pastikan variable NODE_VERSION=20 di Settings > Environment Variables.
  5. Deploy! Vercel otomatis meng‑run npm run build dan menyajikan /.next sebagai serverless.

Setelah deploy, cek /api/health untuk memastikan Edge Function bekerja.

9. Best Practice untuk Skalabilitas

  • Folder app/(components): gunakan tanda kurung untuk grouping tanpa menambah route.
  • Lazy Loading: gunakan next/dynamic pada komponen berat.
  • Cache Control: Return Cache‑Control: public, max-age=31536000, immutable pada static assets melalui next.config.mjs.
  • Type Safety: aktifkan strictNullChecks di tsconfig.json dan gunakan zod untuk validasi payload API.
  • Security: tambahkan header CSP melalui Vercel Edge Middleware. 
    // app/middleware.ts
import { NextResponse } from 'next/server';
export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com");
  return response;
}

10. Testing dengan Jest & React Testing Library

npm install -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

# jest.config.ts
export default {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/([^.]*)
  

  Next.js 14 dengan App Router, TypeScript, dan Tailwind CSS menawarkan fondasi kuat untuk aplikasi web berperforma tinggi. Tutorial di atas tidak hanya memberi Anda instalasi dan konfigurasi dasar, tetapi juga menambahkan lapisan keamanan, testing, serta observability yang penting dalam lingkungan produksi 2026. Terapkan best practice yang disebutkan, dan Anda akan siap menghadapi tantangan skala besar serta integrasi dengan layanan cloud modern.
  

  Panduan lengkap step-by-step setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, best practice, testing, dan deployment ke Vercel – tutorial terbaru 2026 untuk Programming, Software Engineering, dan Web Development.
  

  

  Programming,Software Engineering,Web Development,Next.js 14,TypeScript,Tailwind CSS,App Router,DevOps
  

  

  #Programming #SoftwareEngineering #WebDev #Tech #Coding

: '/$1',
  },
  setupFilesAfterEnv: ['/jest.setup.ts'],
};

# jest.setup.ts
import '@testing-library/jest-dom';

Contoh test untuk Home:

// app/__tests__/home.test.tsx
import { render, screen } from '@testing-library/react';
import Home from '@/app/page';

test('renders welcome message', () => {
  render();
  expect(screen.getByRole('heading', { name: /welcome to next\.js 14/i })).toBeInTheDocument();
});

11. Monitoring & Observability

Integrasikan Vercel Analytics atau gunakan OpenTelemetry SDK untuk mengirim trace ke Datadog/Elastic. Contoh kode singkat:

npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-nextjs
// otel.ts
import { NodeSDK } from '@opentelemetry/sdk-node';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';

const sdk = new NodeSDK({
  instrumentations: [getNodeAutoInstrumentations()],
});

sdk.start();

Import ./otel di next.config.mjs atau di entry server untuk meng‑capture request latency.

12. Ringkasan Step

  1. Install Node.js & create‑next‑app dengan flag --experimental-app.
  2. Add Tailwind CSS dan konfigurasikan tailwind.config.js serta globals.css.
  3. Bangun struktur app/ (layout, page, nested routes).
  4. Setup ESLint & Prettier untuk code quality.
  5. Buat API Route Edge untuk health check.
  6. Optimasi produksi (image, font, i18n, CSP).
  7. Deploy ke Vercel dengan satu klik.
  8. Implementasikan best practice (lazy load, cache, type safety, security).
  9. Tambahkan testing dengan Jest & React Testing Library.
  10. Integrasikan observability menggunakan OpenTelemetry.

Dengan mengikuti langkah ini, Anda memiliki basis proyek Next.js 14 yang modern, siap skala, dan terjaga kualitasnya.


{{ $json.conclusion }}
{{ $json.seo.meta_description }}

{{ $json.seo.keywords }}

{{ $json.hashtags }}

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar