Tips Membuat Website Modern dengan Nextjs

Source: Dev.to

Gunakan App Router (Next.js 13+)

Next.js 13 memperkenalkan App Router yang lebih powerful dibanding Pages Router. Beberapa keuntungannya:

• Server Components secara default – lebih cepat dan efisien

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
    </>
  );
}

Optimasi SEO dengan Metadata API

Next.js menyediakan Metadata API yang sangat mudah untuk mengatur SEO pada tiap halaman.

// app/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Judul Halaman',
  description: 'Deskripsi singkat halaman untuk SEO',
  // tambahkan properti lain seperti openGraph, twitter, dll.
};

Optimasi Gambar dengan next/image

Gunakan komponen next/image untuk optimasi gambar otomatis (lazy‑loading, resizing, dan format modern).

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Deskripsi gambar"
      width={800}
      height={600}
    />
  );
}

Pastikan ukuran gambar disesuaikan dengan device yang mengakses.

Setup Sitemap dan robots.txt

Buat file app/sitemap.ts untuk menghasilkan sitemap secara dinamis.

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://website-kamu.com',
      lastModified: new Date(),
    },
    {
      url: 'https://website-kamu.com/about',
      lastModified: new Date(),
    },
    // tambahkan route lain sesuai kebutuhan
  ];
}

Letakkan file robots.txt di folder publik (public/robots.txt) dengan konten misalnya:

User-agent: *
Allow: /
Sitemap: https://website-kamu.com/sitemap.xml

Gunakan TypeScript

TypeScript membantu development menjadi lebih smooth dan mengurangi error.

// types/index.ts
export interface Project {
  id: string;
  title: string;
  description: string;
  image: string;
}

// components/ProjectCard.tsx
import { Project } from '@/types';

interface Props {
  project: Project;
}

export default function ProjectCard({ project }: Props) {
  return (
    <div className="project-card">
      <h3>{project.title}</h3>
      <p>{project.description}</p>
      {/* gunakan next/image untuk menampilkan project.image */}
    </div>
  );
}

Deploy dengan Vercel (Push code ke GitHub)

Vercel memiliki optimasi khusus untuk Next.js, sehingga website Anda akan memiliki performa yang sangat baik.

• Push repository ke GitHub.
• Hubungkan repository ke Vercel.
• Vercel akan otomatis melakukan build dan deploy setiap kali ada perubahan pada branch utama.

✅ Keuntungan: performa tinggi, preview otomatis, dan integrasi CI/CD yang sederhana.

Selamat coding! 🚀