[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post:\u002Fpost\u002Fnextjs-16-the-version-that-stops-pretending-cache-was-simple":3,"categories-en":620},{"post":4,"related":553,"translations":618,"resolved":17},{"id":5,"slug":6,"title":7,"excerpt":8,"image":9,"featured":10,"groupId":11,"publishedAt":12,"readingTime":13,"views":14,"author":15,"category":18,"tags":22,"contentJson":35,"metaTitle":550,"metaDescription":551,"updatedAt":552},"4fce8bd7-aeef-47f2-aa71-75e4432f2401","nextjs-16-the-version-that-stops-pretending-cache-was-simple","Next.js 16: The Version That Stops Pretending Cache Was Simple","Tired of slow builds and invalidating cache? Next.js 16 solves this! With Turbopack now standard, Cache Components for explicit cache control, proxy.ts for Node.js, stable React Compiler, and React 19.2, development becomes faster and more intuitive. Also discover DevTools MCP for AI-assisted debugging.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1773632169148-featured-3pk1lx.jpeg",false,"ee5270a8-5ea3-4010-9a0e-fd45f7252be5","2026-03-22T20:35:46.91+00:00",6,59,{"name":16,"avatar":17},"Genildo Souza",null,{"slug":19,"name":20,"color":21},"frontend","Frontend","#40484f",[23,26,29,32],{"slug":24,"name":25},"react","React",{"slug":27,"name":28},"nextjs","Next.js",{"slug":30,"name":31},"typescript","TypeScript",{"slug":33,"name":34},"javascript","JavaScript",{"type":36,"content":37},"doc",[38,51,53,66,72,78,89,95,107,113,128,134,154,172,180,188,194,206,218,225,231,238,254,272,280,286,298,315,322,337,346,354,360,383,390,402,424,432,438,444,457,465,481,488,496,503,535,547],{"type":39,"attrs":40,"content":42},"blockquote",{"id":41},"quote_v8u14co1",[43],{"type":44,"attrs":45,"content":47},"paragraph",{"id":46},"p_5nzz6m89",[48],{"text":49,"type":50},"If you've ever lost hours debugging why that page wasn't updating — or why the build was taking three minutes for a small project — Next.js 16 was released with you in mind.","text",{"type":52},"horizontalRule",{"type":44,"attrs":54,"content":56},{"id":55},"p_f9twvdyz",[57,59,64],{"text":58,"type":50},"There's a specific moment in the life of every dev using Next.js. You make a change. You run ",{"text":60,"type":50,"marks":61},"npm run build",[62],{"type":63},"code",{"text":65,"type":50},". You wait. You wait a bit longer. The terminal counts the seconds while you drink coffee. You start questioning your life choices.",{"type":44,"attrs":67,"content":69},{"id":68},"p_d2neuijh",[70],{"text":71,"type":50},"And when the build finishes, you deploy — and the page looks exactly the same as before. Because the cache didn't invalidate. And you don't know why.",{"type":44,"attrs":73,"content":75},{"id":74},"p_zje9fgpz",[76],{"text":77,"type":50},"Next.js 16 doesn't solve all the problems in the universe. But it solves exactly these two. And it does so in a way that finally feels intentional — not a set of configurations you stumbled upon in a Reddit thread at 11 PM.",{"type":79,"attrs":80,"content":83},"heading",{"id":81,"level":82},"h_duizthdi",3,[84],{"text":85,"type":50,"marks":86},"Turbopack: From \"Experimental\" to \"This is It\"",[87],{"type":88},"bold",{"type":44,"attrs":90,"content":92},{"id":91},"p_ophcqmfk",[93],{"text":94,"type":50},"Since Next.js 13, Turbopack was that promise on the horizon. Faster than webpack, but too experimental for production use. You'd test it, find some compatibility issue, revert to webpack, and feel guilty.",{"type":44,"attrs":96,"content":98},{"id":97},"p_3mpzxscr",[99,101,105],{"text":100,"type":50},"In 16, the courtship period is over. ",{"text":102,"type":50,"marks":103},"Turbopack is the default bundler",[104],{"type":88},{"text":106,"type":50}," — both in development and production. No flag, no configuration, no hack.",{"type":108,"attrs":109},"image",{"id":110,"alt":111,"src":112,"title":111},"img_q00r94ky","Minimalist flat design, technical diagram, clean vector illustration, dark theme, professional tech blog style. A comparison diagram showing two paths. One path labeled 'Webpack' with a slower, winding arrow. The other path labeled 'Turbopack' with a much faster, straight arrow. Below the Turbopack arrow, a label indicating 'Default' or a checkmark. Represent speed with visual cues like blur or lightning bolts. Do not include text.","http:\u002F\u002Fhailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com\u002Fimage_inference_output%2Ftalkie%2Fprod%2Fimg%2F2026-03-23%2Fc41a66d6-e902-4661-b31b-53ca85f4598e_aigc.jpeg?Expires=1774297957&OSSAccessKeyId=LTAI5tRDTcyEYLLuBEpJRwCi&Signature=Lt2ny52DRQeCz6Vm1O69fBGVukI%3D",{"type":114,"attrs":115},"speedCards",{"id":116,"cards":117,"title":126,"caption":127},"speed_027o191u",[118,122],{"label":119,"value":120,"detail":121},"Fast Refresh","up to 10×","faster than webpack",{"label":123,"value":124,"detail":125},"Production Build","2–5×","less waiting time","Quick Indicators","Metrics and signals that help summarize technical impact with immediate readability.",{"type":44,"attrs":129,"content":131},{"id":130},"p_pymibel8",[132],{"text":133,"type":50},"These numbers are not from artificial benchmarks. More than 50% of development sessions in Next.js 15.3+ were already running Turbopack before the official release — which means it was tested at real scale, with real code, before becoming standard.",{"type":39,"attrs":135,"content":137},{"id":136},"quote_8tx11r76",[138],{"type":44,"attrs":139,"content":141},{"id":140},"p_dh0kob2o",[142,146,148,152],{"text":143,"type":50,"marks":144},"Have custom webpack in your project?",[145],{"type":88},{"text":147,"type":50}," The build will intentionally fail — so your configuration isn't silently ignored. You have two options: migrate the config to Turbopack, or explicitly run with ",{"text":149,"type":50,"marks":150},"next build --webpack",[151],{"type":63},{"text":153,"type":50}," while you migrate.",{"type":44,"attrs":155,"content":157},{"id":156},"p_xjfeinko",[158,160,164,166,170],{"text":159,"type":50},"And there's more: ",{"text":161,"type":50,"marks":162},"Turbopack File System Caching",[163],{"type":88},{"text":165,"type":50}," entered beta. This means compilation artifacts are saved to disk between development server restarts. In a large project, the first ",{"text":167,"type":50,"marks":168},"next dev",[169],{"type":63},{"text":171,"type":50}," of the day will be slow once. After that, it flies.",{"type":173,"attrs":174,"content":177},"codeBlock",{"id":175,"language":17,"highlighted":176},"code_rjivbkz6","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F next.config.ts — habilitar caching em disco (beta)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nextConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  experimental: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    turbopackFileSystemCacheForDev: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> nextConfig;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[178],{"text":179,"type":50},"\u002F\u002F next.config.ts — habilitar caching em disco (beta)\nconst nextConfig = {\n  experimental: {\n    turbopackFileSystemCacheForDev: true,\n  },\n};\n\nexport default nextConfig;",{"type":79,"attrs":181,"content":183},{"id":182,"level":82},"h_834y8ely",[184],{"text":185,"type":50,"marks":186},"Cache Components: Cache You Can Understand",[187],{"type":88},{"type":44,"attrs":189,"content":191},{"id":190},"p_r35k6cxn",[192],{"text":193,"type":50},"This is the most important change in 16. And also the hardest to explain without sounding like documentation.",{"type":44,"attrs":195,"content":197},{"id":196},"p_1nzq44oq",[198,200,204],{"text":199,"type":50},"In previous App Router versions, Next.js implicitly cached things. Static routes were cached. Data fetched with ",{"text":201,"type":50,"marks":202},"fetch",[203],{"type":63},{"text":205,"type":50}," was cached. The general rule existed, but exceptions seemed random — and when something didn't update, you were in the dark trying to understand which part of the system decided that data was 'static'.",{"type":44,"attrs":207,"content":209},{"id":208},"p_dv2nivy7",[210,212,216],{"text":211,"type":50},"Next.js 16 reverses this. ",{"text":213,"type":50,"marks":214},"By default, everything is dynamic.",[215],{"type":88},{"text":217,"type":50}," Nothing is cached unless you explicitly say you want it to be.",{"type":173,"attrs":219,"content":222},{"id":220,"language":17,"highlighted":221},"code_bcto8wqh","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F next.config.ts — ativar Cache Components\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nextConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  cacheComponents: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> nextConfig;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[223],{"text":224,"type":50},"\u002F\u002F next.config.ts — ativar Cache Components\nconst nextConfig = {\n  cacheComponents: true,\n};\n\nexport default nextConfig;",{"type":44,"attrs":226,"content":228},{"id":227},"p_8lr1n6k9",[229],{"text":230,"type":50},"With this activated, you use the `\"use cache\"` directive to explicitly state what you want to cache — an entire page, a specific component, a data-fetching function:",{"type":173,"attrs":232,"content":235},{"id":233,"language":17,"highlighted":234},"code_tmm587je","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Cachear uma função de busca de dados\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> getPosts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  \"use cache\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> res\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"https:\u002F\u002Fapi.blueprint.blog\u002Fposts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> res.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Cachear um componente específico\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  \"use cache\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> getSidebarData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">nav\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{data}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">nav\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[236],{"text":237,"type":50},"\u002F\u002F Cachear uma função de busca de dados\nasync function getPosts() {\n  \"use cache\";\n  const res = await fetch(\"https:\u002F\u002Fapi.blueprint.blog\u002Fposts\");\n  return res.json();\n}\n\n\u002F\u002F Cachear um componente específico\nasync function Sidebar() {\n  \"use cache\";\n  const data = await getSidebarData();\n  return \u003Cnav>{data}\u003C\u002Fnav>;\n}",{"type":239,"attrs":240,"content":243},"callout",{"id":241,"type":242,"title":17},"call_0z1u7e6b","info",[244],{"type":44,"attrs":245,"content":247},{"id":246},"p_1uq8w14e",[248,252],{"text":249,"type":50,"marks":250},"What about PPR (Partial Pre-Rendering)?",[251],{"type":88},{"text":253,"type":50}," Cache Components is the evolution of PPR. The `experimental.ppr` flag has been removed — but the concept survived and improved. Now you don't need to understand the internal mechanism, you just declare what you want to cache.",{"type":44,"attrs":255,"content":257},{"id":256},"p_9kv56pbd",[258,260,264,266,270],{"text":259,"type":50},"More explicit invalidation APIs have also arrived: ",{"text":261,"type":50,"marks":262},"revalidateTag()",[263],{"type":63},{"text":265,"type":50}," with time profiles and ",{"text":267,"type":50,"marks":268},"updateTag()",[269],{"type":63},{"text":271,"type":50}," for instant invalidation after mutations — perfect for dashboards and forms that need to reflect data immediately.",{"type":79,"attrs":273,"content":275},{"id":274,"level":82},"h_9xlaj07p",[276],{"text":277,"type":50,"marks":278},"proxy.ts: Goodbye, middleware.ts",[279],{"type":88},{"type":44,"attrs":281,"content":283},{"id":282},"p_5cgfcesl",[284],{"text":285,"type":50},"This one seems small. It isn't.",{"type":44,"attrs":287,"content":289},{"id":288},"p_ikqc2lta",[290,292,296],{"text":291,"type":50},"The ",{"text":293,"type":50,"marks":294},"middleware.ts",[295],{"type":63},{"text":297,"type":50}," was the file that intercepted requests before they reached your application. It worked — but it ran on the Edge Runtime, which limited what you could do. No native Node.js, no certain libs, no access to certain APIs.",{"type":44,"attrs":299,"content":301},{"id":300},"p_l1oxoa9x",[302,303,307,309,313],{"text":291,"type":50},{"text":304,"type":50,"marks":305},"proxy.ts",[306],{"type":63},{"text":308,"type":50}," replaces it with a crucial difference: ",{"text":310,"type":50,"marks":311},"it runs on Node.js",[312],{"type":88},{"text":314,"type":50},". The migration is mechanical — rename the file, rename the exported function, and the logic remains the same:",{"type":173,"attrs":316,"content":319},{"id":317,"language":17,"highlighted":318},"code_naks4rzv","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Antes: middleware.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> middleware\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> NextResponse.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">redirect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fhome\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, request.url));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Depois: proxy.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> proxy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> NextResponse.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">redirect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> URL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fhome\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, request.url));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[320],{"text":321,"type":50},"\u002F\u002F Antes: middleware.ts\nexport function middleware(request) {\n  return NextResponse.redirect(new URL(\"\u002Fhome\", request.url));\n}\n\n\u002F\u002F Depois: proxy.ts\nexport default function proxy(request) {\n  return NextResponse.redirect(new URL(\"\u002Fhome\", request.url));\n}",{"type":44,"attrs":323,"content":325},{"id":324},"p_z57wkrli",[326,327,330,332,335],{"text":291,"type":50},{"text":293,"type":50,"marks":328},[329],{"type":63},{"text":331,"type":50}," still exists for Edge Runtime cases — but it's deprecated. If you don't have a specific reason for Edge, go with ",{"text":304,"type":50,"marks":333},[334],{"type":63},{"text":336,"type":50},".",{"type":338,"attrs":339},"promoBox",{"id":340,"title":341,"ctaHref":342,"eyebrow":343,"ctaLabel":344,"description":345},"promo_ki4xqdo5","There are other articles that expand on this point","\u002Ftags\u002Freact","Further Reading","Explore articles","If you want to explore this topic from another angle, I've curated related readings with examples and practical applications.",{"type":79,"attrs":347,"content":349},{"id":348,"level":82},"h_k03zia5a",[350],{"text":351,"type":50,"marks":352},"Stable React Compiler + React 19.2",[353],{"type":88},{"type":44,"attrs":355,"content":357},{"id":356},"p_p42e2veb",[358],{"text":359,"type":50},"Two things that were intertwined have arrived stable in 16.",{"type":44,"attrs":361,"content":363},{"id":362},"p_99hudpjs",[364,365,369,371,375,377,381],{"text":291,"type":50},{"text":366,"type":50,"marks":367},"React Compiler",[368],{"type":88},{"text":370,"type":50}," automatically memoizes components. You know that manual work of deciding where to put ",{"text":372,"type":50,"marks":373},"useMemo",[374],{"type":63},{"text":376,"type":50}," and ",{"text":378,"type":50,"marks":379},"useCallback",[380],{"type":63},{"text":382,"type":50},"? The compiler does it for you at build time — without changing a line of code, without new syntax, without extra configuration.",{"type":173,"attrs":384,"content":387},{"id":385,"language":17,"highlighted":386},"code_xil3dr9y","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F next.config.ts — ativar React Compiler (não é padrão ainda)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nextConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  reactCompiler: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> nextConfig;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[388],{"text":389,"type":50},"\u002F\u002F next.config.ts — ativar React Compiler (não é padrão ainda)\nconst nextConfig = {\n  reactCompiler: true,\n};\n\nexport default nextConfig;",{"type":44,"attrs":391,"content":393},{"id":392},"p_hd2zqnm9",[394,396,400],{"text":395,"type":50},"Meanwhile, ",{"text":397,"type":50,"marks":398},"React 19.2",[399],{"type":88},{"text":401,"type":50}," brings three additions that will gradually appear in your daily work:",{"type":44,"attrs":403,"content":405},{"id":404},"p_bltj7agb",[406,410,412,416,418,422],{"text":407,"type":50,"marks":408},"View Transitions",[409],{"type":88},{"text":411,"type":50}," — native animations between navigations, without a library. ",{"text":413,"type":50,"marks":414},"useEffectEvent",[415],{"type":88},{"text":417,"type":50}," — a clean way to extract non-reactive logic from Effects, solving that classic stale closure problem. And ",{"text":419,"type":50,"marks":420},"Activity",[421],{"type":88},{"text":423,"type":50}," — components that 'hibernate' while maintaining state, perfect for tabs and modals that need to persist without being visible.",{"type":79,"attrs":425,"content":427},{"id":426,"level":82},"h_p7a0h4ah",[428],{"text":429,"type":50,"marks":430},"DevTools MCP: Your AI Agent within Next.js",[431],{"type":88},{"type":44,"attrs":433,"content":435},{"id":434},"p_57qvmc4m",[436],{"text":437,"type":50},"This is the most experimental on the list — but the most interesting depending on how you work.",{"type":44,"attrs":439,"content":441},{"id":440},"p_wbwcgwb9",[442],{"text":443,"type":50},"Next.js 16 natively implements the Model Context Protocol. This means an AI agent connected to your development environment gains access to the real application context: unified browser and server logs, automatic stack traces, understanding of the active route, caching, and rendering behavior.",{"type":44,"attrs":445,"content":447},{"id":446},"p_4acmr0zp",[448,450,455],{"text":449,"type":50},"Instead of copying an error to paste into a chat, the agent ",{"text":451,"type":50,"marks":452},"sees",[453],{"type":454},"italic",{"text":456,"type":50}," what's happening. It's the first step towards AI-assisted debugging that doesn't rely on you translating the problem into words.",{"type":79,"attrs":458,"content":460},{"id":459,"level":82},"h_a4udcfau",[461],{"text":462,"type":50,"marks":463},"How to Update",[464],{"type":88},{"type":44,"attrs":466,"content":468},{"id":467},"p_4ervasmn",[469,471,474,476,479],{"text":470,"type":50},"Vercel has provided an automatic codemod that handles most migrations — including renaming ",{"text":293,"type":50,"marks":472},[473],{"type":63},{"text":475,"type":50}," to ",{"text":304,"type":50,"marks":477},[478],{"type":63},{"text":480,"type":50}," and adjusting asynchronous params APIs:",{"type":173,"attrs":482,"content":485},{"id":483,"language":17,"highlighted":484},"code_4h22ziks","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">npx @next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">codemod@canary upgrade latest\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[486],{"text":487,"type":50},"npx @next\u002Fcodemod@canary upgrade latest",{"type":44,"attrs":489,"content":491},{"id":490},"p_98n5va4w",[492,494],{"type":493},"hardBreak",{"text":495,"type":50},"To update manually:",{"type":173,"attrs":497,"content":500},{"id":498,"language":17,"highlighted":499},"code_s0h0kc58","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">npm install next@latest react@latest react\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">dom@latest\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[501],{"text":502,"type":50},"npm install next@latest react@latest react-dom@latest",{"type":239,"attrs":504,"content":507},{"id":505,"type":506,"title":17},"call_8jieutuj","tip",[508],{"type":44,"attrs":509,"content":511},{"id":510},"p_fvhdftso",[512,516,518,522,523,527,529,533],{"text":513,"type":50,"marks":514},"No breaking changes in the default App Router?",[515],{"type":88},{"text":517,"type":50}," Almost. The most relevant change is that ",{"text":519,"type":50,"marks":520},"params",[521],{"type":63},{"text":376,"type":50},{"text":524,"type":50,"marks":525},"searchParams",[526],{"type":63},{"text":528,"type":50}," are now completely asynchronous — you need ",{"text":530,"type":50,"marks":531},"await",[532],{"type":63},{"text":534,"type":50}," before accessing them. The codemod automatically resolves this in most cases.",{"type":536,"attrs":537},"summaryBox",{"id":538,"items":539,"title":546},"sum_30a2m8u1",[540,541,542,543,544,545],"Turbopack by default — faster builds without any configuration.","Explicit Cache — what doesn't have \"use cache\" is dynamic. No more guesswork.","proxy.ts — rename the file, gain Node.js runtime in the interceptor.","React Compiler — automatic memoization, less manual optimization code.","View Transitions — navigation animations without an external library.","DevTools MCP — AI agent with real application context.","What Really Changes in Your Day-to-Day",{"type":44,"attrs":548},{"id":549},"p_1rd33hwj","Next.js 16: Turbopack Standard, Explicit Cache, and AI DevTools","Discover what's new in Next.js 16: standard Turbopack, explicit Cache Components, proxy.ts, React Compiler, React 19.2, and AI DevTools for faster and more intuitive development.","2026-08-24T14:53:53.315534+00:00",[554,573,587,601],{"id":555,"slug":556,"title":557,"excerpt":558,"image":559,"featured":10,"groupId":560,"publishedAt":561,"readingTime":562,"views":563,"author":564,"category":565,"tags":566},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg","bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,0,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[567,570],{"slug":568,"name":569},"css","CSS",{"slug":571,"name":572},"performance","Performance",{"id":574,"slug":575,"title":576,"excerpt":577,"image":578,"featured":10,"groupId":579,"publishedAt":580,"readingTime":581,"views":563,"author":582,"category":583,"tags":584},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",14,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[585,586],{"slug":33,"name":34},{"slug":24,"name":25},{"id":588,"slug":589,"title":590,"excerpt":591,"image":592,"featured":10,"groupId":593,"publishedAt":594,"readingTime":595,"views":563,"author":596,"category":597,"tags":598},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[599,600],{"slug":568,"name":569},{"slug":571,"name":572},{"id":602,"slug":603,"title":604,"excerpt":605,"image":606,"featured":10,"groupId":607,"publishedAt":608,"readingTime":609,"views":563,"author":610,"category":611,"tags":612},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":16,"avatar":17},{"slug":19,"name":20,"color":21},[613,616,617],{"slug":614,"name":615},"angular","Angular",{"slug":33,"name":34},{"slug":30,"name":31},{"pt":619,"en":6},"nextjs-16-a-versao-que-para-de-fingir-que-o-cache-era-simples",[621,624,630,636,642],{"id":622,"slug":19,"name":20,"colorHex":21,"iconName":17,"postCount":623},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9",25,{"id":625,"slug":626,"name":627,"colorHex":628,"iconName":17,"postCount":629},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":631,"slug":632,"name":633,"colorHex":634,"iconName":635,"postCount":581},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",{"id":637,"slug":638,"name":639,"colorHex":640,"iconName":17,"postCount":641},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":643,"slug":644,"name":645,"colorHex":646,"iconName":647,"postCount":648},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2]