Next.js App Router: A Practical Guide for Real Projects
Server components, layouts, loading states and caching explained with the decisions that matter when you ship a real Next.js site.
Content gets attention, but search engines can only rank what they can crawl and understand. This is the part developers control.
Every page needs its own title (under about 60 characters) and meta description (under about 160). Put the main keyword near the start and write for humans.
A missing page must return a real 404, not a 200 with an error message. Soft 404s waste crawl budget and confuse indexing.
Generate sitemap.xml from your database so new posts appear automatically, and reference it in robots.txt. Block only what must not be indexed, such as dashboards.
Tell search engines which URL is the main one with a canonical tag. This prevents duplicate content from query strings and trailing slashes.
Add JSON-LD for articles, breadcrumbs and your organization or person.
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Your title",
"datePublished": "2026-01-10",
"author": { "@type": "Person", "name": "Your Name" }
}
Set Open Graph and Twitter tags with a real image. A good preview raises click-through when links are shared.
One h1 per page, logical h2 and h3, descriptive link text instead of "click here", and meaningful image alt text.
Fast Largest Contentful Paint, low layout shift and quick interaction are ranking signals. Optimize images and ship less JavaScript.
Search engines index the mobile version first. Test your layout on a small screen.
Link related articles to each other. It helps readers and shows crawlers how your content connects.
Get the basics right on every page: unique metadata, honest status codes, a sitemap, structured data and speed. The rest is great content.
Server components, layouts, loading states and caching explained with the decisions that matter when you ship a real Next.js site.
Ship a full-stack app on Vercel: environment variables, a serverless Express entry, database access, CORS and cookies across domains.
What the three Core Web Vitals measure, what good scores look like and the specific fixes that improve each one.