I spent 3 weeks building a clean Next.js Portfolio App.
Perfect Tailwind UI.
Clean animations.
Lighthouse score: 85+.
Deployed on Vercel.
I launched it. Posted it. Shared it.
And then... 3 visitors. Two were me. One was my friend.
That is when I learned something most developers do not realize: a fast app is not the same as a discoverable app. If Google does not understand your app, it does not exist.
This guide covers everything I fixed specifically for Next.js and React developers.
Visit my portfolio:
Syed Omer Ali - Portfolio of Syed Omer Ali, a full stack MERN developer focused on TypeScript, DevSecOps, and secure scalable systems. https://syedomer.me
The real problem developers have
As React devs, we obsess over the things we can see and measure: components and hooks, performance benchmarks, clean architecture, and developer experience.
But search engines care about an entirely different world: crawlability and indexability, metadata quality, speed signals, and mobile usability.
Let us bridge that gap.
1. Google Search Console (your app is invisible without this)
What most devs think: Google will crawl my Vercel URL automatically. No. Not reliably.
How to set it up: head to Google Search Console, add your property via URL prefix, and verify ownership.
If you are on the App Router, add this to app/layout.tsx:
export const metadata = { verification: { google: "YOUR_VERIFICATION_CODE" } };
If you are on the Pages Router, add this inside <Head>:
<meta name="google-site-verification" content="YOUR_VERIFICATION_CODE" />
Deploy. Done.
What to monitor weekly: pages indexed, crawl errors, Core Web Vitals, mobile usability, and query performance.
2. Add a real sitemap (do not skip this)
Most developers never create one. Big mistake.
With Next.js 13+ App Router, create app/sitemap.ts:
import { MetadataRoute } from "next"; export default function sitemap(): MetadataRoute.Sitemap { return [{ url: "https://yoursite.com", lastModified: new Date() }, { url: "https://yoursite.com/blog", lastModified: new Date() }]; }
Next.js automatically generates /sitemap.xml. Submit that URL inside Search Console, and Googlebot now has a clear map of your entire app.
Think of it like this: User -> Googlebot -> sitemap.xml -> your pages.
3. Configure your robots.txt
Create app/robots.ts:
import { MetadataRoute } from "next"; export default function robots(): MetadataRoute.Robots { return { rules: [{ userAgent: "*", allow: "/" }], sitemap: "https://yoursite.com/sitemap.xml" }; }
This auto-generates /robots.txt. A few hard rules to remember: never block /, never block /api unless the routes are truly private, and never block CSS or JS files.
4. Fix your metadata (most React apps fail here)
React developers commonly make three metadata mistakes: generic, copy-pasted titles across every page, missing canonical tags, and no Open Graph data.
With the App Router, use dynamic metadata generation:
export async function generateMetadata({ params }) { return { title: `Best React Hooks Guide | YourBrand`, description: "Learn advanced React hooks with examples and performance tips.", alternates: { canonical: "https://yoursite.com/blog/react-hooks" }, openGraph: { title: "Best React Hooks Guide", description: "Advanced hooks explained clearly.", images: ["https://yoursite.com/og.png"] } }; }
Proper Open Graph tags are the difference between a rich, compelling link preview and a broken, text-only snippet when someone shares your post on X or LinkedIn.
5. IndexNow instant indexing for devs who ship fast
When you deploy to Vercel, search engines do not know immediately. You can fix that with a simple API call in your deploy script:
curl "https://api.indexnow.org/indexnow?url=https://yoursite.com/blog/new-post&key=YOUR_KEY"
Even better, trigger it automatically via a Vercel webhook on every successful deployment. Your new content gets discovered in minutes, not days.
6. Core Web Vitals - Next.js specific fixes
Most React apps fail Core Web Vitals because of three things: bloated JS bundles, unoptimized images, and blocking fonts.
Fix images: always use Next.js Image for critical images: import Image from "next/image"; <Image src="/hero.png" alt="Hero" width={1200} height={630} priority />
Fix fonts: self-host your fonts through Next.js to avoid layout shifts and extra network requests: import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] });
Code split heavy components: const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
Run your app through PageSpeed Insights and look specifically at LCP and CLS. These directly affect your ranking.
7. Mobile optimization (mobile-first indexing is real)
Google ranks your site based on its mobile version, not desktop.
Quick checklist: base font size 16px or larger, tap targets at least 48px, no horizontal scrolling, and no layout shifts on load.
Test on a real device, not just DevTools.
In Tailwind, enforce minimum tap target sizes like this: <button class="min-w-[48px] min-h-[48px]">Click me</button>.