DEV Community

Cover image for How to Optimize SEO with Next.js in 2026
Texavor profile image Suraj Vishwakarma
Suraj Vishwakarma for Texavor

Posted on • Originally published at texavor.com

How to Optimize SEO with Next.js in 2026

#react #javascript #webdev #beginners

TL;DR

Next.js is the most popular React framework. It is being used to build modern web applications. It provides many features that most developers might not use. As the search landscape is changing from traditional search to zero-click search. This shift is driven by Google's AI Overview, ChatGPT, and other AI search platforms. These platforms regularly crawl websites to find metadata and content to index. Content that is easily understandable and crawlable is more likely to be cited and get AI views. Optimizing your webpage for both humans and AI bots is necessary to thrive in this change.

We are going to list down the best practices to optimize the page and content for SEO and GEO.

1. Leveraging the Metadata API for SEO Optimization

Metadata has always been crucial for webpages to state their title and descriptions. Nextj.s replaced the old <Head> tag with its Metadata API. You can add metadata to the Server Component for server-side rendering.

Code Example:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s",
    default:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
  },
  description:
    "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
  verification: {
    google: "R53D-JHFSD93JDhjhds_ei99JFADSF", // dummy data
  },
  openGraph: {
    title:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
    description:
      "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
    // images: "/easywriteOpenGraph.png",
  },
  twitter: {
    card: "summary_large_image",
    title:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
    description:
      "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
    // images: "/easywriteOpenGraph.png",
  },
alternates: {
    canonical: "/",
  },
};
Enter fullscreen mode Exit fullscreen mode

You can add the following:

  • Title and Description: To define the title and description of the particular
  • openGraph: This defines how your webpage looks when someone share you website on social media such as Facebook, LinkedIn, and others.
  • Twitter: Social media preview for Twitter with card type, image, title, and description.
  • canonical: This points to the original content. This is used when republishing existing content. For SEO purposes, you can mention the current page as canonical, too.
  • verification: You can add verification tags to verify website ownership with search platforms. This will correspond <meta> tag in the <head> section. You can use this method to verify Google Search Console, Bing Webmaster, Yandex, and others. Learn more about other verification at generateMetadata guide from Next.js.

2. Use Server-Side Rendering (SSR)

Server-side rendering (SSR) is crucial because crawlers prefer fully rendered HTML content immediately. They want the content instantly. With SSR, you avoid showing any loading screen. You can use any rendering method among the following:

  • SSR: This renders the page on the server for every request and then sends back the HTML with proper data. It is perfect for when the content of the page changes constantly.
  • SSG: Static Site Generation(SSG) runs at build time to generate the HTML. This generated page is served to the user on each request. It is perfect for pages that rarely change, such as legal pages, about us, and contact us.
  • ISR: Incremental Static Regeneration(ISR) caches the build-time-generated page and serves it to the request. You can define a revalidate way to re-render the web page after a certain period of time. This is helpful in Blog pages. 
export const revalidate = 3600
Enter fullscreen mode Exit fullscreen mode

Apart from SEO, this can help reduce server load and money if you deploy on Vercel.

3. Implement Structured Data (Schema Markup)

Schema markup (also known as structured data) is a piece of code that is added to your website's page that helps search engines and answer engines to understand the meaning of the page. Schema markup can significantly improve the AI visibility in search and AI answers. This makes having schema markup a crucial component of a website. Schema markup has two main formats:

  • JSON-LD: It is JavaScript Object Notation for Linked Data(JSON-LD). It is implemented as a separate script tag, making it easier to manage, update, and scale

  • Microdata: It is directly embedded into HTML elements using attributes such as itemscope, itemtype, and itemprop. It makes code less readable and difficult to maintain.

The JSON-LD schema format is preferred by modern webpages.

Code Example:

export default async function Page({ params }) {
  const { id } = await params
  const product = await getProduct(id)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }

  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* ... */}
    </section>
  )
}
Enter fullscreen mode Exit fullscreen mode

