Tips Membuat Website Modern dengan Nextjs

#react #webdev #typescript #nextjs

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 (

{children}

)
}

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: indrawanismail0@gmail.com
Tertarik untuk diskusi project atau kolaborasi? Jangan ragu untuk menghubungi saya!

Muhammad Indrawan adalah fullstack web developer
https://indrawan-id.vercel.app