NextJSframework~15 mins

Why SEO matters for Next.js - See It in Action

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Why SEO Matters for Next.js

📖 Scenario: You are building a simple Next.js website for a local bakery. You want the bakery's website to appear on search engines like Google so more people can find it easily.

🎯 Goal: Build a Next.js page that includes proper SEO tags using the Head component to improve search engine visibility.

📋 What You'll Learn

Create a Next.js page component named HomePage.

Add a Head component with a title tag set to 'Sweet Treats Bakery'.

Include a meta description tag with content 'Delicious homemade bakery treats in your neighborhood'.

Render a main heading <h1> with the text 'Welcome to Sweet Treats Bakery'.

💡 Why This Matters

🌍 Real World

SEO helps websites appear higher in search results, attracting more visitors and potential customers.

💼 Career

Understanding SEO in Next.js is important for web developers to build sites that perform well in search engines and improve user reach.

Progress0 / 4 steps

Create the Next.js page component

Create a functional component called HomePage that returns a <main> element with an <h1> containing the text 'Welcome to Sweet Treats Bakery'.

NextJS

# Your code here

Need a hint?

Start by defining a function named HomePage that returns JSX with a main heading.

Import the Head component

Add an import statement at the top to import Head from next/head.

NextJS

// Import Head from next/head

export default function HomePage() {
  return (
    
      Welcome to Sweet Treats Bakery
    
  )
}

Need a hint?

Use import Head from 'next/head' to bring in the Head component for SEO tags.

Add SEO tags inside Head

Inside the HomePage component's return, add a <Head> component before <main>. Inside <Head>, add a <title> with text 'Sweet Treats Bakery' and a <meta> tag with name="description" and content="Delicious homemade bakery treats in your neighborhood".

NextJS

import Head from 'next/head'

export default function HomePage() {
  return (
    // Add Head component with title and meta description here
    
      Welcome to Sweet Treats Bakery
    
  )
}

Need a hint?

Wrap the page content in a fragment and add the Head component with the required SEO tags before the main content.

Complete the page with SEO tags

Ensure the HomePage component returns a fragment containing the Head component with the title and meta description, followed by the <main> with the heading. The component should be exported as default.

NextJS

import Head from 'next/head'

export default function HomePage() {
  return (
    // Finalize the component structure here
  )
}

Need a hint?

Make sure the component returns the fragment with Head and main as shown.