⚡ Framework Standardization

Rekomendasi #8 — Migration Path: Static HTML/JS → Next.js | Generated 27 Maret 2026

93%
Currently HTML/JS
Next.js
Target Framework
3-tier
Migration Strategy
2-4 wk
Est. Timeline

📊 Current State Analysis

Hampir semua 93 Vercel projects saat ini menggunakan plain HTML + inline JavaScript tanpa framework, build tools, atau module system. Ini menyebabkan:

❌ Current (HTML/JS)

  • No component reusability
  • Inline styles — no CSS modules
  • No routing — single file apps
  • No SSR/SSG — poor SEO
  • No TypeScript — no type safety
  • No build optimization
  • Manual DOM manipulation
  • Copy-paste across projects
→

✅ Target (Next.js)

  • React components — reusable
  • CSS Modules / Tailwind
  • File-based routing
  • SSR + SSG built-in
  • TypeScript by default
  • Auto code-splitting
  • Declarative UI with JSX
  • Shared packages via monorepo

🎯 3-Tier Migration Strategy

Tidak semua apps perlu Next.js. Strategi tiered berdasarkan kompleksitas dan kebutuhan:

🟢 Tier 1: Keep Static HTML LOW PRIORITY ~4 apps

Simple landing pages dan info pages yang tidak butuh interactivity atau routing. Cukup cleanup CSS + add shared nav component.

AppReason to Keep StaticAction
ibnu-hub (hub)Simple linktree — works perfectly as static HTMLAdd shared CSS, keep as-is
ibnu-portfolioLanding page onlyAdd shared nav, cleanup CSS
career-jobSingle-page infoAdd shared CSS only
nomoribnuContact card onlyMerge into portfolio
🔵 Tier 2: Migrate to Next.js (Static Export) MEDIUM PRIORITY ~5 apps

Multi-page apps dengan moderate interactivity. Migrate to Next.js with output: 'export' (static site generation). No server needed.

AppWhy Next.js SSGPages/Routes
superapp-main15+ modules, needs routing & code-splitting/life, /pro, /skill, /business, /games, etc.
superappgov7+ sections, gov portal needs SEO/cpns, /asn, /procurement, /bansos, /pkp
learning9 content sections, needs navigation/phd, /leadership, /tools, /politik, etc.
finance8 finance tools, calculator components/investment, /sidehustle, /properti, etc.
productivity6 tools, state management needed/tasks, /sosmed, /agama, /boards
🟡 Tier 3: Full Next.js (SSR + API Routes) HIGH PRIORITY ~3 apps

Data-heavy apps yang butuh server-side rendering, API routes, atau database connections.

AppWhy Full Next.jsSSR Features Needed
gov-dashboardReal-time monitoring, data fetchingAPI routes for data, SSR for fresh data, auth
gov-dataDatabase CRUD, analyticsAPI routes for DB, SSR for tables, export
ai-hubLLM API integration, streamingAPI routes for AI proxy, edge functions

🔄 Migration Pattern: HTML → Next.js

Step-by-Step for a Typical App

1

Create Next.js App in Monorepo

npx create-next-app apps/superapp --typescript --tailwind --app

2

Extract HTML Content → React Components

Convert each <section> / module dari HTML ke React component. Replace inline styles with Tailwind classes.

3

Create Route Structure

Map each merged project ke Next.js App Router page: app/life/page.tsx, app/pro/page.tsx, etc.

4

Import Shared Packages

import { createNav, theme } from '@ibnu/ui' — use monorepo shared components.

5

Verify & Deploy

Test all routes, check custom domains, verify Vercel preview deploys work correctly.

Example Conversion

// BEFORE: apps/superapp/index.html (monolithic HTML)
// 5000+ lines of inline HTML, CSS, JavaScript
// All modules in one file, no code splitting

// AFTER: apps/superapp/app/layout.tsx
import { Nav } from '@ibnu/ui'
import '@ibnu/ui/styles/base.css'
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        <Nav
          title="SuperApp"
          links={[
            { label: 'Life', url: '/life' },
            { label: 'Pro', url: '/pro' },
            { label: 'Skill', url: '/skill' },
            { label: 'Business', url: '/business' },
          ]}
        />
        {children}
      </body>
    </html>
  )
}

// AFTER: apps/superapp/app/life/page.tsx
// Code-split! Only loads when user visits /life
export default function LifePage() {
  return (
    <main className="container">
      <h1>SuperApp Life</h1>
      {/* Content migrated from superapp-life */}
    </main>
  )
}

📈 Expected Benefits per Tier

BenefitTier 1 (Static)Tier 2 (SSG)Tier 3 (SSR)
SEO ScoreBasicExcellent (pre-rendered)Excellent (dynamic)
Load TimeFastVery fast (CDN)Fast (edge SSR)
Code SplittingManualAutomaticAutomatic
Type SafetyNoneTypeScriptTypeScript
API IntegrationClient-onlyClient-onlyServer-side
Migration EffortMinimalMediumHigh
MaintenanceLowLowMedium

📐 Tech Stack Decision

TechnologyChoiceRationale
FrameworkNext.js 15 (App Router)Best Vercel integration, React ecosystem, SSG + SSR
LanguageTypeScriptType safety, better DX, catch bugs early
StylingTailwind CSSUtility-first, no CSS conflicts, works in monorepo
StateZustandSimple, lightweight, no boilerplate (replace for complex apps)
BuildTurborepoAlready planned in Rekomendasi #5
TestingVitest + PlaywrightFast unit tests + E2E for critical flows
LintingESLint + PrettierShared config via @ibnu/config package

⏱️ Timeline & Priority

PhaseWeekAppsAction
Phase 1Week 1Tier 3 (gov-dashboard, gov-data, ai-hub)Highest value — migrate data-heavy apps first
Phase 2Week 2Tier 2 (superapp, superappgov, finance)Migrate multi-page apps to Next.js SSG
Phase 3Week 3Tier 2 (learning, productivity)Remaining multi-page apps
Phase 4Week 4Tier 1 (hub, portfolio, career)Cleanup static apps, add shared components

Framework Standardization Plan v1.0 — Generated by Claude for Subkhan Ibnu Aji — 27 Maret 2026

Part of Vercel & GitHub Infrastructure Audit Series