Next.js SEO

Both SSR and SSG are excellent for SEO since they deliver fully-rendered HTML to crawlers, unlike pure client-side rendering. Choose based on content characteristics: use SSG with ISR for content that updates periodically (blogs, product pages) to get instant load times with automatic updates. Use SSR for highly personalized or real-time content where each request needs fresh data.

For most sites, a hybrid approach works best: SSG for marketing pages and blogs, ISR for product catalogs, and SSR for user dashboards. The key SEO factor is ensuring content exists in initial HTML, which both provide.

Use the generateMetadata() function exported from page.tsx or layout.tsx files. This async function receives params and searchParams, letting you fetch data and return metadata objects with title, description, openGraph, twitter, and other properties. For static pages, export a metadata object directly.

The Metadata API automatically generates proper meta tags server-side, ensuring crawlers see them immediately. Use metadata.title.template in layouts to create consistent title patterns across sections. This replaces the old next/head approach and guarantees metadata exists before hydration, preventing crawlers from missing tags.

Next.js 13+ removed built-in i18n routing, so use middleware-based solutions like next-intl or next-international. Implement middleware that detects locale from URL path (/en/, /es/), cookies, or Accept-Language headers, then rewrites to locale-specific routes. Generate hreflang tags in your metadata for all language variants, pointing to absolute URLs.

Create separate sitemap files per locale or include all locales in one sitemap with proper hreflang annotations. Use Server Components to fetch translated content server-side, ensuring each language version is fully crawlable. Implement proper canonical tags to prevent duplicate content issues across language versions.

Optimize LCP by using next/image with priority prop on hero images, implementing Edge Runtime for faster TTFB, and using font optimization with next/font. Reduce CLS by defining image dimensions, using font-display strategies, and avoiding dynamic content insertion above the fold. Improve FID/INP by minimizing JavaScript bundles, using Server Components for non-interactive content, and implementing proper code splitting.

Use streaming SSR with Suspense boundaries to show content progressively. Deploy to edge networks like Vercel Edge or Cloudflare for global performance. Monitor with Real User Monitoring (RUM) tools since lab scores don't always reflect field performance.

Most Next.js apps can achieve 95+ Lighthouse scores with proper configuration.

Next.js 13+ App Router supports automatic sitemap generation through app/sitemap.ts (or .js). Export a function that returns an array of URL objects with loc, lastModified, changeFrequency, and priority properties. Fetch your routes from your CMS, database, or file system to dynamically include all pages.

Next.js automatically serves this at /sitemap.xml. For large sites, create multiple sitemaps using sitemap.xml/[slug]/route.ts dynamic routes and a sitemap index. This approach ensures your sitemap stays synchronized with your actual routes and content, updating automatically when you add pages without manual maintenance.

Implement canonical tags in your generateMetadata() function, specifying the preferred URL version for each page. Use middleware to enforce trailing slash consistency (either always present or always absent). Configure next.config.js to handle URL normalization.

For pages accessible via multiple paths, set the canonical to the primary version. Implement proper 301 redirects for old URLs when changing route structures. Use the robots meta tag or X-Robots-Tag header to prevent indexation of parameter variations or filter pages.

In your sitemap, only include canonical URLs. This consolidates ranking signals to your preferred URLs instead of splitting authority across duplicates.

Client Components themselves don't hurt SEO if used correctly, but they prevent using the Metadata API in that component. The key is keeping your page.tsx and layout.tsx files as Server Components so you can generate metadata server-side, then importing Client Components for interactive features. Content in Client Components is still crawlable as long as it renders during initial hydration, but data fetched in useEffect after hydration may be missed by crawlers.

Best practice: use Server Components for content and SEO-critical elements, Client Components only for interactivity like forms, modals, and interactive widgets. This gives you both SEO benefits and rich user interactions.