SEO & Performance Optimization

Search Engine Optimization (SEO)

The Next.js Boilerplate provides a robust SEO framework that ensures your application is discoverable, indexable, and optimized for social sharing across all supported languages. By leveraging the latest Next.js Metadata API and localized routing, the system handles the complexities of modern SEO out of the box.

Localized Metadata

Every page in the boilerplate is configured to support localized SEO. Using next-intl, you can define unique titles and descriptions for every language your application supports, ensuring higher click-through rates in global search results.

// Example of localized metadata in src/app/[locale]/(marketing)/about/page.tsx
export async function generateMetadata(props: IAboutProps): Promise<Metadata> {
  const { locale } = await props.params;
  const t = await getTranslations({
    locale,
    namespace: 'About',
  });

  return {
    title: t('meta_title'),
    description: t('meta_description'),
  };
}

Dynamic SEO for Content Pages

For dynamic routes, such as portfolio items or blog posts, the boilerplate utilizes generateMetadata to pull specific content details into the page header. This allows for automated, high-quality SEO tags for every dynamic entry in your database.

The system is pre-configured to handle:

• Open Graph tags: For optimized display on Facebook, LinkedIn, and other social platforms.
• Twitter Cards: For enhanced visibility on X (formerly Twitter).
• JSON-LD: Structured data support to help search engines understand your content better.

Performance Optimization

Performance is a core pillar of this boilerplate. It is engineered to achieve perfect Core Web Vitals scores, ensuring a fast user experience that correlates with better search engine rankings and higher conversion rates.

Automated Image Optimization

The boilerplate utilizes the next/image component throughout all marketing and dashboard pages. This ensures images are automatically:

• Resized: Served in the exact dimensions needed for the user's device.
• Compressed: Converted to modern formats like WebP or AVIF.
• Lazy-loaded: Only downloaded when they enter the viewport to save bandwidth.

Static Site Generation (SSG)

To provide near-instant page loads, the boilerplate uses generateStaticParams for dynamic content. This pre-renders pages at build time, turning dynamic routes into static HTML files that can be served instantly via CDN.

// Pre-rendering dynamic portfolio routes for maximum performance
export function generateStaticParams() {
  return routing.locales
    .map(locale =>
      Array.from({ length: 6 }).map((_, index) => ({
        slug: `${index}`,
        locale,
      })),
    )
    .flat(1);
}

Intelligent Analytics Tracking

The boilerplate includes a pre-configured PostHog integration designed for performance. By wrapping the page view tracker in a Suspense boundary, the system prevents analytics scripts from blocking the initial render of your application, maintaining a high "Time to Interactive" score.

Monitoring and Maintenance

A high-performing site must be monitored to stay that way. This boilerplate integrates professional-grade tools to track health and speed.

• Error Monitoring (Sentry): Automatically captures frontend and backend exceptions before they impact your SEO ranking or user trust.
• Monitoring as Code (Checkly): Proactively monitors your site's uptime and performance from global locations, alerting you if your application slows down.
• Bot Protection (Arcjet): Integrated security that filters out malicious bot traffic, ensuring your server resources are dedicated to real users and legitimate search engine crawlers.