0
0
NextJSframework~20 mins

Canonical URLs in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Canonical URL Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
1:30remaining
What is the rendered output of this Next.js component?
Consider this Next.js component that sets a canonical URL in the head. What will be the exact tag rendered inside the ?
NextJS
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>
        <h1>Page Content</h1>
      </main>
    </>
  );
}
A<link rel="canonical" href="https://example.com/page" />
B<link rel="canonical" href="page" />
C<link rel="canonical" href="https://example.com" />
D<link rel="canonical" href="/page" />
Attempts:
2 left
💡 Hint
Look at the href attribute inside the tag in the Head component.
📝 Syntax
intermediate
1:30remaining
Which option correctly sets a canonical URL in Next.js using the Head component?
You want to add a canonical URL to your Next.js page. Which code snippet correctly sets it?
A<head><link rel="canonical" href="https://mysite.com/home" /></head>
B<Head><link rel="canonical" href="https://mysite.com/home" /></Head>
C<Head><canonical href="https://mysite.com/home" /></Head>
D<Head><link rel="canonical" url="https://mysite.com/home" /></Head>
Attempts:
2 left
💡 Hint
Remember the correct React component and attribute names.
❓ state_output
advanced
2:00remaining
What is the canonical URL after this dynamic Next.js page renders?
Given this dynamic Next.js page that sets the canonical URL based on props, what is the canonical URL in the rendered HTML if the prop slug is 'blog-post'?
NextJS
import Head from 'next/head';

export default function Post({ slug }) {
  const canonicalUrl = `https://example.com/${slug}`;
  return (
    <>
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      <article>
        <h1>Post: {slug}</h1>
      </article>
    </>
  );
}
A/blog-post
Bhttps://example.com/
Cblog-post
Dhttps://example.com/blog-post
Attempts:
2 left
💡 Hint
Check how the canonicalUrl variable is constructed using the slug prop.
🔧 Debug
advanced
2:00remaining
Why does this Next.js page fail to set the canonical URL correctly?
This Next.js page tries to set a canonical URL but it does not appear in the page source. What is the cause?
NextJS
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <head>
        <link rel="canonical" href="https://example.com/page" />
      </head>
      <main>
        <h1>Page Content</h1>
      </main>
    </>
  );
}
AThe <link> tag must be outside the <head> tag.
BThe href attribute is missing in the <link> tag.
CUsing lowercase <head> instead of Next.js <Head> component prevents correct rendering.
DThe canonical URL must be set in a separate _document.js file.
Attempts:
2 left
💡 Hint
Check the difference between HTML and Next.js Head component.
🧠 Conceptual
expert
1:30remaining
Why is setting a canonical URL important in Next.js SEO?
Which of the following best explains why you should set canonical URLs in your Next.js pages?
ATo tell search engines which URL is the preferred version to avoid duplicate content penalties.
BTo improve page load speed by caching the canonical URL.
CTo enable client-side routing between pages in Next.js.
DTo automatically generate sitemap.xml files for the site.
Attempts:
2 left
💡 Hint
Think about SEO and duplicate content issues.