[{"data":1,"prerenderedAt":284},["ShallowReactive",2],{"term-n\u002Fnext-js":3,"related-n\u002Fnext-js":260},{"id":4,"title":5,"acronym":6,"body":7,"category":239,"description":240,"difficulty":241,"extension":242,"letter":243,"meta":244,"navigation":245,"path":246,"related":247,"seo":254,"sitemap":255,"stem":258,"subcategory":6,"__hash__":259},"terms\u002Fterms\u002Fn\u002Fnext-js.md","Next.js",null,{"type":8,"value":9,"toc":233},"minimark",[10,15,19,23,26,30,222,226,229],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes. You get a full production-ready setup without configuring webpack for three days. The de-facto standard for serious React apps.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Next.js is a React meta-framework developed by Vercel. It supports SSR, SSG, ISR, and CSR in the same project via a file-based routing system. The App Router (Next.js 13+) introduced React Server Components, server actions, and streaming. It integrates tightly with the Vercel deployment platform.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F app\u002Fpage.tsx — Next.js App Router server component\nexport default async function Page() {\n  const data = await fetch('https:\u002F\u002Fapi.example.com\u002Fposts').then(r => r.json());\n  return \u003Cul>{data.map(p => \u003Cli key={p.id}>{p.title}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n","typescript","",[38,39,40,49,77,141,216],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F app\u002Fpage.tsx — Next.js App Router server component\n",[41,50,52,56,59,63,66,70,74],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","export",[41,57,58],{"class":54}," default",[41,60,62],{"class":61},"spNyl"," async",[41,64,65],{"class":61}," function",[41,67,69],{"class":68},"s2Zo4"," Page",[41,71,73],{"class":72},"sMK4o","()",[41,75,76],{"class":72}," {\n",[41,78,80,83,87,90,93,96,100,103,107,109,112,115,118,120,124,127,130,132,135,138],{"class":43,"line":79},3,[41,81,82],{"class":61},"  const",[41,84,86],{"class":85},"sTEyZ"," data",[41,88,89],{"class":72}," =",[41,91,92],{"class":54}," await",[41,94,95],{"class":68}," fetch",[41,97,99],{"class":98},"swJcz","(",[41,101,102],{"class":72},"'",[41,104,106],{"class":105},"sfazB","https:\u002F\u002Fapi.example.com\u002Fposts",[41,108,102],{"class":72},[41,110,111],{"class":98},")",[41,113,114],{"class":72},".",[41,116,117],{"class":68},"then",[41,119,99],{"class":98},[41,121,123],{"class":122},"sHdIc","r",[41,125,126],{"class":61}," =>",[41,128,129],{"class":85}," r",[41,131,114],{"class":72},[41,133,134],{"class":68},"json",[41,136,137],{"class":98},"())",[41,139,140],{"class":72},";\n",[41,142,144,147,150,154,157,160,163,165,167,169,172,175,178,180,182,184,187,190,192,194,197,200,203,205,207,209,211,213],{"class":43,"line":143},4,[41,145,146],{"class":54},"  return",[41,148,149],{"class":98}," \u003C",[41,151,153],{"class":152},"sBMFI","ul",[41,155,156],{"class":98},">",[41,158,159],{"class":72},"{",[41,161,162],{"class":98},"data.map(",[41,164,16],{"class":122},[41,166,126],{"class":61},[41,168,149],{"class":98},[41,170,171],{"class":152},"li",[41,173,174],{"class":152}," key",[41,176,177],{"class":98},"=",[41,179,159],{"class":72},[41,181,16],{"class":152},[41,183,114],{"class":72},[41,185,186],{"class":98},"id",[41,188,189],{"class":72},"}",[41,191,156],{"class":98},[41,193,159],{"class":72},[41,195,196],{"class":98},"p.",[41,198,199],{"class":85},"title",[41,201,202],{"class":72},"}\u003C\u002F",[41,204,171],{"class":85},[41,206,156],{"class":72},[41,208,111],{"class":98},[41,210,202],{"class":72},[41,212,153],{"class":85},[41,214,215],{"class":72},">;\n",[41,217,219],{"class":43,"line":218},5,[41,220,221],{"class":72},"}\n",[11,223,225],{"id":224},"when-youll-hear-this","When You'll Hear This",[16,227,228],{},"\"Next.js App Router uses React Server Components by default.\" \u002F \"Deploy your Next.js app to Vercel for zero-config SSR.\"",[230,231,232],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":234},[235,236,237,238],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":224,"depth":51,"text":225},"frontend","Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.","intermediate","md","n",{},true,"\u002Fterms\u002Fn\u002Fnext-js",[248,249,250,251,252,253],"React","SSR","SSG","ISR","Nuxt","Framework",{"title":5,"description":240},{"changefreq":256,"priority":257},"weekly",0.7,"terms\u002Fn\u002Fnext-js","NP163qFR3k2qYE8Cqp4jo7DckNDoW7iKYVB-q7DQPbI",[261,265,270,273,276,280],{"title":253,"path":262,"acronym":6,"category":239,"difficulty":263,"description":264},"\u002Fterms\u002Ff\u002Fframework","beginner","A framework is like a pre-built house structure — the walls, floors, and roof are done, you just decorate it your way.",{"title":251,"path":266,"acronym":267,"category":239,"difficulty":268,"description":269},"\u002Fterms\u002Fi\u002Fisr","Incremental Static Regeneration","advanced","ISR is the best of both SSG and SSR. Pages are pre-built statically but can automatically rebuild themselves in the background after a set time.",{"title":252,"path":271,"acronym":6,"category":239,"difficulty":241,"description":272},"\u002Fterms\u002Fn\u002Fnuxt","Nuxt is Vue on steroids. It's a meta-framework that adds SSR, SSG, file-based routing, auto-imports, and a full deployment pipeline on top of Vue.",{"title":248,"path":274,"acronym":6,"category":239,"difficulty":263,"description":275},"\u002Fterms\u002Fr\u002Freact","React is a JavaScript library from Meta for building UIs out of components.",{"title":250,"path":277,"acronym":278,"category":239,"difficulty":241,"description":279},"\u002Fterms\u002Fs\u002Fssg","Static Site Generation","SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN.",{"title":249,"path":281,"acronym":282,"category":239,"difficulty":241,"description":283},"\u002Fterms\u002Fs\u002Fssr","Server-Side Rendering","SSR means the server builds your HTML before sending it to the user's browser.",1776518297443]