Your Next.js Site Has Four Copies of Every Page. Here Is How to Tell Google Which One Counts

Next.js sites on Vercel often have duplicate pages due to default configurations that create multiple URLs for the same page. This can dilute a page's ranking by spreading it across different addresses. To consolidate the authority on a single URL, follow these four steps.

First, choose a single host and scheme. Either use the apex domain (example.com) or the www subdomain (www.example.com), and redirect the other version to the chosen one using a permanent redirect in Vercel's Domains settings or middleware. This helps avoid duplicate content caused by having both versions indexed.

Second, decide on a trailing slash policy and let Next.js handle the redirects. Set trailingSlash: false in next.config.js to redirect requests without a trailing slash to the version with the trailing slash. This ensures that all URLs for the same page have a consistent format, reducing duplicate content.

Third, add a canonical tag to each page, pointing to the clean URL without query strings. In the App Router, define the metadata base in app/layout.tsx and set the canonical tag for each page using the slug from the page's data. This signals to Google which URL is the preferred version, especially when dealing with query strings that can't be redirected without breaking attribution.

Finally, exclude preview deployments from being indexed by adding a robots.txt file that includes a noindex directive for environments other than production. This prevents preview domains, custom staging sites, and branch URLs from competing with the live version, keeping the crawl budget focused on the main site. By implementing these four decisions, you can consolidate your Next.js site's pages, improve search rankings, and prevent duplicate content issues.