Schema markup can be of different types, such as:

  • FAQ Schema: This is a structured Q&A format that contains commonly asked questions regarding the page or article.
  • HowTo Schema: It is used for pages that have a step-by-step guide.
  • Article & Author Schema: It establishes a connection between the content and the author. This strengthens the E-E-A-T(Experience, Expertise, Authoritativeness, and Trustworthiness) signals.

Here are the two resources that can help you in mastering the Schema markup:

4. Optimizing Core Vitals

Core Web Vitals are important metrics used by Google to evaluate page experience. They focus on loading speed, visual stability, and interactivity. Here are a few metrics that matter the most:

  • Largest Contentful Paint(LCP): It measures the time taken to load the largest visible element (card, image, or text block).
  • Cumulative Layout Shift(CLS): It measures how much the layout unexpectedly shifts during page load.
  • Interaction to Next Paint(INP): It measures how quickly a webpage responds to a user interaction (clicks, taps, or presses) and updates the content.

Using Next.js Image, we can automatically optimize the large images for LCP.

Code Example:

import Image from "next/image"

<Image
   src={image}
   alt={title}
   fill
/>
Enter fullscreen mode Exit fullscreen mode

Benefits of using the image tag for optimization:

  • Compression: It automatically compresses the image
  • Lazy Load: Lazy loading is a technique used to load resources when needed. If the image is not visible, then it won't be loaded, improving loading speed.
  • Responsiveness: With fill attributes, you can fill the image in the parent container. It supports responsiveness.

Note: When deploying a Next.js application on Vercel, the next/image component uses Vercel’s Image Optimization service, which includes 5,000 image optimization - transformations per month on the free Hobby plan; exceeding this limit may require upgrading to a paid plan for continued optimization.

5. Use Dynamic Sitemap Generation

Sitemaps are essential for crawlers to understand all the crawlable pages available to the bots. This is used by search engine platforms such as Google Search Console and Bing Webmaster to identify all the publicly available pages. You can create a sitemap.ts or sitemap.js file inside the /app route. This will automatically be used for the sitemap. It is a special Route Handler that is cached by default unless it uses a Dynamic API or a dynamic config option.

Code Example:

import { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/posts";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const staticPages: MetadataRoute.Sitemap = [
    {
      url: "https://www.texavor.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1.0,
    },
    {
      url: "https://www.texavor.com/blog",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.8,
    },
  ];

  const posts = await getAllPosts();
  const postPages: MetadataRoute.Sitemap = posts.map((post: any) => ({
    url: `https://www.texavor.com/blog/${post?.slug}`,
    lastModified: new Date(post?.updated_at),
    changeFrequency: "weekly",
    priority: 0.8,
  }));


  return [...staticPages, ...postPages];
}
Enter fullscreen mode Exit fullscreen mode

You can combine the static pages, like a landing page, about-us, and others, with dynamic ones, such as blog posts. In this way, you can dynamically generate a sitemap in Next.js.

Frequently Asked Question

What are the key SEO benefits of using Next.js?

Next.js improves performance by utilizing rendering methods such as SSR, SSG, and ISR. It also simplifies the dynamic sitemap.

How do I create a custom sitemap in Next.js?

You can create a dynamic sitemap by adding a sitemap.ts or sitemap.js file in the /app directory. It should return an array of URLs using the MetadataRoute.Sitemap API.

How does the Next.js Metadata API help with SEO?

Metadata API in Next.js enables developers to define title, meta description, canonical URLs, Open Graph tags, and verification.

Why is structured data important for SEO and AI search?

Structured data, such as JONS-LD, helps search engines and AI answer platforms, such as ChatGPT, to better understand the web page for accurate citation.

How do Core Web Vitals affect SEO in Next.js websites?

Core Web Vitals measure loading speed, visual stability, and responsiveness, and optimizing them in Next.js using features like next/image, SSR, and optimized assets can improve both user experience and search rankings.

Conclusion

Optimizing SEO in Next.js requires combining strong technical implementation with well-structured content. Features like the Metadata API, flexible rendering strategies (SSR, SSG, and ISR), structured data using JSON-LD, and performance improvements through Core Web Vitals optimization make it easier to build search-friendly applications.

By following these best practices, you can ensure that your Next.js applications remain discoverable, performant, and ready for the next generation of search.

Top comments (0)