Optimasi Performance Next.js: Tips dan Tricks

Introduction

Performance adalah kunci kesuksesan aplikasi web modern. Dalam artikel ini, kita akan membahas berbagai teknik untuk mengoptimalkan aplikasi Next.js Anda.

1. Image Optimization

Next.js menyediakan komponen Image yang powerful:

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1920}
      height={1080}
      priority // untuk above-the-fold images
      placeholder="blur" // blur placeholder saat loading
    />
  )
}

Benefits:

Automatic lazy loading
Responsive images
Modern image formats (WebP, AVIF)
Prevents Cumulative Layout Shift (CLS)

2. Code Splitting & Dynamic Imports

Gunakan dynamic imports untuk mengurangi bundle size:

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('@/components/HeavyComponent'), {
  loading: () => <LoadingSkeleton />,
  ssr: false // jika tidak perlu SSR
})

3. Font Optimization

Next.js 14 menyediakan next/font untuk font optimization:

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  preload: true
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

4. Caching Strategies

Implementasi caching yang efektif:

// Static page dengan revalidation
export const revalidate = 3600 // revalidate setiap 1 jam

// Dynamic page dengan caching
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

5. Database Query Optimization

Optimalkan query database Anda:

// ❌ Bad: N+1 query problem
const users = await db.user.findMany()
for (const user of users) {
  const posts = await db.post.findMany({ where: { userId: user.id } })
}

// ✅ Good: Single query with include
const users = await db.user.findMany({
  include: {
    posts: true
  }
})

6. Bundle Analysis

Analyze bundle size untuk identifikasi bottleneck:

npm install @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // ... config
})

7. Streaming & Suspense

Gunakan React Suspense untuk better UX:

import { Suspense } from 'react'

export default function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <SlowComponent />
    </Suspense>
  )
}

8. Metadata Optimization untuk SEO

export const metadata = {
  title: 'My Page',
  description: 'Page description',
  openGraph: {
    title: 'My Page',
    description: 'Page description',
    images: ['/og-image.jpg'],
  },
}

Performance Checklist

Optimize images dengan next/image
Implement code splitting
Use font optimization
Add caching strategies
Optimize database queries
Analyze bundle size
Implement streaming
Add proper metadata
Test with Lighthouse
Monitor Core Web Vitals

Conclusion

Performance optimization adalah proses berkelanjutan. Selalu monitor metrics Anda dan lakukan iterasi untuk improvement.

Tools untuk Monitoring

Google Lighthouse
WebPageTest
Vercel Analytics
Google PageSpeed Insights

Happy optimizing! 🚀