var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var o=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(s,i)=>()=>(i||s((i={exports:{}}).exports,i),i.exports),F=(s,i)=>{for(var n in i)a(s,n,{get:i[n],enumerable:!0})},t=(s,i,n,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let h of g(i))!y.call(s,h)&&h!==n&&a(s,h,{get:()=>i[h],enumerable:!(l=E(i,h))||l.enumerable});return s};var m=(s,i,n)=>(n=s!=null?p(o(s)):{},t(i||!s||!s.__esModule?a(n,"default",{value:s,enumerable:!0}):n,s)),A=s=>t(a({},"__esModule",{value:!0}),s);var d=u((D,r)=>{r.exports=_jsx_runtime});var f={};F(f,{default:()=>c,frontmatter:()=>C});var e=m(d()),C={title:"Getting Started with Next.js 14 App Router",description:"A practical guide to building modern web applications with Next.js 14's App Router, Server Components, and the latest React patterns.",date:"2024-03-15",category:"Tech",tags:["Next.js","React","TypeScript","Web Development"],author:"Solomon Akor",featured:!0};function k(s){let i={a:"a",code:"code",figure:"figure",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...s.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(i.p,{children:"Next.js 14 brings significant improvements to the developer experience with the App Router, React Server Components, and improved performance. In this guide, I'll walk you through building a production-ready application from scratch."}),` `,(0,e.jsxs)(i.h2,{id:"whats-new-in-nextjs-14",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#whats-new-in-nextjs-14",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"What's New in Next.js 14"]}),` `,(0,e.jsx)(i.p,{children:"The App Router, introduced in Next.js 13 and stabilized in 14, represents a fundamental shift in how we build React applications:"}),` `,(0,e.jsxs)(i.ul,{children:[` `,(0,e.jsxs)(i.li,{children:[(0,e.jsx)(i.strong,{children:"React Server Components"})," by default"]}),` `,(0,e.jsxs)(i.li,{children:[(0,e.jsx)(i.strong,{children:"Streaming"})," with Suspense"]}),` `,(0,e.jsxs)(i.li,{children:[(0,e.jsx)(i.strong,{children:"Nested layouts"})," for better code organization"]}),` `,(0,e.jsxs)(i.li,{children:[(0,e.jsx)(i.strong,{children:"Server Actions"})," for form handling"]}),` `,(0,e.jsxs)(i.li,{children:[(0,e.jsx)(i.strong,{children:"Improved caching"})," with fine-grained control"]}),` `]}),` `,(0,e.jsxs)(i.h2,{id:"setting-up-your-project",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#setting-up-your-project",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Setting Up Your Project"]}),` `,(0,e.jsx)(i.p,{children:"Start by creating a new Next.js 14 project:"}),` `,(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark github-light",children:(0,e.jsxs)(i.code,{"data-language":"bash","data-theme":"github-dark github-light",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"npx"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" create-next-app@14"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" my-app"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" --typescript"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" --tailwind"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" --app"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"cd"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" my-app"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"npm"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" run"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" dev"})]})]})})}),` `,(0,e.jsxs)(i.h2,{id:"understanding-the-app-router",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#understanding-the-app-router",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Understanding the App Router"]}),` `,(0,e.jsxs)(i.p,{children:["The App Router uses a file-system based routing approach. Every folder in the ",(0,e.jsx)(i.code,{children:"app"})," directory that contains a ",(0,e.jsx)(i.code,{children:"page.tsx"})," file becomes a route."]}),` `,(0,e.jsx)(i.pre,{children:(0,e.jsx)(i.code,{children:`app/ \u251C\u2500\u2500 layout.tsx # Root layout (always rendered) \u251C\u2500\u2500 page.tsx # Home page: / \u251C\u2500\u2500 about/ \u2502 \u2514\u2500\u2500 page.tsx # About page: /about \u2514\u2500\u2500 blog/ \u251C\u2500\u2500 page.tsx # Blog index: /blog \u2514\u2500\u2500 [slug]/ \u2514\u2500\u2500 page.tsx # Blog post: /blog/my-post `})}),` `,(0,e.jsxs)(i.h2,{id:"react-server-components",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#react-server-components",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"React Server Components"]}),` `,(0,e.jsx)(i.p,{children:"By default, all components in the App Router are Server Components. They run on the server and can directly access databases, file systems, and APIs without client-side overhead."}),` `,(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// app/blog/page.tsx - This runs on the server"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { getAllPosts } "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '@/lib/posts'"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" default"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" BlogPage"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:" // Direct data fetching \u2014 no useEffect needed"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" posts"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" await"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" getAllPosts"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {posts."}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"map"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"article"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{post.id}>{post.title}"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,e.jsxs)(i.h2,{id:"when-to-use-client-components",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#when-to-use-client-components",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"When to Use Client Components"]}),` `,(0,e.jsxs)(i.p,{children:["Add ",(0,e.jsx)(i.code,{children:"'use client'"})," only when you need:"]}),` `,(0,e.jsxs)(i.ul,{children:[` `,(0,e.jsx)(i.li,{children:"Browser APIs (localStorage, window)"}),` `,(0,e.jsx)(i.li,{children:"Event listeners"}),` `,(0,e.jsx)(i.li,{children:"React hooks (useState, useEffect)"}),` `,(0,e.jsx)(i.li,{children:"Client-side interactivity"}),` `]}),` `,(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'use client'"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useState } "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'react'"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Counter"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"count"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setCount"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onClick"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{() "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" setCount"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"c"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" c "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"+"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" 1"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")}>"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Count: {count}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,e.jsxs)(i.h2,{id:"nested-layouts",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#nested-layouts",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Nested Layouts"]}),` `,(0,e.jsx)(i.p,{children:"Layouts are a powerful feature that let you share UI across routes without re-rendering:"}),` `,(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// app/blog/layout.tsx"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" default"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" BlogLayout"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" children"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"ReactNode"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}) {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"max-w-4xl mx-auto"'}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"nav"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"/* Blog navigation */"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,e.jsxs)(i.h2,{id:"metadata-api",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#metadata-api",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Metadata API"]}),` `,(0,e.jsx)(i.p,{children:"Next.js 14 provides a powerful metadata API for SEO:"}),` `,(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" type"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { Metadata } "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'next'"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" metadata"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Metadata"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" title: "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'My App'"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" description: "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'Built with Next.js 14'"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" openGraph: {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" title: "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'My App'"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" description: "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'Built with Next.js 14'"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" images: [{ url: "}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'/og-image.png'"}),(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }],"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,e.jsxs)(i.h2,{id:"conclusion",children:[(0,e.jsx)(i.a,{className:"anchor","aria-label":"Link to section",href:"#conclusion",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsx)(i.p,{children:"Next.js 14's App Router is a significant improvement in developer experience and performance. The shift to Server Components by default means better performance out of the box, while the flexibility of Client Components ensures you can still build rich interactive UIs."}),` `,(0,e.jsx)(i.p,{children:"Start building with it today \u2014 the learning curve is worth it."})]})}function c(s={}){let{wrapper:i}=s.components||{};return i?(0,e.jsx)(i,{...s,children:(0,e.jsx)(k,{...s})}):k(s)}return A(f);})(); ;return Component;