Next.js SEO: An App Router Playbook That Ranks

Next.js gives you almost everything you need to rank well out of the box, and most teams still ship sites that Google struggles to read. The framework is not the problem. The problem is that SEO gets treated as a final checkbox instead of an architectural decision, so metadata ends up scattered, content renders on the client, and the structured data never gets written. The App Router changed how all of this works. The generateMetadata function, file-based conventions for sitemap.ts and robots.ts , and Server Components as the default each remove a class of SEO bug that used to be common in the Pages Router. But they only help if you use them deliberately. This is the playbook we follow when we build a Next.js site that has to rank, the same approach behind this site. It is opinionated and concrete: where to put metadata, which files to ship, how to handle structured data and multiple languages, and why Core Web Vitals is an SEO feature rather than a performance afterthought. None of it requires a plugin. Render on the server so Google sees real HTML The single biggest SEO win in Next.js is also the easiest to get wrong: make sure your indexable content is in the HTML on the first byte. Googlebot will execute JavaScript, but it does so on a delay and with no guarantees. Content that depends on a client-side fetch can be missed, indexed late, or indexed empty. Server Components are the default in the App Router, so this is mostly about not opting out. Keep 'use client' at the leaves of your tree, on the button that needs an onClick , not on the page that holds your copy. Fetch your data in the Server Component and pass the rendered result down. If you can view the page source and read your headline and body text without JavaScript, you are in good shape. Master the Metadata API instead of next/head In the App Router you never touch next/head . Every route exports either a static metadata object or a dynamic generateMetadata function, and Next.js merges and d