A first SEO-friendly page in Next.js 16

In Next.js, folders and special files decide which pages exist on a website. For example:

For example, app/tutorials/page.tsx defines the /tutorials page.

Create this file:

export default function TutorialsPage() {
  return (
    <main>
      <h1>JavaScript Tutorials for Beginners</h1>

      <p>
        Learn JavaScript step by step with
        simple examples.
      </p>
    </main>
  );
}

Here is what each important part does:

• export default tells Next.js which component represents the page.
• function TutorialsPage() defines a React component.
• return (...) describes what should appear on the page.
• <main> marks the main content area.
• <h1> gives the page a main heading.
• <p> adds a paragraph.

These are JSX elements, which React uses to describe UI.

When someone visits http://localhost:3000/tutorials, Next.js can send HTML that contains the heading and paragraph. A simplified version of that HTML:

<main>
  <h1>JavaScript Tutorials for Beginners</h1>
  <p>
    Learn JavaScript step by step with
    simple examples.
  </p>
</main>

This matters for SEO because the content is already in the HTML response. A crawler doesn't have to run browser JavaScript to create it.

Part 2 wrote the head by hand:

<head>
  <title>JavaScript Tutorials</title>
  <meta
    name="description"
    content="Learn JavaScript from scratch."
  />
</head>

In the Next.js App Router, this information is usually defined through the Metadata API instead of adding these tags to each page by hand.

For example, a Server Component page or layout can export a metadata object, and Next.js generates the matching HTML tags.

In a Next.js 16 project, create the file above, then check the result.

npm run dev

3.Search the page source

Right-click and choose View Page Source, then search for JavaScript Tutorials for Beginners. The heading text should be in the returned HTML.