Halo developer! 👋
Next.js adalah framework React yang sangat powerful untuk membangun website modern. Setelah mengerjakan banyak project menggunakan Next.js, saya ingin berbagi beberapa tips yang bisa membantu kalian membuat website yang lebih cepat, SEO-friendly, dan mudah di-maintain.
- Gunakan App Router (Next.js 13+)
Next.js 13 memperkenalkan App Router yang lebih powerful dibanding Pages Router. Beberapa keuntungannya:
Server Components by default - Lebih cepat dan efisien
Layout yang nested - Mudah sharing UI antar halaman
Loading states - Built-in loading UI
Error handling - Error boundaries otomatis
typescript// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
)
}
- Optimasi SEO dengan Metadata API
Next.js punya Metadata API yang sangat mudah untuk SEO:
typescript// app/page.tsx
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Website Kamu',
description: 'Deskripsi website yang menarik',
openGraph: {
title: 'Website Kamu',
description: 'Deskripsi untuk social media',
images: ['/og-image.png'],
},
}
Dengan ini, Google dan social media bisa baca metadata website kamu dengan mudah!
- Optimasi Gambar dengan Image Component
Jangan lupa pakai next/image untuk optimasi gambar otomatis:
typescriptimport Image from 'next/image'
src="/profile.jpg"
alt="Description"
width={500}
height={500}
priority // untuk gambar yang penting
/>
Next.js akan otomatis:
Resize gambar sesuai device
Lazy load gambar
Convert ke WebP
Prevent layout shift
- Setup Sitemap dan Robots.txt
Buat file app/sitemap.ts untuk SEO:
typescriptimport { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://website-kamu.com',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1,
},
]
}
Dan public/robots.txt:
User-agent: *
Allow: /
Sitemap: https://website-kamu.com/sitemap.xml
- Gunakan TypeScript
TypeScript bikin development lebih smooth dan error lebih sedikit:
typescript// types/index.ts
export interface Project {
id: string
title: string
description: string
image: string
}
// components/ProjectCard.tsx
interface Props {
project: Project
}
export default function ProjectCard({ project }: Props) {
return (
{project.title}
{project.description}
)
}
Bonus: Deploy di Vercel
Cara paling mudah deploy Next.js:
Push code ke GitHub
Connect repo ke Vercel
Done! Auto-deploy setiap push
Vercel punya optimasi khusus untuk Next.js, jadi website kamu bakal super cepat! ⚡
Kesimpulan
Next.js adalah pilihan yang tepat untuk membuat website modern. Dengan mengikuti tips di atas, website kalian akan:
✅ Lebih cepat (performance)
✅ SEO-friendly
✅ Mudah di-maintain
✅ Developer experience yang oke
Selamat coding! 🚀
👨💻 Tentang Penulis
Muhammad Indrawan adalah fullstack web developer dari Indonesia yang fokus pada pembuatan website modern menggunakan Next.js, React, dan TypeScript.
Spesialisasi dalam landing page, company profile, dan sistem web yang cepat serta SEO-friendly.
🌐 Portfolio: indrawan-id.vercel.app
💼 LinkedIn: Muhammad Indrawan Ismail
📧 Email: [email protected]
Tertarik untuk diskusi project atau kolaborasi? Jangan ragu untuk menghubungi saya!
Muhammad Indrawan adalah fullstack web developer
https://indrawan-id.vercel.app