Challenge - 5 Problems
Next.js Metadata Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What is the rendered HTML output of this Next.js Metadata API usage?
Consider this Next.js component using the Metadata API to set the page title and description. What will be the content of the and <meta name="description"> tags in the rendered HTML?</div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">NextJS</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><span class="hl-kw">import</span> { Metadata } <span class="hl-kw">from</span> <span class="hl-str">'next'</span>;
<span class="hl-kw">export</span> <span class="hl-kw">const</span> metadata: Metadata = {
title: <span class="hl-str">'Learn Next.js SEO'</span>,
description: <span class="hl-str">'A guide to Next.js Metadata API for SEO optimization.'</span>
};
<span class="hl-kw">export</span> <span class="hl-kw">default</span> <span class="hl-kw">function</span> Page() {
<span class="hl-kw">return</span> <main><h1>Welcome to SEO Guide</h1></main>;
}</pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><title>Learn Next.js SEO</title> and <meta name="description" content="A guide to Next.js Metadata API for SEO optimization."></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><title>Welcome to SEO Guide</title> and no meta description tag</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><title>Next.js App</title> and <meta name="description" content="Default description"></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">No <title> tag and no meta description tag</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Metadata object sets the page's SEO tags automatically.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The Metadata API in Next.js allows you to define SEO tags like title and description at the component level. These tags are rendered in the HTML head automatically.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge syntax">📝<!-- --> <!-- -->Syntax</span></div><span class="task-difficulty intermediate">intermediate</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Which option correctly defines dynamic metadata in Next.js?</div><div>You want to generate metadata dynamically based on props in a Next.js page. Which code snippet correctly uses the Metadata API for this?</div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option task-option-code "><span class="task-option-key">A</span><pre class="option-code">export function metadata() {
return { title: 'Static Title' };
}</pre></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">export const metadata = ({ params }) => ({ title: `Post ${params.id}` });</span></div><div class="task-option task-option-code "><span class="task-option-key">C</span><pre class="option-code">export async function generateMetadata({ params }) {
return { title: `Post ${params.id}` };
}</pre></div><div class="task-option task-option-code "><span class="task-option-key">D</span><pre class="option-code">export async function metadata({ params }) {
return { title: `Post ${params.id}` };
}</pre></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Dynamic metadata requires an async function named generateMetadata.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Next.js expects an async function named generateMetadata to return metadata dynamically based on route params or props.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge debug">🔧<!-- --> <!-- -->Debug</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Why does this metadata not update on client navigation?</div><div>Given this Next.js page with static metadata, why does the page title not update when navigating client-side to a different post?</div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">NextJS</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><span class="hl-kw">export</span> <span class="hl-kw">const</span> metadata = {
title: <span class="hl-str">'Post 1'</span>
};
<span class="hl-kw">export</span> <span class="hl-kw">default</span> <span class="hl-kw">function</span> PostPage() {
<span class="hl-kw">return</span> <div>Post content</div>;
}</pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Because the component is missing a useEffect hook to update the title.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Because static metadata does not update on client-side navigation; dynamic metadata with generateMetadata is needed.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Because Next.js does not support metadata in server components.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Because the metadata object is missing a description field.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Static metadata is fixed at build time and does not change on client navigation.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Static metadata is set once and does not react to client-side route changes. To update metadata dynamically, use generateMetadata function.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge state_output">❓<!-- --> <!-- -->state_output</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">What is the final metadata output when combining static and dynamic metadata?</div><div>If a Next.js page exports both a static metadata object and an async generateMetadata function, which metadata is used in the rendered page?</div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">NextJS</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><span class="hl-kw">export</span> <span class="hl-kw">const</span> metadata = {
title: <span class="hl-str">'Static Title'</span>,
description: <span class="hl-str">'Static description'</span>
};
<span class="hl-kw">export</span> <span class="hl-kw">async</span> <span class="hl-kw">function</span> generateMetadata() {
<span class="hl-kw">return</span> {
title: <span class="hl-str">'Dynamic Title'</span>
};
}
<span class="hl-kw">export</span> <span class="hl-kw">default</span> <span class="hl-kw">function</span> Page() {
<span class="hl-kw">return</span> <div>Content</div>;
}</pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The dynamic metadata from generateMetadata overrides the static metadata.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The static metadata is used and generateMetadata is ignored.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Both metadata are merged, with static description and dynamic title.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">An error occurs because both static and dynamic metadata are defined.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Dynamic metadata function takes precedence over static metadata.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">When both static metadata and generateMetadata exist, Next.js uses the dynamic metadata returned by generateMetadata, ignoring the static object.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge conceptual">🧠<!-- --> <!-- -->Conceptual</span></div><span class="task-difficulty expert">expert</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Which statement best describes the role of Next.js Metadata API in SEO?</div><div>Select the most accurate description of how Next.js Metadata API improves SEO for web applications.</div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">It automatically generates metadata from page content without developer input.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">It only affects client-side rendering and does not impact SEO.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">It replaces the need for robots.txt and sitemap.xml files for SEO.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">It allows declarative, server-rendered metadata that improves search engine indexing and social sharing previews.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Think about how metadata affects search engines and social platforms.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Next.js Metadata API lets developers define metadata that is rendered on the server, helping search engines and social media platforms understand page content better.</div></div></div></div></div></article><div class="confetti-container"></div></div><div><article class="content-card" id="practice"><div class="code-articles-card-header justify-content-between"><div class="d-flex align-items-center" style="gap:12px"><span class="card-icon nofill intro"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color site-fs-20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></span><h2 class="codefly-card-title mb-0 pb-0">Practice</h2></div><span class="site-fs-15">(<!-- -->1<!-- -->/<!-- -->5<!-- -->)</span></div><div class="code-articles-card-body" data-theme="light"><div class=""><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">1<!-- -->. <!-- -->What is the main purpose of the <code>metadata</code> export in a Next.js page?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->To define the page's layout and styling</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->To provide SEO information like title and description for the page</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->To handle user authentication on the page</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->To manage API routes for the page</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand the role of metadata in Next.js</h4>The <code>metadata</code> export is used to set SEO-related information such as the page title and description.</li><li><h4>Step 2: Differentiate from other page features</h4>Layout, styling, authentication, and API routes are handled differently and not via <code>metadata</code>.</li><li><h4>Final Answer:</h4><strong>To provide SEO information like title and description for the page</strong> -> Option B</li><li><h4>Quick Check:</h4>Metadata = SEO info [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Metadata sets SEO info like title and description [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Confusing metadata with layout or styling</li><li class="ph-mistake-item mb-0">Thinking metadata handles API routes</li><li class="ph-mistake-item mb-0">Assuming metadata manages authentication</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">2<!-- -->. <!-- -->Which of the following is the correct way to export metadata in a Next.js page file?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->export const metadata = { title: 'Home' }</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->export default metadata = { title: 'Home' }</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->const metadata = { title: 'Home' }; export metadata</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->export metadata = { title: 'Home' }</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall correct export syntax for named exports</h4>In Next.js, metadata is exported as a named export using <code>export const metadata = {...}</code>.</li><li><h4>Step 2: Identify syntax errors in other options</h4>Options A, B, and C use invalid export syntax or missing keywords.</li><li><h4>Final Answer:</h4><strong>export const metadata = { title: 'Home' }</strong> -> Option A</li><li><h4>Quick Check:</h4>Named export with const = export const metadata = { title: 'Home' } [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use 'export const metadata = {...}' for metadata export [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using default export instead of named export</li><li class="ph-mistake-item mb-0">Missing 'const' keyword</li><li class="ph-mistake-item mb-0">Incorrect export statement syntax</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">3<!-- -->. <!-- -->Given this metadata export in a Next.js page, what will be the page title shown in the browser tab?<br/><pre>export const metadata = {
title: 'About Us - MySite',
description: 'Learn more about us'
}</pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->MySite</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->Learn more about us</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->About Us - MySite</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->No title will show</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Identify the title property in metadata</h4>The <code>title</code> property is set to 'About Us - MySite'. This is what appears in the browser tab.</li><li><h4>Step 2: Understand description does not affect title</h4>The <code>description</code> is for SEO and social previews, not the browser tab title.</li><li><h4>Final Answer:</h4><strong>About Us - MySite</strong> -> Option C</li><li><h4>Quick Check:</h4>Title property sets browser tab title [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Page title = metadata.title value [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Confusing description with title</li><li class="ph-mistake-item mb-0">Assuming default title if metadata is present</li><li class="ph-mistake-item mb-0">Thinking title is empty if not set in layout</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">4<!-- -->. <!-- -->You wrote this metadata export but the page title does not update:<br/><pre>const metadata = {
title: 'Contact'
}
export default metadata</pre><br/>What is the error?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->metadata object must be wrapped in a React component</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->title property must be inside a function</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->title property should be 'pageTitle' instead of 'title'</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->metadata must be exported as a named export, not default</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Check export type for metadata</h4>Next.js requires <code>metadata</code> to be a named export, not a default export.</li><li><h4>Step 2: Verify other options</h4>Title property does not need a function, React component, or different key name.</li><li><h4>Final Answer:</h4><strong>metadata must be exported as a named export, not default</strong> -> Option D</li><li><h4>Quick Check:</h4>Named export required for metadata [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use 'export const metadata', not 'export default' [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using default export instead of named export</li><li class="ph-mistake-item mb-0">Thinking metadata needs to be inside a component</li><li class="ph-mistake-item mb-0">Changing property names incorrectly</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">5<!-- -->. <!-- -->You want to add Open Graph metadata for social sharing in Next.js using the Metadata API. Which is the correct way to add the Open Graph title and image?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">hard</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } }</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->export const metadata = { ogTitle: 'My Page', ogImage: 'https://example.com/image.png' }</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->export const metadata = { social: { title: 'My Page', image: 'https://example.com/image.png' } }</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->export const metadata = { openGraphTitle: 'My Page', openGraphImage: 'https://example.com/image.png' }</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall Open Graph structure in Next.js metadata</h4>Open Graph data is nested under the <code>openGraph</code> key with properties like <code>title</code> and <code>images</code> (array of URLs).</li><li><h4>Step 2: Compare options for correct property names and structure</h4>Only export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } } uses the correct nested <code>openGraph</code> object with <code>title</code> and <code>images</code> array.</li><li><h4>Final Answer:</h4><strong>export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } }</strong> -> Option A</li><li><h4>Quick Check:</h4>Open Graph uses openGraph key with images array [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use openGraph object with images array for social metadata [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using flat keys like ogTitle instead of nested openGraph</li><li class="ph-mistake-item mb-0">Passing image as string instead of array</li><li class="ph-mistake-item mb-0">Using incorrect property names like social or openGraphTitle</li></ul></div></div></div></div></div></div><div class="d-flex align-items-center justify-content-between mt-4"><button class="secondary-site-btn" disabled=""><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> Previous</button><div class="practice-question-toggles-wrapper"><button class="practice-question-toggle-btn active ">1</button><button class="practice-question-toggle-btn ">2</button><button class="practice-question-toggle-btn ">3</button><button class="practice-question-toggle-btn ">4</button><button class="practice-question-toggle-btn ">5</button></div><button class="secondary-site-btn">Next <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></button></div></div></article></div><div id="mock" class="mtc-wrapper"><div class="mtc-card-container"><div class="mtc-card pulse-effect"><span class="mtc-recommended-badge">Recommended</span><div class="mtc-icon-wrap"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" color="#fff" style="color:#fff" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></div><h4 class="mtc-heading">Ready to prove it?</h4><p class="mtc-sub">Pass the test and this pattern moves <span class="mtc-state-pill">unknown</span> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> <span class="mtc-state-pill good">strong</span> <span class="d-inline-block">while earning <span class="weight-800">+1 Grip</span></span> toward your certificate.</p><div class="mtc-pills"><span class="mtc-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>10 questions</span><span class="mtc-pill"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>~5 min</span><span class="mtc-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>easy <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> hard</span></div><div class="mtc-cta-wrap"><button type="button" class="mtc-cta-btn">Take the Test <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg></button></div></div></div></div></div></main><div class="rpi-float-wrap"><button type="button" class="rpi-float-btn" aria-label="Report an issue"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg><span class="rpi-float-label">Report Issue</span></button></div></div><div style="display:none"><div id="ad-management-config-settings" data-blocklist-all="1"></div></div> <script src="/_next/static/chunks/webpack-28170116499ad51b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/d071dca61fbb01bf.css\",\"style\"]\n2:HL[\"/_next/static/css/907864b6faf28c32.css\",\"style\"]\n3:HL[\"/_next/static/css/ada9a246b4e9c7f9.css\",\"style\"]\n4:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n5:HL[\"/_next/static/css/a97525600f39e233.css\",\"style\"]\n6:HL[\"/_next/static/css/989afc350a4b3a28.css\",\"style\"]\n7:HL[\"/_next/static/css/ccfdf35169bd162c.css\",\"style\"]\n8:HL[\"/_next/static/css/417e7aee3e688b57.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"9:I[95751,[],\"\"]\nc:I[39275,[],\"\"]\n12:I[61343,[],\"\"]\n13:I[84080,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"\"]\n14:I[88726,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"Toaster\"]\n15:I[20154,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"3154\",\"static/chunks/3154-0aa2f15561902c10.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"4662\",\"static/chunks/4662-205abea99f9b3adf.js\",\"9160\",\"static/chunks/app/not-found-b9aad74520590312.js\"],\"default\"]\n16:I[78598,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n17:I[56192,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n19:I[76130,[],\"\"]\nd:[\"lang\",\"en\",\"d\"]\ne:[\"subject\",\"nextjs\",\"d\"]\nf:[\"part\",\"part-1\",\"d\"]\n10:[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"]\n11:[\"mode\",\"challenge\",\"oc\"]\n1a:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d071dca61fbb01bf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/907864b6faf28c32.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"buildId\":\"leyaa-prod-build-id\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"nextjs\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"nextjs\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$La\",\"$Lb\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ada9a246b4e9c7f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a97525600f39e233.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/989afc350a4b3a28.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ccfdf35169bd162c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/417e7aee3e688b57.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$L13\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-18214378714\"}],[\"$\",\"$L13\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-18214378714');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$L13\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"$L13\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L15\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a97525600f39e233.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L16\",null,{}],\" \",[\"$\",\"$L17\",null,{}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L18\"],\"globalErrorComponent\":\"$19\",\"missingSlots\":\"$W1a\"}]]\n"])</script><script>self.__next_f.push([1,"1c:I[43489,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6051\",\"static/chunks/795d4814-8b40e2eae05948ca.js\",\"5706\",\"static/chunks/9c4e2130-0ef90d15550fcb15.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7699\",\"static/chunks/8e1d74a4-d3c1e3cfb4eeea98.js\",\"7240\",\"static/chunks/53c13509-a3e4ac0640ae03f2.js\",\"9956\",\"static/chunks/ee560e2c-27ba7a66c659fa82.js\",\"2516\",\"static/chunks/f7333993-31ab72eb9b202e3d.js\",\"1779\",\"static/chunks/0e762574-cee3ec2351d97ca0.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"4889\",\"static/chunks/4889-de8d1c4f2ff2f134.js\",\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"7534\",\"static/chunks/7534-02c906a11e681445.js\",\"4220\",\"static/chunks/4220-e3c1264f6e3453a7.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"6857\",\"static/chunks/6857-f9121be732678b30.js\",\"2202\",\"static/chunks/2202-dad5d33fadc7ea73.js\",\"1786\",\"static/chunks/1786-7253d5c3df8362c5.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-b11550cd55444a64.js\"],\"default\"]\n1b:T497,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Metadata API for SEO in NextJS - Practice Problems \u0026 Coding Challenges\",\"description\":\"Solve Metadata API for SEO in NextJS coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\",\"url\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\",\"learningResourceType\":\"Quiz\",\"programmingLanguage\":\"NextJS\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Metadata API for SEO in NextJS - Practice Problems \u0026 Coding Challenges\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"positi"])</script><script>self.__next_f.push([1,"on\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metadata API for SEO in NextJS - Practice Problems \u0026 Coding Challenges\",\"item\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Challenge\",\"item\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}]}}"])</script><script>self.__next_f.push([1,"b:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1b\"}}]],[\"$\",\"$L1c\",null,{\"subject\":\"nextjs\",\"dbSubject\":\"nextjs\",\"part\":\"part-1\",\"pattern\":\"nextjs_metadata_api_for_seo\",\"modeSlug\":\"challenge\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\",\"active\":true},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Metadata API for SEO in NextJS - Practice Problems \u0026 Coding Challenges\",\"contentData\":{\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"VMC\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"CMC\":{\"topic\":\"Metadata API for SEO\",\"mode\":\"CMC_v4.2\",\"language\":\"nextjs\",\"content_type\":\"Frameworks \u0026 Libraries\",\"challenges\":[{\"id\":\"c1\",\"type\":\"component_behavior\",\"difficulty\":\"intermediate\",\"title\":\"What is the rendered HTML output of this Next.js Metadata API usage?\",\"prompt\":\"Consider this Next.js component using the Metadata API to set the page title and description. What will be the content of the \u003ctitle\u003e and \u003cmeta name=\\\"description\\\"\u003e tags in the rendered HTML?\",\"code\":\"import { Metadata } from 'next';\\n\\nexport const metadata: Metadata = {\\n title: 'Learn Next.js SEO',\\n description: 'A guide to Next.js Metadata API for SEO optimization.'\\n};\\n\\nexport default function Page() {\\n return \u003cmain\u003e\u003ch1\u003eWelcome to SEO Guide\u003c/h1\u003e\u003c/main\u003e;\\n}\",\"ordering_targets\":[],\"options\":{\"A\":\"\u003ctitle\u003eLearn Next.js SEO\u003c/title\u003e and \u003cmeta name=\\\"description\\\" content=\\\"A guide to Next.js Metadata API for SEO optimization.\\\"\u003e\",\"B\":\"\u003ctitle\u003eWelcome to SEO Guide\u003c/title\u003e and no meta description tag\",\"C\":\"\u003ctitle\u003eNext.js App\u003c/title\u003e and \u003cmeta name=\\\"description\\\" content=\\\"Default description\\\"\u003e\",\"D\":\"No \u003ctitle\u003e tag and no meta description tag\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Metadata object sets the page's SEO tags automatically.\",\"explanation\":\"The Metadata API in Next.js allows you to define SEO tags like title and description at the component level. These tags are rendered in the HTML head automatically.\",\"solution\":\"The metadata object sets \u003ctitle\u003e and \u003cmeta name=\\\"description\\\"\u003e tags in the HTML head with the provided values.\",\"tags\":[\"nextjs\",\"metadata\",\"seo\",\"component_behavior\"]},{\"id\":\"c2\",\"type\":\"syntax\",\"difficulty\":\"intermediate\",\"title\":\"Which option correctly defines dynamic metadata in Next.js?\",\"prompt\":\"You want to generate metadata dynamically based on props in a Next.js page. Which code snippet correctly uses the Metadata API for this?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"export function metadata() {\\n return { title: 'Static Title' };\\n}\",\"B\":\"export const metadata = ({ params }) =\u003e ({ title: `Post ${params.id}` });\",\"C\":\"export async function generateMetadata({ params }) {\\n return { title: `Post ${params.id}` };\\n}\",\"D\":\"export async function metadata({ params }) {\\n return { title: `Post ${params.id}` };\\n}\"},\"correct_answer\":[\"C\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Dynamic metadata requires an async function named generateMetadata.\",\"explanation\":\"Next.js expects an async function named generateMetadata to return metadata dynamically based on route params or props.\",\"solution\":\"Use 'export async function generateMetadata({ params })' to return metadata dynamically.\",\"tags\":[\"nextjs\",\"metadata\",\"syntax\",\"dynamic\"]},{\"id\":\"c3\",\"type\":\"debug\",\"difficulty\":\"advanced\",\"title\":\"Why does this metadata not update on client navigation?\",\"prompt\":\"Given this Next.js page with static metadata, why does the page title not update when navigating client-side to a different post?\",\"code\":\"export const metadata = {\\n title: 'Post 1'\\n};\\n\\nexport default function PostPage() {\\n return \u003cdiv\u003ePost content\u003c/div\u003e;\\n}\",\"ordering_targets\":[],\"options\":{\"A\":\"Because the component is missing a useEffect hook to update the title.\",\"B\":\"Because static metadata does not update on client-side navigation; dynamic metadata with generateMetadata is needed.\",\"C\":\"Because Next.js does not support metadata in server components.\",\"D\":\"Because the metadata object is missing a description field.\"},\"correct_answer\":[\"B\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Static metadata is fixed at build time and does not change on client navigation.\",\"explanation\":\"Static metadata is set once and does not react to client-side route changes. To update metadata dynamically, use generateMetadata function.\",\"solution\":\"Replace static metadata with an async generateMetadata function to update metadata on client navigation.\",\"tags\":[\"nextjs\",\"metadata\",\"debug\",\"client_navigation\"]},{\"id\":\"c4\",\"type\":\"state_output\",\"difficulty\":\"advanced\",\"title\":\"What is the final metadata output when combining static and dynamic metadata?\",\"prompt\":\"If a Next.js page exports both a static metadata object and an async generateMetadata function, which metadata is used in the rendered page?\",\"code\":\"export const metadata = {\\n title: 'Static Title',\\n description: 'Static description'\\n};\\n\\nexport async function generateMetadata() {\\n return {\\n title: 'Dynamic Title'\\n };\\n}\\n\\nexport default function Page() {\\n return \u003cdiv\u003eContent\u003c/div\u003e;\\n}\",\"ordering_targets\":[],\"options\":{\"A\":\"The dynamic metadata from generateMetadata overrides the static metadata.\",\"B\":\"The static metadata is used and generateMetadata is ignored.\",\"C\":\"Both metadata are merged, with static description and dynamic title.\",\"D\":\"An error occurs because both static and dynamic metadata are defined.\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Dynamic metadata function takes precedence over static metadata.\",\"explanation\":\"When both static metadata and generateMetadata exist, Next.js uses the dynamic metadata returned by generateMetadata, ignoring the static object.\",\"solution\":\"Only the metadata returned by generateMetadata is used in the final rendered page.\",\"tags\":[\"nextjs\",\"metadata\",\"state_output\",\"dynamic\"]},{\"id\":\"c5\",\"type\":\"conceptual\",\"difficulty\":\"expert\",\"title\":\"Which statement best describes the role of Next.js Metadata API in SEO?\",\"prompt\":\"Select the most accurate description of how Next.js Metadata API improves SEO for web applications.\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"It automatically generates metadata from page content without developer input.\",\"B\":\"It only affects client-side rendering and does not impact SEO.\",\"C\":\"It replaces the need for robots.txt and sitemap.xml files for SEO.\",\"D\":\"It allows declarative, server-rendered metadata that improves search engine indexing and social sharing previews.\"},\"correct_answer\":[\"D\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Think about how metadata affects search engines and social platforms.\",\"explanation\":\"Next.js Metadata API lets developers define metadata that is rendered on the server, helping search engines and social media platforms understand page content better.\",\"solution\":\"The API provides declarative, server-rendered metadata improving SEO and social sharing previews.\",\"tags\":[\"nextjs\",\"metadata\",\"seo\",\"conceptual\"]}],\"achievement_badge\":{\"name\":\"Next.js Metadata Master\",\"condition\":\"complete_all_5\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"framework\",\"total_challenges\":5,\"estimated_time_minutes\":20}}},\"subject\":\"nextjs\",\"title\":\"Metadata API for SEO\",\"puzzleDetails\":[{\"_id\":\"69b1785045baa2b585460440\",\"question_number\":1,\"question\":\"What is the main purpose of the \u003ccode\u003emetadata\u003c/code\u003e export in a Next.js page?\",\"options\":{\"A\":\"To define the page's layout and styling\",\"B\":\"To provide SEO information like title and description for the page\",\"C\":\"To handle user authentication on the page\",\"D\":\"To manage API routes for the page\"},\"correct_answer\":[\"B\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand the role of metadata in Next.js\u003c/h4\u003eThe \u003ccode\u003emetadata\u003c/code\u003e export is used to set SEO-related information such as the page title and description.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Differentiate from other page features\u003c/h4\u003eLayout, styling, authentication, and API routes are handled differently and not via \u003ccode\u003emetadata\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eTo provide SEO information like title and description for the page\u003c/strong\u003e -\u003e Option B\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eMetadata = SEO info [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Metadata sets SEO info like title and description [OK]\",\"common_mistakes\":[\"Confusing metadata with layout or styling\",\"Thinking metadata handles API routes\",\"Assuming metadata manages authentication\"],\"subject\":\"nextjs\",\"pattern\":\"Metadata API for SEO\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"conceptual\",\"difficulty\":\"easy\",\"topic\":\"Static Assets and Optimization\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"conceptual\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"subjectTitle\":\"NextJS\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"nextjs_p1_t8\"},{\"_id\":\"69b1785045baa2b585460441\",\"question_number\":2,\"question\":\"Which of the following is the correct way to export metadata in a Next.js page file?\",\"options\":{\"A\":\"export const metadata = { title: 'Home' }\",\"B\":\"export default metadata = { title: 'Home' }\",\"C\":\"const metadata = { title: 'Home' }; export metadata\",\"D\":\"export metadata = { title: 'Home' }\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall correct export syntax for named exports\u003c/h4\u003eIn Next.js, metadata is exported as a named export using \u003ccode\u003eexport const metadata = {...}\u003c/code\u003e.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Identify syntax errors in other options\u003c/h4\u003eOptions A, B, and C use invalid export syntax or missing keywords.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eexport const metadata = { title: 'Home' }\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eNamed export with const = export const metadata = { title: 'Home' } [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use 'export const metadata = {...}' for metadata export [OK]\",\"common_mistakes\":[\"Using default export instead of named export\",\"Missing 'const' keyword\",\"Incorrect export statement syntax\"],\"subject\":\"nextjs\",\"pattern\":\"Metadata API for SEO\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"syntax\",\"difficulty\":\"easy\",\"topic\":\"Static Assets and Optimization\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"syntax\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"subjectTitle\":\"NextJS\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"nextjs_p1_t8\"},{\"_id\":\"69b1785045baa2b585460442\",\"question_number\":3,\"question\":\"Given this metadata export in a Next.js page, what will be the page title shown in the browser tab?\u003cbr\u003e\u003cpre\u003eexport const metadata = {\\n title: 'About Us - MySite',\\n description: 'Learn more about us'\\n}\u003c/pre\u003e\",\"options\":{\"A\":\"MySite\",\"B\":\"Learn more about us\",\"C\":\"About Us - MySite\",\"D\":\"No title will show\"},\"correct_answer\":[\"C\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Identify the title property in metadata\u003c/h4\u003eThe \u003ccode\u003etitle\u003c/code\u003e property is set to 'About Us - MySite'. This is what appears in the browser tab.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Understand description does not affect title\u003c/h4\u003eThe \u003ccode\u003edescription\u003c/code\u003e is for SEO and social previews, not the browser tab title.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eAbout Us - MySite\u003c/strong\u003e -\u003e Option C\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eTitle property sets browser tab title [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Page title = metadata.title value [OK]\",\"common_mistakes\":[\"Confusing description with title\",\"Assuming default title if metadata is present\",\"Thinking title is empty if not set in layout\"],\"subject\":\"nextjs\",\"pattern\":\"Metadata API for SEO\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"component_behavior\",\"difficulty\":\"medium\",\"topic\":\"Static Assets and Optimization\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"component_behavior\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"subjectTitle\":\"NextJS\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"nextjs_p1_t8\"},{\"_id\":\"69b1785045baa2b585460443\",\"question_number\":4,\"question\":\"You wrote this metadata export but the page title does not update:\u003cbr\u003e\u003cpre\u003econst metadata = {\\n title: 'Contact'\\n}\\nexport default metadata\u003c/pre\u003e\u003cbr\u003eWhat is the error?\",\"options\":{\"A\":\"metadata object must be wrapped in a React component\",\"B\":\"title property must be inside a function\",\"C\":\"title property should be 'pageTitle' instead of 'title'\",\"D\":\"metadata must be exported as a named export, not default\"},\"correct_answer\":[\"D\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Check export type for metadata\u003c/h4\u003eNext.js requires \u003ccode\u003emetadata\u003c/code\u003e to be a named export, not a default export.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Verify other options\u003c/h4\u003eTitle property does not need a function, React component, or different key name.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003emetadata must be exported as a named export, not default\u003c/strong\u003e -\u003e Option D\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eNamed export required for metadata [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use 'export const metadata', not 'export default' [OK]\",\"common_mistakes\":[\"Using default export instead of named export\",\"Thinking metadata needs to be inside a component\",\"Changing property names incorrectly\"],\"subject\":\"nextjs\",\"pattern\":\"Metadata API for SEO\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"debug\",\"difficulty\":\"medium\",\"topic\":\"Static Assets and Optimization\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"debug\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"subjectTitle\":\"NextJS\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"nextjs_p1_t8\"},{\"_id\":\"69b1785045baa2b585460444\",\"question_number\":5,\"question\":\"You want to add Open Graph metadata for social sharing in Next.js using the Metadata API. Which is the correct way to add the Open Graph title and image?\",\"options\":{\"A\":\"export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } }\",\"B\":\"export const metadata = { ogTitle: 'My Page', ogImage: 'https://example.com/image.png' }\",\"C\":\"export const metadata = { social: { title: 'My Page', image: 'https://example.com/image.png' } }\",\"D\":\"export const metadata = { openGraphTitle: 'My Page', openGraphImage: 'https://example.com/image.png' }\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall Open Graph structure in Next.js metadata\u003c/h4\u003eOpen Graph data is nested under the \u003ccode\u003eopenGraph\u003c/code\u003e key with properties like \u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003eimages\u003c/code\u003e (array of URLs).\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Compare options for correct property names and structure\u003c/h4\u003eOnly export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } } uses the correct nested \u003ccode\u003eopenGraph\u003c/code\u003e object with \u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003eimages\u003c/code\u003e array.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eexport const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } }\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eOpen Graph uses openGraph key with images array [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use openGraph object with images array for social metadata [OK]\",\"common_mistakes\":[\"Using flat keys like ogTitle instead of nested openGraph\",\"Passing image as string instead of array\",\"Using incorrect property names like social or openGraphTitle\"],\"subject\":\"nextjs\",\"pattern\":\"Metadata API for SEO\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"application\",\"difficulty\":\"hard\",\"topic\":\"Static Assets and Optimization\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"application\",\"level\":\"hard\",\"test_type\":\"puzzle\",\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"subjectTitle\":\"NextJS\",\"part\":\"part-1\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"nextjs_p1_t8\"}]},\"syllabusData\":{\"part\":\"part-1\",\"subject\":\"nextjs\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":8,\"total_patterns\":65,\"patterns_with_content\":65,\"created_at\":\"2026-02-28T20:17:25.344558Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Foundations\",\"subjectTitle\":\"NextJS\",\"topics\":[{\"topic_id\":\"nextjs_p1_t1\",\"title\":\"Next.js Basics\",\"order\":1,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_what_is_nextjs\",\"title\":\"What is Next.js\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_why_nextjs_over_plain_react\",\"title\":\"Why Next.js over plain React\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_how_nextjs_renders_serverfirst_model\",\"title\":\"How Next.js renders (server-first model)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_create_next_app_setup\",\"title\":\"Create Next App setup\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_project_structure_overview\",\"title\":\"Project structure overview\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_app_directory_app_router\",\"title\":\"App directory (App Router)\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_development_server_and_hot_reload\",\"title\":\"Development server and hot reload\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_typescript_support_in_nextjs\",\"title\":\"TypeScript support in Next.js\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t2\",\"title\":\"File-Based Routing\",\"order\":2,\"pattern_count\":9,\"patterns\":[{\"pattern_id\":\"nextjs_why_filebased_routing_simplifies_navigation\",\"title\":\"Why file-based routing simplifies navigation\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_pagetsx_as_route_definition\",\"title\":\"Page.tsx as route definition\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_nested_routes_with_folders\",\"title\":\"Nested routes with folders\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_dynamic_routes_with_param\",\"title\":\"Dynamic routes with [param]\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_catchall_routes_with_param\",\"title\":\"Catch-all routes with [...param]\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_route_groups_with_groupname\",\"title\":\"Route groups with (groupName)\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_notfound_page_handling\",\"title\":\"Not-found page handling\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_loading_ui_with_loadingtsx\",\"title\":\"Loading UI with loading.tsx\",\"order\":8,\"has_content\":true},{\"pattern_id\":\"nextjs_error_handling_with_errortsx\",\"title\":\"Error handling with error.tsx\",\"order\":9,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t3\",\"title\":\"Layouts and Templates\",\"order\":3,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_layouts_avoid_redundant_rendering\",\"title\":\"Why layouts avoid redundant rendering\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_root_layout_required\",\"title\":\"Root layout (required)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_nested_layouts\",\"title\":\"Nested layouts\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_layout_vs_template_difference\",\"title\":\"Layout vs template difference\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_metadata_in_layouts\",\"title\":\"Metadata in layouts\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_shared_state_across_layouts\",\"title\":\"Shared state across layouts\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_layout_navigation_behavior\",\"title\":\"Layout navigation behavior\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_multiple_root_layouts_with_route_groups\",\"title\":\"Multiple root layouts with route groups\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t4\",\"title\":\"Server Components\",\"order\":4,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_server_components_are_the_default\",\"title\":\"Why server components are the default\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_server_component_execution_model\",\"title\":\"Server component execution model\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_what_can_run_in_server_components\",\"title\":\"What can run in server components\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_data_fetching_in_server_components\",\"title\":\"Data fetching in server components\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_async_server_components\",\"title\":\"Async server components\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_server_component_restrictions\",\"title\":\"Server component restrictions\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_zero_bundle_size_for_server_components\",\"title\":\"Zero bundle size for server components\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_when_to_keep_components_on_server\",\"title\":\"When to keep components on server\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t5\",\"title\":\"Client Components\",\"order\":5,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_client_components_handle_interactivity\",\"title\":\"Why client components handle interactivity\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_use_client_directive\",\"title\":\"Use client directive\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_event_handlers_in_client_components\",\"title\":\"Event handlers in client components\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_state_and_hooks_in_client_components\",\"title\":\"State and hooks in client components\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_when_to_use_client_components\",\"title\":\"When to use client components\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_client_component_boundaries\",\"title\":\"Client component boundaries\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_server_and_client_component_composition\",\"title\":\"Server and client component composition\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_interleaving_server_and_client\",\"title\":\"Interleaving server and client\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t6\",\"title\":\"Navigation and Links\",\"order\":6,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_nextjs_navigation_is_optimized\",\"title\":\"Why Next.js navigation is optimized\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_link_component_for_client_navigation\",\"title\":\"Link component for client navigation\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_active_link_detection\",\"title\":\"Active link detection\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_programmatic_navigation_userouter\",\"title\":\"Programmatic navigation (useRouter)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_route_prefetching_behavior\",\"title\":\"Route prefetching behavior\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_redirect_function\",\"title\":\"Redirect function\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_scroll_behavior_control\",\"title\":\"Scroll behavior control\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_parallel_routes_concept\",\"title\":\"Parallel routes concept\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t7\",\"title\":\"Styling in Next.js\",\"order\":7,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_styling_options_matter\",\"title\":\"Why styling options matter\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_css_modules\",\"title\":\"CSS Modules\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_global_css\",\"title\":\"Global CSS\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_tailwind_css_integration\",\"title\":\"Tailwind CSS integration\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_cssinjs_considerations\",\"title\":\"CSS-in-JS considerations\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_font_optimization_with_next_font\",\"title\":\"Font optimization with next/font\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_image_optimization_with_next_image\",\"title\":\"Image optimization with next/image\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_conditional_styling_patterns\",\"title\":\"Conditional styling patterns\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"nextjs_p1_t8\",\"title\":\"Static Assets and Optimization\",\"order\":8,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"nextjs_why_optimization_matters_for_performance\",\"title\":\"Why optimization matters for performance\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"nextjs_public_directory_for_static_files\",\"title\":\"Public directory for static files\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"nextjs_image_component_and_optimization\",\"title\":\"Image component and optimization\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"nextjs_responsive_images\",\"title\":\"Responsive images\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"nextjs_font_optimization_and_selfhosting\",\"title\":\"Font optimization and self-hosting\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"nextjs_script_component_for_thirdparty_scripts\",\"title\":\"Script component for third-party scripts\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"nextjs_metadata_api_for_seo\",\"title\":\"Metadata API for SEO\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"nextjs_open_graph_metadata\",\"title\":\"Open Graph metadata\",\"order\":8,\"has_content\":true}]}]},\"modeCode\":\"CMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Solve Metadata API for SEO in NextJS coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"12\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Leyaa\"}],[\"$\",\"meta\",\"18\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:title\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Solve Metadata API for SEO in NextJS coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:alt\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Solve Metadata API for SEO in NextJS coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"35\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://leyaa.ai/Assets/Favicons/apple-touch-icon.png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script></body></html>