Plainform

Plainform SEO features are designed for customization, allowing you to control metadata, enhance page speed, and extend functionality based on your project’s requirements.

Below are examples of implementing these optimizations, leveraging Next.js features.

Use Cases

1. Customizing Metadata

Use Next.js metadata API in app routes to set dynamic metadata. Example in @/app/blog/[slug]/page.tsx:

@/app/product/[slug]/page.tsx

import { IBlogParams } from '@/types/BlogParams';

export async function generateMetadata({ params }: IBlogParams) {
  const post = await getProduct(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.imageUrl],
    },
  };
}

export default function BlogPost({ params }: IBlogParams) {
  return <div>Product: {params.slug}</div>;
}

Fetch dynamic data from Supabase using Prisma in lib or API routes.

2. Dynamic Sitemap Entries

Extend next-sitemap for dynamic routes (e.g., blog posts) in app/server-sitemap.xml/route.ts

@/app/product/[slug]/page.tsx

import { getServerSideSitemap } from 'next-sitemap';

export async function GET() {
  const products = await getProducts();
  const fields = products.map((product) => ({
    loc: `${process.env.NEXT_PUBLIC_SITE_URL}/product/${product.slug}`,
    lastmod: new Date(product.updatedAt).toISOString(),
  }));

  return getServerSideSitemap(fields);
}

Add this route to next-sitemap.config.ts under additionalSitemaps.

3. Page Speed Optimization

Optimize images in components using Next.js <Image/>:

@/components/Hero.tsx

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero Image"
      width={1200}
      height={400}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  );
}

Testing SEO Features

Run npm run build and check public/sitemap.xml and public/robots.txt.
Use npm run dev to test dynamic metadata locally (e.g., view page source for <meta> tags).
Deploy and verify SEO performance with tools like Google Search Console or Lighthouse.
Test page load times using browser developer tools or PageSpeed Insights.

Important Notes

Environment Variables: Ensure NEXT_PUBLIC_SITE_URL is set in .env, or t3-env will block app startup.
Dynamic Content: Use Prisma to fetch dynamic data for metadata to keep pages unique and relevant.
Performance: Regularly audit page speed with Lighthouse to maintain optimizations.
Security: Avoid exposing sensitive data in metadata or sitemaps (e.g., private routes).

For advanced SEO techniques, consult the Next.js Documentation or Google Search Central.

Customization & Optimization