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=""><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>import</span> { Metadata } <span>from</span> <span>'next'</span>;
<span>export</span> <span>const</span> metadata: Metadata = {
title: <span>'Learn Next.js SEO'</span>,
description: <span>'A guide to Next.js Metadata API for SEO optimization.'</span>
};
<span>export</span> <span>default</span> <span>function</span> Page() {
<span>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="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=""><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>export</span> <span>const</span> metadata = {
title: <span>'Post 1'</span>
};
<span>export</span> <span>default</span> <span>function</span> PostPage() {
<span>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=""><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>export</span> <span>const</span> metadata = {
title: <span>'Static Title'</span>,
description: <span>'Static description'</span>
};
<span>export</span> <span>async</span> <span>function</span> generateMetadata() {
<span>return</span> {
title: <span>'Dynamic Title'</span>
};
}
<span>export</span> <span>default</span> <span>function</span> Page() {
<span>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="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></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-fd24bd8e19d2841a.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/b133bdac07c7940e.css\",\"style\"]\n2:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/caf3ca742c7945f9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\n10:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n12:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"nextjs\",\"d\"]\nb:[\"part\",\"part-1\",\"d\"]\nc:[\"pattern\",\"nextjs-metadata-api-for-seo\",\"d\"]\nd:[\"mode\",\"challenge\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b133bdac07c7940e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"hN8t5By7h5nzsrdSose07\",\"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__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.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/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",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\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",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-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\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);})();\"}}],[\"$\",\"$Lf\",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\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",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\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-506edbde2b5b3f55.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-6b3bda54d2fd2e14.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-09ee572e3d7819a2.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8935\",\"static/chunks/8935-c1c159349bf7da40.js\",\"9663\",\"static/chunks/9663-fdcd080af3916e3e.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-1fc9c577a9450e06.js\"],\"default\"]\n16: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\",\"position\":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,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",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\"},\"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,"13:[[\"$\",\"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\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"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\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/nextjs/part-1/nextjs-metadata-api-for-seo/challenge\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:alt\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:title\",\"content\":\"Metadata API for SEO in NextJS Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"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\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>