Next.js is a full-stack React framework designed for production. Its fundamental purpose is to solve React's architectural gaps and SEO challenges by providing a comprehensive structure that includes file-system routing and multiple server-rendering strategies.

Rendering Flexibility by Default

Next.js is SEO-friendly by default because its architecture is built around pre-rendering HTML on the server.

• Static Site Generation (SSG): The default. Pre-renders pages into static HTML at build time for maximum performance.
• Server-Side Rendering (SSR): Pre-renders a page on the server for every request, ideal for dynamic, real-time data.
• Incremental Static Regeneration (ISR): A powerful hybrid that re-generates static pages at a specified interval, combining the speed of static with the freshness of dynamic.

Everything You Need Out of the Box

Next.js provides intuitive tools for on-page SEO.

• Metadata API: App Router includes a powerful metadata API for managing head tags dynamically.
• Image Optimization: The next/image component automatically handles resizing, format conversion (WebP), and lazy loading.
• Script Optimization: Fine-grained control over when third-party scripts load.
• Font Optimization: Automatic font optimization and preloading.

• Use the App Router for new projects - it includes React Server Components by default.
• Leverage the metadata API for all page-specific SEO tags.
• Always use next/image for any images on your site.
• Choose the right rendering strategy per page: SSG for static content, SSR for dynamic data.
• Use generateStaticParams for dynamic routes that can be pre-rendered.

International SEO Fundamentals

When targeting multiple countries or languages, proper international SEO ensures search engines serve the right content to the right audience. This involves URL structure, hreflang tags, and language detection.

• URL Structure Options: Choose between subdirectories (/en/, /fr/), subdomains (en.site.com), or parameters (?lang=en). Subdirectories are typically recommended for most sites.
• Hreflang Tags: HTML attributes that tell search engines about language and regional variations of your pages. Format: <link rel="alternate" hreflang="en-US" href="..." />
• Language vs Locale: Use language codes (en) for language targeting, or locale codes (en-US, en-GB) for region-specific content.

Implementing International SEO in Next.js

Next.js has built-in internationalization (i18n) support in both Pages and App Router, making it one of the best frameworks for multilingual sites.

• Routing Strategy: In App Router, use folder-based routing with language segments: app/[lang]/about/page.tsx. Next.js automatically handles language detection and routing based on your configuration.
• Adding Hreflang: Use the Metadata API to add hreflang tags. In App Router, you can export them from your generateMetadata function or add them in the root layout.
• Recommended Tools: next-intl (comprehensive, type-safe), next-i18next (Pages Router), built-in i18n routing (both routers), middleware for language detection.
• Code Example:

  // next.config.js (Pages Router)
  module.exports = {
    i18n: {
      locales: ['en', 'fr', 'de'],
      defaultLocale: 'en',
      localeDetection: true
    }
  };
  
  // App Router: app/[lang]/about/page.tsx
  import { Metadata } from 'next';
  
  type Props = {
    params: { lang: string }
  }
  
  export async function generateMetadata({ params }: Props): Promise<Metadata> {
    return {
      title: 'About Us',
      description: 'Learn about our company',
      alternates: {
        canonical: `https://site.com/${params.lang}/about`,
        languages: {
          'en': 'https://site.com/en/about',
          'fr': 'https://site.com/fr/about',
          'x-default': 'https://site.com/en/about'
        }
      }
    };
  }
  
  export default function AboutPage({ params }: Props) {
    return (
      <div lang={params.lang}>
        <h1>About Us</h1>
      </div>
    );
  }
  
  // middleware.ts - Automatic language detection
  import { NextResponse } from 'next/server';
  import type { NextRequest } from 'next/server';
  
  const locales = ['en', 'fr', 'de'];
  const defaultLocale = 'en';
  
  export function middleware(request: NextRequest) {
    const { pathname } = request.nextUrl;
    
    // Check if pathname is missing a locale
    const pathnameHasLocale = locales.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    );
  
    if (pathnameHasLocale) return;
  
    // Detect locale from Accept-Language header
    const locale = defaultLocale;
    request.nextUrl.pathname = `/${locale}${pathname}`;
    return NextResponse.redirect(request.nextUrl);
  }