0
0
NextJSframework~10 mins

Canonical URLs in NextJS - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add a canonical link tag in a Next.js Head component.

NextJS
import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <link rel="canonical" href=[1] />
    </Head>
  );
}
Drag options to blanks, or click blank then click option'
Ahref
BcanonicalUrl
C"https://example.com/page"
Durl
Attempts:
3 left
💡 Hint
Common Mistakes
Using a variable name without quotes
Omitting quotes around the URL string
Using incorrect attribute names
2fill in blank
medium

Complete the code to dynamically set the canonical URL using Next.js useRouter hook.

NextJS
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const canonicalUrl = (`https://example.com$[1]`).split('?')[0];

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}
Drag options to blanks, or click blank then click option'
Arouter.pathname
Brouter.asPath
Crouter.query
Drouter.route
Attempts:
3 left
💡 Hint
Common Mistakes
Using router.pathname which excludes dynamic parts
Using router.query which is an object, not a string
Using router.route which is the page route pattern
3fill in blank
hard

Fix the error in the canonical URL generation by choosing the correct method to get the current path in Next.js.

NextJS
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const canonicalUrl = `https://example.com$[1]`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}
Drag options to blanks, or click blank then click option'
Arouter.asPath
Brouter.query
Crouter.pathname
Drouter.basePath
Attempts:
3 left
💡 Hint
Common Mistakes
Using router.query which causes errors
Using router.pathname which does not reflect dynamic URL parts
Using router.basePath which is a prefix, not the full path
4fill in blank
hard

Fill both blanks to create a canonical URL that removes query parameters and hash fragments.

NextJS
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const cleanPath = router.asPath.split([1])[0].split([2])[0];
  const canonicalUrl = `https://example.com${cleanPath}`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}
Drag options to blanks, or click blank then click option'
A"?"
B"#"
C"/"
D"&"
Attempts:
3 left
💡 Hint
Common Mistakes
Using slash / which breaks the path
Using ampersand & which is part of query, not separator
5fill in blank
hard

Fill all three blanks to create a Next.js component that sets a canonical URL using useRouter and cleans query and hash.

NextJS
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Canonical() {
  const router = useRouter();
  const path = router.[1];
  const cleanPath = path.split([2])[0].split([3])[0];
  const canonicalUrl = `https://example.com${cleanPath}`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}
Drag options to blanks, or click blank then click option'
AasPath
B"?"
C"#"
Dpathname
Attempts:
3 left
💡 Hint
Common Mistakes
Using router.pathname which does not include query or hash
Using wrong split characters like slash or ampersand