technical

Next.js SEO Checklist

A developer's checklist for optimizing Next.js 14+ App Router applications for Google Search.

The Problem

You built a blazing-fast Next.js app, but it isn't ranking on Google or getting organic traffic.

Root Cause

Developers often forget to implement the dynamic Metadata API, generate sitemaps, or they accidentally block crawlers via client-side rendering misconfigurations.

Step-by-Step Fix

Use the Metadata API

Export the `metadata` object from every `page.tsx` or `layout.tsx` to automatically generate <title> and <meta name='description'> tags.

Generate Dynamic Sitemaps

Create an `app/sitemap.ts` file that queries your database and returns all valid URLs, so Google can discover your dynamic routes.

Implement JSON-LD Schema

Inject structured data (like Article, FAQ, or Product schemas) using a `<script type='application/ld+json'>` tag so Google understands your entities.

Implementation Example

❌ Incorrect

typescript

export default function Page() { return <title>My Page</title> } // Old pattern

✅ Correct

typescript

export const metadata: Metadata = { title: 'My Page' } // Next.js 14 App Router pattern

Verification Checklist

Dynamic Metadata implemented on all routes
sitemap.ts generated
robots.txt allows crawling
OpenGraph tags present for social sharing

Frequently Asked Questions

Q: Is Server-Side Rendering (SSR) better than Static Site Generation (SSG) for SEO?

SSG is slightly better for Core Web Vitals (speed), but SSR is perfectly fine for Googlebot. Both are vastly superior to pure Client-Side Rendering (CSR).