How to do SEO in next js

Next.js is built on top of React and includes excellent SEO capabilities out of the box, but you need to use them correctly. The key is leveraging Next.js's server-side rendering (SSR) and static generation (SSG) features to ensure search engines can crawl and index your content properly. When you use `getServerSideProps` or `getStaticProps`, Next.js pre-renders pages on the server, which means Google's crawlers receive fully-rendered HTML instead of an empty JavaScript shell. This is fundamentally different from client-side React apps where crawlers might struggle with dynamically-loaded content. For most SEO purposes, static generation with `getStaticProps` is preferable because it creates pre-built HTML files that load instantly and are trivially easy for search engines to process.

You'll want to implement proper meta tags and Open Graph data on every page. Next.js makes this straightforward with the `next/head` component or the newer `next/meta` APIs. Add title tags, meta descriptions, canonical URLs, and structured data (JSON-LD) consistently across your site. For dynamic pages like blog posts or product pages, pull this metadata from your database or CMS and inject it into each page's head. Don't forget to generate a sitemap.xml and robots.txt file—you can do this manually or use packages like `next-sitemap` to automate it. Internal linking is just standard HTML `<Link>` components in Next.js, which prefetch content and maintain crawlability.

Image optimization is another built-in advantage—use the `next/image` component rather than standard `<img>` tags. Next.js automatically serves appropriately-sized images, adds lazy loading, and uses modern formats like WebP, which improves page speed metrics that Google cares about. Handle 404s, redirects, and other status codes properly through your routing. For dynamic routes, ensure you're generating pages for all your important URLs either through static generation or on-demand ISR (Incremental Static Regeneration), which lets you rebuild pages after deployment without rebuilding your entire site. Make sure your deployment platform supports Next.js's edge caching and rendering features—Vercel has the deepest integration, but other platforms work fine. Finally, run regular audits with tools like Lighthouse, Google Search Console, and Screaming Frog to catch crawlability issues. Next.js doesn't do SEO for you automatically, but it removes the major technical barriers that plague client-side frameworks.