Pada artikel sebelumnya kita sudah membahas terkait dengan implementasi SEO pada Next.Js App Router, khususnya terkait dengan Metadata, Sitemap, dan Robots. Pada artikel ini kita akan mempraktikan bagaimana cara implementasi sebenarnya pada Next.Js. Praktik kali ini akan melanjutkan dari projek yang sebelumnya sudah pernah di buat, yaitu pada Simple Ecommerce dengan NextJs, Zustand, dan Laravel #Part 3, jika belum mengikuti silahkan ikuti terlebih dahulu.

Langkah-langkah

Pembuatan metadata pada halaman produk dan detail produk

Buka file /app/products/page.jsx, kemudian ubah kode nya menjadi seperti berikut:
import ProductPageContent from "@/components/pages/product/ProductPage";
import { Suspense } from "react";

export const metadata = {
  title: "Produk | Simple Ecommerce",
  description: "List Produk",
};

export default function ProductPage() {
  return (
    <Suspense fallback={<div className="p-4">Loading...</div>}>
      <ProductPageContent />
    </Suspense>
  );
}
Buka file /app/products/[productId]/page.jsx, kemudian ubah kode nya menjadi seperti berikut:
import ProductDetailPageContent from "@/components/pages/product/ProductDetailPage";
import { getProductById } from "@/services/products.service";

export async function generateMetadata({ params }) {
  try {
    const { productId } = await params;

    const res = await getProductById(productId);
    const product = res.data;

    return {
      title: `${product.name} | Simple Ecommerce`,
      description: product.description,
      openGraph: {
        title: product.name,
        description: product.description,
        images: product.image ? [product.image] : [],
      },
    };
  } catch (error) {
    return {
      title: "Detail Produk",
      description: "Informasi produk tidak tersedia.",
    };
  }
}

export default function ProductDetailPage() {
  return <ProductDetailPageContent />;
}

Pembuatan sitemap dinamis

Buka file .env, kemudian ubah kode nya menjadi seperti berikut:
NEXT_PUBLIC_API_URL="http://localhost:8000"
NEXT_PUBLIC_APP_URL="http://localhost:3000"
Buka file /services/products.service.js, kemudian ubah kode nya menjadi seperti berikut:
'use server';
import axios from 'axios';

export const getProductList = async ({ page, perpage, name, category_id }) => {
    try {
        const res = await axios({
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/products/list`,
            params: {
                page,
                perpage,
                name,
                category_id
            },
            headers: {
                'Content-Type': 'application/json',
            },
        });
        return res.data;
    } catch (error) {
        throw new Error(
            error?.response?.data?.message ||
            'Terjadi kesalahan saat mengambil data produk.'
        );
    }
};

export const getProductById = async (productId) => {
    try {
        const res = await axios({
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/products/${productId}`,
            headers: {
                'Content-Type': 'application/json',
            },
        });
        return res.data;
    } catch (error) {
        throw new Error(
            error?.response?.data?.message ||
            'Terjadi kesalahan saat mengambil data produk.'
        );
    }
};

export const getProductAll = async () => {
    try {
        const res = await axios({
            method: 'GET',
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/products/all`,
            headers: {
                'Content-Type': 'application/json',
            },
        });
        return res.data;
    } catch (error) {
        throw new Error(
            error?.response?.data?.message ||
            'Terjadi kesalahan saat mengambil data produk.'
        );
    }
};
Buat file sitemap.js di dalam folder /app, kemudian masukan kode berikut:
import { getProductAll } from '@/services/products.service';

const DEFAULT_URLS = [
    {
        url: process.env.NEXT_PUBLIC_APP_URL,
        lastModified: new Date(),
    },
    {
        url: `${process.env.NEXT_PUBLIC_APP_URL}/products`,
        lastModified: new Date(),
    },
];

export default async function sitemap() {
    try {
        const res = await getProductAll();
        const products = res.data;
        const productUrls = products.map(product => ({
            url: `${process.env.NEXT_PUBLIC_APP_URL}/products/${product.id}`,
            lastModified: product.updated_at,
        }));

        return [
            ...DEFAULT_URLS,
            ...productUrls
        ];
    } catch (error) {
        console.error(error);
        return DEFAULT_URLS;
    }
}

Pembuatan robots txt

Buat file dengan nama robots.js, kemudian masukan kode berikut:
export default function robots() {
    return {
        rules: [
            {
                userAgent: "*",
                allow: "/",
                disallow: ["/carts"],
            },
        ],
        sitemap: `${process.env.NEXT_PUBLIC_APP_URL}/sitemap.xml`,
    };
}