[{"data":1,"prerenderedAt":2091},["ShallowReactive",2],{"blog-\u002Fblog\u002Fnuqs-because-urls-should-do-more":3},{"id":4,"title":5,"body":6,"canonical":2079,"date":2080,"description":2081,"draft":2082,"extension":2083,"lang":2084,"meta":2085,"navigation":376,"path":2086,"readingTime":2087,"seo":2088,"stem":2089,"__hash__":2090},"blog\u002Fblog\u002Fnuqs-because-urls-should-do-more.md","Nuqs: Because URLs Should Do More",{"type":7,"value":8,"toc":2061},"minimark",[9,14,22,25,28,31,34,40,45,50,55,60,65,70,73,76,81,84,91,97,100,107,110,113,117,120,125,132,142,149,152,163,169,173,184,187,192,199,206,210,219,226,232,235,238,243,247,250,253,257,260,318,321,325,328,331,512,515,518,522,525,528,531,534,1122,1126,1142,1150,1153,1156,1160,1163,1167,1170,1196,1200,1207,1331,1335,1338,1946,1949,1969,1973,1979,1985,2004,2019,2023,2030,2041,2051,2057],[10,11,13],"h3",{"id":12},"move-beyond-local-state-go-beyond-plus-ultra","Move beyond local state — Go beyond, plus ultra.",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F665\u002F1*KUe2LG5cA3cR80GodnXW8A.jpeg",[15,23,24],{},"Valentine's Day. I had planned it down to perfection. The right place, the right atmosphere, the right seat — because ambiance matters, and I wanted this night to be unforgettable. I took my time picking the best spot, ensuring that when we arrived, everything would be set.",[15,26,27],{},"The booking was seamless, no friction at all. In fact, I could have sworn it was the smoothest reservation experience I'd ever had — like a moment of rare perfection in a world of chaos. But then, the moment of truth arrived.",[15,29,30],{},"I stepped in, walked up confidently to my designated table… and someone else was already sitting there.",[15,32,33],{},"I approached the host.",[15,35,36],{},[37,38,39],"em",{},"\"Excuse me, I had a reservation for this spot.\"",[15,41,42],{},[37,43,44],{},"\"Ah, yes. Unfortunately, it's already occupied.\"",[15,46,47],{},[37,48,49],{},"\"I don't understand. I made a reservation. Do you have my reservation?\"",[15,51,52],{},[37,53,54],{},"\"Yes, we do, but the table is taken.\"",[15,56,57],{},[37,58,59],{},"\"But the reservation keeps the table here? That's why you have the reservation!\"",[15,61,62],{},[37,63,64],{},"\"I understand, sir, but — \"",[15,66,67],{},[37,68,69],{},"\"No, I don't think you do! You see, you know how to take a reservation, but you don't know how to hold the reservation. And really, the holding is the most important part of the reservation. Anybody can just take them!\"",[15,71,72],{},"The host blinked. I sighed. My girlfriend looked at me, amused but also wondering if she should start looking up alternatives. I, on the other hand, felt like I was in a sitcom episode, living out the very definition of modern frustration.",[15,74,75],{},"But this isn't just about restaurants.",[77,78,80],"h2",{"id":79},"the-lost-spots-of-everyday-life","The Lost Spots of Everyday Life",[15,82,83],{},"Think about it. You've been here before, maybe not in a restaurant, but in some other equally annoying scenario.",[15,85,86,87,90],{},"Ever asked a friend to save you a seat in class, only to come back and find someone else sitting there, and your friend just shrugs like, ",[37,88,89],{},"\"I tried, bro.\"","?",[15,92,93,94],{},"Or maybe you've been in a long queue, patiently waiting for your turn, and then — just for a moment — you step away. Maybe to grab something, maybe just to stretch. And when you return, the person behind you has edged forward, pretending like they've been next all along. You try to reason with them, but they just stare at you blankly like, ",[37,95,96],{},"\"I didn't see you there.\"",[15,98,99],{},"Or the worst — boarding a bus or train, where you find the perfect seat by the window. You drop your bag on it, step out for a second, and by the time you return, someone is already comfortably seated like they paid for the spot in blood.",[15,101,102,103],{},"These little moments of frustration add up. Because in all of them, there's one underlying expectation: ",[104,105,106],"strong",{},"something should have held your place.",[15,108,109],{},"But it didn't.",[15,111,112],{},"And if you think that's bad, let's talk about when this happens online.",[77,114,116],{"id":115},"the-digital-version-of-losing-your-spot","The Digital Version of Losing Your Spot",[15,118,119],{},"You're browsing through an online store, carefully filtering for the perfect item. You've selected the color, size, and quantity. Maybe you even checked the reviews. And then — oh, a notification pops up. You leave for just a second, come back, and refresh the page.",[15,121,122],{},[104,123,124],{},"Boom. Everything is gone.",[15,126,127,128,131],{},"Or maybe you're halfway through filling out a long, annoying form. You get distracted, switch tabs, and when you return — ",[104,129,130],{},"everything is wiped."," The form has reset like you were never there.",[15,133,134,135,138,139],{},"Or worse, you find a great article, read halfway, and want to share it with a friend. You copy the link, send it over, but when they open it — ",[104,136,137],{},"it doesn't show what you were looking at."," They're at the homepage, lost and confused, asking, ",[37,140,141],{},"\"What exactly did you want me to see?\"",[15,143,144,145,148],{},"It's like telling a friend, ",[37,146,147],{},"\"Meet me at that cool café,\""," only for them to show up at a random gas station because, for some reason, your directions didn't hold.",[15,150,151],{},"And this is where websites mess up.",[15,153,154,155,158,159,162],{},"Just like my reservation should have ensured my seat remained mine, and just like your place in a queue should be honored, URL states should ",[104,156,157],{},"preserve user context."," Whether it's form inputs, filters, pagination, scroll positions, or shared links, your app should know how to ",[104,160,161],{},"hold"," a state, not just take it.",[15,164,165,166],{},"Because let's be honest — ",[104,167,168],{},"anybody can take them.",[77,170,172],{"id":171},"fixing-the-reservation-problem-url-as-a-state-manager","Fixing the Reservation Problem: URL as a State Manager",[15,174,175,176,179,180,183],{},"Imagine if reservations worked like URLs. Instead of relying on a fragile, easily-overwritten system, the restaurant would store all reservation details in a ",[37,177,178],{},"permanent, accessible"," way. No mix-ups, no surprises. Your table would be marked, ",[37,181,182],{},"and that information would persist",".",[15,185,186],{},"This is exactly how URLs should work in web applications. A well-managed URL state ensures that user context is never lost — whether it's search filters, form inputs, pagination, or even scroll position. When a user refreshes, switches devices, or shares a link, everything should stay exactly as they left it.",[15,188,189],{},[104,190,191],{},"So how do we fix the problem?",[15,193,194,195,198],{},"Instead of treating URLs as just links, we should treat them as ",[104,196,197],{},"state managers"," — a single source of truth that keeps track of where users are and what they're doing.",[15,200,201,202,205],{},"And this is where ",[37,203,204],{},"nuqs"," comes in.",[77,207,209],{"id":208},"nuqs-making-url-state-management-effortless","Nuqs: Making URL State Management Effortless",[15,211,212,213,215,216,218],{},"One of my favorite tools to use is ",[104,214,204],{},". I first discovered ",[37,217,204],{}," last year while revamping a project, and it instantly clicked. It felt like using useState, but for URLs.",[15,220,221,222,225],{},"It was seamless — like a reservation system that actually works. No weird resets, no lost state, just smooth navigation. It integrates beautifully with both server and client environments, and with the rise of ",[104,223,224],{},"SSR",", it's a game-changer.",[15,227,228,229,90],{},"And if you're using ",[104,230,231],{},"Next.js",[15,233,234],{},"Well, let's just say you've got yourself the perfect date.",[15,236,237],{},"So, whether it's a dinner reservation, a classroom seat, or your place in a digital space, remember this:",[15,239,240],{},[104,241,242],{},"Taking a spot is easy. Holding it is what truly matters.",[77,244,246],{"id":245},"setting-up-nuqs-keeping-your-spot-in-the-digital-world","Setting Up Nuqs: Keeping Your Spot in the Digital World",[15,248,249],{},"A reservation system that actually works — that's what I needed. Not just for dinner, but for my apps. No more lost filters, wiped-out forms, or reset states. If I left something exactly the way I wanted it, I expected it to stay that way.",[15,251,252],{},"That's where Nuqs came in. But before I could fully enjoy its magic, I had to set it up properly. Just like how you don't walk into a restaurant and expect a table to set itself, you need to prepare your app to hold state effortlessly.",[77,254,256],{"id":255},"step-1-installing-nuqs","Step 1: Installing Nuqs",[15,258,259],{},"The first step was making sure Nuqs was in my project. Installing it was as easy as reserving a spot with a single click:",[261,262,266],"pre",{"className":263,"code":264,"language":265,"meta":20,"style":20},"language-bash shiki shiki-themes github-light github-dark","pnpm add nuqs\n# or\nnpm install nuqs\n# or\nyarn add nuqs\n","bash",[267,268,269,285,292,303,308],"code",{"__ignoreMap":20},[270,271,274,278,282],"span",{"class":272,"line":273},"line",1,[270,275,277],{"class":276},"sScJk","pnpm",[270,279,281],{"class":280},"sZZnC"," add",[270,283,284],{"class":280}," nuqs\n",[270,286,288],{"class":272,"line":287},2,[270,289,291],{"class":290},"sJ8bj","# or\n",[270,293,295,298,301],{"class":272,"line":294},3,[270,296,297],{"class":276},"npm",[270,299,300],{"class":280}," install",[270,302,284],{"class":280},[270,304,306],{"class":272,"line":305},4,[270,307,291],{"class":290},[270,309,311,314,316],{"class":272,"line":310},5,[270,312,313],{"class":276},"yarn",[270,315,281],{"class":280},[270,317,284],{"class":280},[15,319,320],{},"With that done, I was one step closer to never losing my place again.",[77,322,324],{"id":323},"step-2-configuring-nuqs-in-the-root-layout","Step 2: Configuring Nuqs in the Root Layout",[15,326,327],{},"Just like a restaurant needs a reservation system in place, my app needed Nuqs to be present across all pages. The best way to do that? Wrap the entire application in a provider that ensures state persistence across routes.",[15,329,330],{},"In my app.tsx, I set up Nuqs like this:",[261,332,336],{"className":333,"code":334,"language":335,"meta":20,"style":20},"language-tsx shiki shiki-themes github-light github-dark","import { NuqsAdapter } from 'nuqs\u002Fadapters\u002Fnext\u002Fapp'\nimport { type ReactNode } from 'react'\n\nexport default function RootLayout({\n  children\n}: {\n  children: ReactNode\n}) {\n  return (\n    \u003Chtml>\n      \u003Cbody>\n        \u003CNuqsAdapter>{children}\u003C\u002FNuqsAdapter>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n","tsx",[267,337,338,354,372,378,395,401,413,424,430,439,452,463,480,490,500,506],{"__ignoreMap":20},[270,339,340,344,348,351],{"class":272,"line":273},[270,341,343],{"class":342},"szBVR","import",[270,345,347],{"class":346},"sVt8B"," { NuqsAdapter } ",[270,349,350],{"class":342},"from",[270,352,353],{"class":280}," 'nuqs\u002Fadapters\u002Fnext\u002Fapp'\n",[270,355,356,358,361,364,367,369],{"class":272,"line":287},[270,357,343],{"class":342},[270,359,360],{"class":346}," { ",[270,362,363],{"class":342},"type",[270,365,366],{"class":346}," ReactNode } ",[270,368,350],{"class":342},[270,370,371],{"class":280}," 'react'\n",[270,373,374],{"class":272,"line":294},[270,375,377],{"emptyLinePlaceholder":376},true,"\n",[270,379,380,383,386,389,392],{"class":272,"line":305},[270,381,382],{"class":342},"export",[270,384,385],{"class":342}," default",[270,387,388],{"class":342}," function",[270,390,391],{"class":276}," RootLayout",[270,393,394],{"class":346},"({\n",[270,396,397],{"class":272,"line":310},[270,398,400],{"class":399},"s4XuR","  children\n",[270,402,404,407,410],{"class":272,"line":403},6,[270,405,406],{"class":346},"}",[270,408,409],{"class":342},":",[270,411,412],{"class":346}," {\n",[270,414,416,419,421],{"class":272,"line":415},7,[270,417,418],{"class":399},"  children",[270,420,409],{"class":342},[270,422,423],{"class":276}," ReactNode\n",[270,425,427],{"class":272,"line":426},8,[270,428,429],{"class":346},"}) {\n",[270,431,433,436],{"class":272,"line":432},9,[270,434,435],{"class":342},"  return",[270,437,438],{"class":346}," (\n",[270,440,442,445,449],{"class":272,"line":441},10,[270,443,444],{"class":346},"    \u003C",[270,446,448],{"class":447},"s9eBZ","html",[270,450,451],{"class":346},">\n",[270,453,455,458,461],{"class":272,"line":454},11,[270,456,457],{"class":346},"      \u003C",[270,459,460],{"class":447},"body",[270,462,451],{"class":346},[270,464,466,469,473,476,478],{"class":272,"line":465},12,[270,467,468],{"class":346},"        \u003C",[270,470,472],{"class":471},"sj4cs","NuqsAdapter",[270,474,475],{"class":346},">{children}\u003C\u002F",[270,477,472],{"class":471},[270,479,451],{"class":346},[270,481,483,486,488],{"class":272,"line":482},13,[270,484,485],{"class":346},"      \u003C\u002F",[270,487,460],{"class":447},[270,489,451],{"class":346},[270,491,493,496,498],{"class":272,"line":492},14,[270,494,495],{"class":346},"    \u003C\u002F",[270,497,448],{"class":447},[270,499,451],{"class":346},[270,501,503],{"class":272,"line":502},15,[270,504,505],{"class":346},"  )\n",[270,507,509],{"class":272,"line":508},16,[270,510,511],{"class":346},"}\n",[15,513,514],{},"This was like having the maître d' of my app, making sure everything stayed exactly where it was supposed to.",[15,516,517],{},"And just like that, my application was ready. But what good is a reservation system if you don't use it? It was time to put Nuqs into action.",[77,519,521],{"id":520},"basic-usage-the-counter-that-remembers","Basic Usage: The Counter That Remembers",[15,523,524],{},"Now, let's talk about an everyday situation where Nuqs shines.",[15,526,527],{},"Imagine you're counting something important — maybe reps at the gym, the number of coffees you've had today, or how many times you've reloaded Twitter. Now imagine refreshing the page and losing count. Frustrating, right?",[15,529,530],{},"That's where Nuqs steps in.",[15,532,533],{},"Take a look at this simple counter demo.",[261,535,537],{"className":333,"code":536,"language":335,"meta":20,"style":20},"\u002F\u002F client.tsx\n\n'use client';\n\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton';\nimport { Minus, Plus } from 'lucide-react';\nimport { parseAsInteger, useQueryState } from 'nuqs';\n\nexport default function BasicCounterDemoPage() {\n  const [counter, setCounter] = useQueryState(\n    'counter',\n    parseAsInteger.withDefault(0)\n  );\n\n  return (\n    \u003Cdiv className='min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-indigo-50'>\n      \u003Cdiv className='bg-white p-8 rounded-xl shadow-lg'>\n        \u003Ch1 className='text-3xl font-bold text-gray-800 mb-6 text-center'>\n          Interactive Counter\n        \u003C\u002Fh1>\n        \u003Cdiv className='flex flex-col items-center gap-6'>\n          \u003Cspan className='text-4xl font-bold text-indigo-600 tabular-nums'>\n            {counter}\n          \u003C\u002Fspan>\n          \u003Cdiv className='flex items-center gap-4'>\n            \u003CButton\n              onClick={() => setCounter((x) => Math.max(1, x - 1))}\n              className='bg-indigo-600 hover:bg-indigo-700 transition-colors'\n            >\n              \u003CMinus className='w-5 h-5' \u002F>\n            \u003C\u002FButton>\n            \u003CButton\n              onClick={() => setCounter((x) => x + 1)}\n              className='bg-indigo-600 hover:bg-indigo-700 transition-colors'\n            >\n              \u003CPlus className='w-5 h-5' \u002F>\n            \u003C\u002FButton>\n          \u003C\u002Fdiv>\n          \u003CButton\n            onClick={() => setCounter(null)}\n            variant='outline'\n            className='text-indigo-600 border-indigo-600 hover:bg-indigo-50'\n          >\n            Reset Counter\n          \u003C\u002FButton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n}\n",[267,538,539,544,548,556,560,574,588,602,606,620,649,657,674,679,683,689,706,722,739,745,755,771,788,794,804,820,829,880,891,897,916,927,934,966,975,980,996,1005,1014,1021,1042,1053,1064,1070,1076,1085,1094,1103,1112,1117],{"__ignoreMap":20},[270,540,541],{"class":272,"line":273},[270,542,543],{"class":290},"\u002F\u002F client.tsx\n",[270,545,546],{"class":272,"line":287},[270,547,377],{"emptyLinePlaceholder":376},[270,549,550,553],{"class":272,"line":294},[270,551,552],{"class":280},"'use client'",[270,554,555],{"class":346},";\n",[270,557,558],{"class":272,"line":305},[270,559,377],{"emptyLinePlaceholder":376},[270,561,562,564,567,569,572],{"class":272,"line":310},[270,563,343],{"class":342},[270,565,566],{"class":346}," { Button } ",[270,568,350],{"class":342},[270,570,571],{"class":280}," '@\u002Fcomponents\u002Fui\u002Fbutton'",[270,573,555],{"class":346},[270,575,576,578,581,583,586],{"class":272,"line":403},[270,577,343],{"class":342},[270,579,580],{"class":346}," { Minus, Plus } ",[270,582,350],{"class":342},[270,584,585],{"class":280}," 'lucide-react'",[270,587,555],{"class":346},[270,589,590,592,595,597,600],{"class":272,"line":415},[270,591,343],{"class":342},[270,593,594],{"class":346}," { parseAsInteger, useQueryState } ",[270,596,350],{"class":342},[270,598,599],{"class":280}," 'nuqs'",[270,601,555],{"class":346},[270,603,604],{"class":272,"line":426},[270,605,377],{"emptyLinePlaceholder":376},[270,607,608,610,612,614,617],{"class":272,"line":432},[270,609,382],{"class":342},[270,611,385],{"class":342},[270,613,388],{"class":342},[270,615,616],{"class":276}," BasicCounterDemoPage",[270,618,619],{"class":346},"() {\n",[270,621,622,625,628,631,634,637,640,643,646],{"class":272,"line":441},[270,623,624],{"class":342},"  const",[270,626,627],{"class":346}," [",[270,629,630],{"class":471},"counter",[270,632,633],{"class":346},", ",[270,635,636],{"class":471},"setCounter",[270,638,639],{"class":346},"] ",[270,641,642],{"class":342},"=",[270,644,645],{"class":276}," useQueryState",[270,647,648],{"class":346},"(\n",[270,650,651,654],{"class":272,"line":454},[270,652,653],{"class":280},"    'counter'",[270,655,656],{"class":346},",\n",[270,658,659,662,665,668,671],{"class":272,"line":465},[270,660,661],{"class":346},"    parseAsInteger.",[270,663,664],{"class":276},"withDefault",[270,666,667],{"class":346},"(",[270,669,670],{"class":471},"0",[270,672,673],{"class":346},")\n",[270,675,676],{"class":272,"line":482},[270,677,678],{"class":346},"  );\n",[270,680,681],{"class":272,"line":492},[270,682,377],{"emptyLinePlaceholder":376},[270,684,685,687],{"class":272,"line":502},[270,686,435],{"class":342},[270,688,438],{"class":346},[270,690,691,693,696,699,701,704],{"class":272,"line":508},[270,692,444],{"class":346},[270,694,695],{"class":447},"div",[270,697,698],{"class":276}," className",[270,700,642],{"class":342},[270,702,703],{"class":280},"'min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-indigo-50'",[270,705,451],{"class":346},[270,707,709,711,713,715,717,720],{"class":272,"line":708},17,[270,710,457],{"class":346},[270,712,695],{"class":447},[270,714,698],{"class":276},[270,716,642],{"class":342},[270,718,719],{"class":280},"'bg-white p-8 rounded-xl shadow-lg'",[270,721,451],{"class":346},[270,723,725,727,730,732,734,737],{"class":272,"line":724},18,[270,726,468],{"class":346},[270,728,729],{"class":447},"h1",[270,731,698],{"class":276},[270,733,642],{"class":342},[270,735,736],{"class":280},"'text-3xl font-bold text-gray-800 mb-6 text-center'",[270,738,451],{"class":346},[270,740,742],{"class":272,"line":741},19,[270,743,744],{"class":346},"          Interactive Counter\n",[270,746,748,751,753],{"class":272,"line":747},20,[270,749,750],{"class":346},"        \u003C\u002F",[270,752,729],{"class":447},[270,754,451],{"class":346},[270,756,758,760,762,764,766,769],{"class":272,"line":757},21,[270,759,468],{"class":346},[270,761,695],{"class":447},[270,763,698],{"class":276},[270,765,642],{"class":342},[270,767,768],{"class":280},"'flex flex-col items-center gap-6'",[270,770,451],{"class":346},[270,772,774,777,779,781,783,786],{"class":272,"line":773},22,[270,775,776],{"class":346},"          \u003C",[270,778,270],{"class":447},[270,780,698],{"class":276},[270,782,642],{"class":342},[270,784,785],{"class":280},"'text-4xl font-bold text-indigo-600 tabular-nums'",[270,787,451],{"class":346},[270,789,791],{"class":272,"line":790},23,[270,792,793],{"class":346},"            {counter}\n",[270,795,797,800,802],{"class":272,"line":796},24,[270,798,799],{"class":346},"          \u003C\u002F",[270,801,270],{"class":447},[270,803,451],{"class":346},[270,805,807,809,811,813,815,818],{"class":272,"line":806},25,[270,808,776],{"class":346},[270,810,695],{"class":447},[270,812,698],{"class":276},[270,814,642],{"class":342},[270,816,817],{"class":280},"'flex items-center gap-4'",[270,819,451],{"class":346},[270,821,823,826],{"class":272,"line":822},26,[270,824,825],{"class":346},"            \u003C",[270,827,828],{"class":471},"Button\n",[270,830,832,835,837,840,843,846,849,852,855,857,860,863,865,868,871,874,877],{"class":272,"line":831},27,[270,833,834],{"class":276},"              onClick",[270,836,642],{"class":342},[270,838,839],{"class":346},"{() ",[270,841,842],{"class":342},"=>",[270,844,845],{"class":276}," setCounter",[270,847,848],{"class":346},"((",[270,850,851],{"class":399},"x",[270,853,854],{"class":346},") ",[270,856,842],{"class":342},[270,858,859],{"class":346}," Math.",[270,861,862],{"class":276},"max",[270,864,667],{"class":346},[270,866,867],{"class":471},"1",[270,869,870],{"class":346},", x ",[270,872,873],{"class":342},"-",[270,875,876],{"class":471}," 1",[270,878,879],{"class":346},"))}\n",[270,881,883,886,888],{"class":272,"line":882},28,[270,884,885],{"class":276},"              className",[270,887,642],{"class":342},[270,889,890],{"class":280},"'bg-indigo-600 hover:bg-indigo-700 transition-colors'\n",[270,892,894],{"class":272,"line":893},29,[270,895,896],{"class":346},"            >\n",[270,898,900,903,906,908,910,913],{"class":272,"line":899},30,[270,901,902],{"class":346},"              \u003C",[270,904,905],{"class":471},"Minus",[270,907,698],{"class":276},[270,909,642],{"class":342},[270,911,912],{"class":280},"'w-5 h-5'",[270,914,915],{"class":346}," \u002F>\n",[270,917,919,922,925],{"class":272,"line":918},31,[270,920,921],{"class":346},"            \u003C\u002F",[270,923,924],{"class":471},"Button",[270,926,451],{"class":346},[270,928,930,932],{"class":272,"line":929},32,[270,931,825],{"class":346},[270,933,828],{"class":471},[270,935,937,939,941,943,945,947,949,951,953,955,958,961,963],{"class":272,"line":936},33,[270,938,834],{"class":276},[270,940,642],{"class":342},[270,942,839],{"class":346},[270,944,842],{"class":342},[270,946,845],{"class":276},[270,948,848],{"class":346},[270,950,851],{"class":399},[270,952,854],{"class":346},[270,954,842],{"class":342},[270,956,957],{"class":346}," x ",[270,959,960],{"class":342},"+",[270,962,876],{"class":471},[270,964,965],{"class":346},")}\n",[270,967,969,971,973],{"class":272,"line":968},34,[270,970,885],{"class":276},[270,972,642],{"class":342},[270,974,890],{"class":280},[270,976,978],{"class":272,"line":977},35,[270,979,896],{"class":346},[270,981,983,985,988,990,992,994],{"class":272,"line":982},36,[270,984,902],{"class":346},[270,986,987],{"class":471},"Plus",[270,989,698],{"class":276},[270,991,642],{"class":342},[270,993,912],{"class":280},[270,995,915],{"class":346},[270,997,999,1001,1003],{"class":272,"line":998},37,[270,1000,921],{"class":346},[270,1002,924],{"class":471},[270,1004,451],{"class":346},[270,1006,1008,1010,1012],{"class":272,"line":1007},38,[270,1009,799],{"class":346},[270,1011,695],{"class":447},[270,1013,451],{"class":346},[270,1015,1017,1019],{"class":272,"line":1016},39,[270,1018,776],{"class":346},[270,1020,828],{"class":471},[270,1022,1024,1027,1029,1031,1033,1035,1037,1040],{"class":272,"line":1023},40,[270,1025,1026],{"class":276},"            onClick",[270,1028,642],{"class":342},[270,1030,839],{"class":346},[270,1032,842],{"class":342},[270,1034,845],{"class":276},[270,1036,667],{"class":346},[270,1038,1039],{"class":471},"null",[270,1041,965],{"class":346},[270,1043,1045,1048,1050],{"class":272,"line":1044},41,[270,1046,1047],{"class":276},"            variant",[270,1049,642],{"class":342},[270,1051,1052],{"class":280},"'outline'\n",[270,1054,1056,1059,1061],{"class":272,"line":1055},42,[270,1057,1058],{"class":276},"            className",[270,1060,642],{"class":342},[270,1062,1063],{"class":280},"'text-indigo-600 border-indigo-600 hover:bg-indigo-50'\n",[270,1065,1067],{"class":272,"line":1066},43,[270,1068,1069],{"class":346},"          >\n",[270,1071,1073],{"class":272,"line":1072},44,[270,1074,1075],{"class":346},"            Reset Counter\n",[270,1077,1079,1081,1083],{"class":272,"line":1078},45,[270,1080,799],{"class":346},[270,1082,924],{"class":471},[270,1084,451],{"class":346},[270,1086,1088,1090,1092],{"class":272,"line":1087},46,[270,1089,750],{"class":346},[270,1091,695],{"class":447},[270,1093,451],{"class":346},[270,1095,1097,1099,1101],{"class":272,"line":1096},47,[270,1098,485],{"class":346},[270,1100,695],{"class":447},[270,1102,451],{"class":346},[270,1104,1106,1108,1110],{"class":272,"line":1105},48,[270,1107,495],{"class":346},[270,1109,695],{"class":447},[270,1111,451],{"class":346},[270,1113,1115],{"class":272,"line":1114},49,[270,1116,678],{"class":346},[270,1118,1120],{"class":272,"line":1119},50,[270,1121,511],{"class":346},[77,1123,1125],{"id":1124},"how-it-works","How It Works",[1127,1128,1129,1133,1136,1139],"ul",{},[1130,1131,1132],"li",{},"The counter state is stored in the URL as ?counter=number.",[1130,1134,1135],{},"Clicking Plus (+) or Minus (-) updates the value while keeping it in sync.",[1130,1137,1138],{},"Clicking Reset removes the state from the URL.",[1130,1140,1141],{},"Even if the user refreshes the page or shares the link, the counter value remains intact.",[15,1143,1144,1147],{},[18,1145],{"alt":20,"src":1146},"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1024\u002F1*-7t31FDkCiVe9_fFN723tQ.gif",[37,1148,1149],{},"Nuqs Counter Demo",[15,1151,1152],{},"It's like saving your seat and coming back to find it exactly where you left it. No mix-ups. No \"Sorry, we gave it away.\" Just seamless, reliable state persistence.",[15,1154,1155],{},"With Nuqs, my app wasn't just taking reservations — it was holding them. And that made all the difference.",[77,1157,1159],{"id":1158},"building-a-comprehensive-table","Building a Comprehensive Table",[15,1161,1162],{},"Reserving a table is great, but what if you need a whole VIP section? In a dynamic app, handling more complex state persistence becomes crucial. That's where an advanced table setup comes in.",[77,1164,1166],{"id":1165},"advanced-tables-where-nuqs-shines","Advanced Tables: Where Nuqs Shines",[15,1168,1169],{},"A table is a great next step because it introduces:",[1127,1171,1172,1178,1184,1190],{},[1130,1173,1174,1177],{},[104,1175,1176],{},"Sorting"," — Allow users to order data dynamically",[1130,1179,1180,1183],{},[104,1181,1182],{},"Filtering"," — Let users refine what they see",[1130,1185,1186,1189],{},[104,1187,1188],{},"Pagination"," — Efficiently manage large datasets",[1130,1191,1192,1195],{},[104,1193,1194],{},"State Persistence"," — Keep everything in sync via the URL",[77,1197,1199],{"id":1198},"setting-up-the-server-action","Setting Up the Server Action",[15,1201,1202,1203,1206],{},"First, let's create a ",[104,1204,1205],{},"server action"," to fetch data based on query parameters:",[261,1208,1212],{"className":1209,"code":1210,"language":1211,"meta":20,"style":20},"language-ts shiki shiki-themes github-light github-dark","'use server'\n\nimport { getDatabaseResults } from '@\u002Fsrc\u002Flib\u002Fdb'\n\nexport async function fetchTableData({ page, sort, filter }: {\n  page?: number;\n  sort?: string;\n  filter?: string;\n}) {\n  return await getDatabaseResults({ page, sort, filter });\n}\n","ts",[267,1213,1214,1219,1223,1235,1239,1274,1287,1299,1310,1314,1327],{"__ignoreMap":20},[270,1215,1216],{"class":272,"line":273},[270,1217,1218],{"class":280},"'use server'\n",[270,1220,1221],{"class":272,"line":287},[270,1222,377],{"emptyLinePlaceholder":376},[270,1224,1225,1227,1230,1232],{"class":272,"line":294},[270,1226,343],{"class":342},[270,1228,1229],{"class":346}," { getDatabaseResults } ",[270,1231,350],{"class":342},[270,1233,1234],{"class":280}," '@\u002Fsrc\u002Flib\u002Fdb'\n",[270,1236,1237],{"class":272,"line":305},[270,1238,377],{"emptyLinePlaceholder":376},[270,1240,1241,1243,1246,1248,1251,1254,1257,1259,1262,1264,1267,1270,1272],{"class":272,"line":310},[270,1242,382],{"class":342},[270,1244,1245],{"class":342}," async",[270,1247,388],{"class":342},[270,1249,1250],{"class":276}," fetchTableData",[270,1252,1253],{"class":346},"({ ",[270,1255,1256],{"class":399},"page",[270,1258,633],{"class":346},[270,1260,1261],{"class":399},"sort",[270,1263,633],{"class":346},[270,1265,1266],{"class":399},"filter",[270,1268,1269],{"class":346}," }",[270,1271,409],{"class":342},[270,1273,412],{"class":346},[270,1275,1276,1279,1282,1285],{"class":272,"line":403},[270,1277,1278],{"class":399},"  page",[270,1280,1281],{"class":342},"?:",[270,1283,1284],{"class":471}," number",[270,1286,555],{"class":346},[270,1288,1289,1292,1294,1297],{"class":272,"line":415},[270,1290,1291],{"class":399},"  sort",[270,1293,1281],{"class":342},[270,1295,1296],{"class":471}," string",[270,1298,555],{"class":346},[270,1300,1301,1304,1306,1308],{"class":272,"line":426},[270,1302,1303],{"class":399},"  filter",[270,1305,1281],{"class":342},[270,1307,1296],{"class":471},[270,1309,555],{"class":346},[270,1311,1312],{"class":272,"line":432},[270,1313,429],{"class":346},[270,1315,1316,1318,1321,1324],{"class":272,"line":441},[270,1317,435],{"class":342},[270,1319,1320],{"class":342}," await",[270,1322,1323],{"class":276}," getDatabaseResults",[270,1325,1326],{"class":346},"({ page, sort, filter });\n",[270,1328,1329],{"class":272,"line":454},[270,1330,511],{"class":346},[77,1332,1334],{"id":1333},"client-table-component","Client Table Component",[15,1336,1337],{},"Now, let's create a client-side table that syncs with the URL using Nuqs:",[261,1339,1341],{"className":333,"code":1340,"language":335,"meta":20,"style":20},"'use client'\n\nimport { useQueryState, parseAsString, parseAsInteger } from 'nuqs'\nimport { fetchTableData } from '@\u002Fsrc\u002Factions\u002FtableActions'\n\nexport default function AdvancedTable() {\n  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))\n  const [sort, setSort] = useQueryState('sort', parseAsString)\n  const [filter, setFilter] = useQueryState('filter', parseAsString)\n\n  const { data, error } = use(fetchTableData({ page, sort, filter }))\n\n  return (\n    \u003Cdiv>\n      \u003Cinput\n        type=\"text\"\n        placeholder=\"Filter...\"\n        value={filter ?? ''}\n        onChange={(e) => setFilter(e.target.value || null)}\n      \u002F>\n      \u003Cbutton onClick={() => setSort(sort === 'asc' ? 'desc' : 'asc')}>\n        Sort: {sort === 'asc' ? 'Descending' : 'Ascending'}\n      \u003C\u002Fbutton>\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Name\u003C\u002Fth>\n            \u003Cth>Value\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody>\n          {data?.map((item) => (\n            \u003Ctr key={item.id}>\n              \u003Ctd>{item.name}\u003C\u002Ftd>\n              \u003Ctd>{item.value}\u003C\u002Ftd>\n            \u003C\u002Ftr>\n          ))}\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cbutton onClick={() => setPage(page - 1)} disabled={page \u003C= 1}>Previous\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => setPage(page + 1)}>Next\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n",[267,1342,1343,1348,1352,1364,1376,1380,1393,1429,1456,1482,1486,1516,1520,1526,1534,1541,1551,1561,1579,1610,1615,1657,1678,1686,1695,1704,1713,1727,1740,1748,1756,1765,1784,1798,1812,1825,1833,1838,1846,1854,1901,1930,1938,1942],{"__ignoreMap":20},[270,1344,1345],{"class":272,"line":273},[270,1346,1347],{"class":280},"'use client'\n",[270,1349,1350],{"class":272,"line":287},[270,1351,377],{"emptyLinePlaceholder":376},[270,1353,1354,1356,1359,1361],{"class":272,"line":294},[270,1355,343],{"class":342},[270,1357,1358],{"class":346}," { useQueryState, parseAsString, parseAsInteger } ",[270,1360,350],{"class":342},[270,1362,1363],{"class":280}," 'nuqs'\n",[270,1365,1366,1368,1371,1373],{"class":272,"line":305},[270,1367,343],{"class":342},[270,1369,1370],{"class":346}," { fetchTableData } ",[270,1372,350],{"class":342},[270,1374,1375],{"class":280}," '@\u002Fsrc\u002Factions\u002FtableActions'\n",[270,1377,1378],{"class":272,"line":310},[270,1379,377],{"emptyLinePlaceholder":376},[270,1381,1382,1384,1386,1388,1391],{"class":272,"line":403},[270,1383,382],{"class":342},[270,1385,385],{"class":342},[270,1387,388],{"class":342},[270,1389,1390],{"class":276}," AdvancedTable",[270,1392,619],{"class":346},[270,1394,1395,1397,1399,1401,1403,1406,1408,1410,1412,1414,1417,1420,1422,1424,1426],{"class":272,"line":415},[270,1396,624],{"class":342},[270,1398,627],{"class":346},[270,1400,1256],{"class":471},[270,1402,633],{"class":346},[270,1404,1405],{"class":471},"setPage",[270,1407,639],{"class":346},[270,1409,642],{"class":342},[270,1411,645],{"class":276},[270,1413,667],{"class":346},[270,1415,1416],{"class":280},"'page'",[270,1418,1419],{"class":346},", parseAsInteger.",[270,1421,664],{"class":276},[270,1423,667],{"class":346},[270,1425,867],{"class":471},[270,1427,1428],{"class":346},"))\n",[270,1430,1431,1433,1435,1437,1439,1442,1444,1446,1448,1450,1453],{"class":272,"line":426},[270,1432,624],{"class":342},[270,1434,627],{"class":346},[270,1436,1261],{"class":471},[270,1438,633],{"class":346},[270,1440,1441],{"class":471},"setSort",[270,1443,639],{"class":346},[270,1445,642],{"class":342},[270,1447,645],{"class":276},[270,1449,667],{"class":346},[270,1451,1452],{"class":280},"'sort'",[270,1454,1455],{"class":346},", parseAsString)\n",[270,1457,1458,1460,1462,1464,1466,1469,1471,1473,1475,1477,1480],{"class":272,"line":432},[270,1459,624],{"class":342},[270,1461,627],{"class":346},[270,1463,1266],{"class":471},[270,1465,633],{"class":346},[270,1467,1468],{"class":471},"setFilter",[270,1470,639],{"class":346},[270,1472,642],{"class":342},[270,1474,645],{"class":276},[270,1476,667],{"class":346},[270,1478,1479],{"class":280},"'filter'",[270,1481,1455],{"class":346},[270,1483,1484],{"class":272,"line":441},[270,1485,377],{"emptyLinePlaceholder":376},[270,1487,1488,1490,1492,1495,1497,1500,1503,1505,1508,1510,1513],{"class":272,"line":454},[270,1489,624],{"class":342},[270,1491,360],{"class":346},[270,1493,1494],{"class":471},"data",[270,1496,633],{"class":346},[270,1498,1499],{"class":471},"error",[270,1501,1502],{"class":346}," } ",[270,1504,642],{"class":342},[270,1506,1507],{"class":276}," use",[270,1509,667],{"class":346},[270,1511,1512],{"class":276},"fetchTableData",[270,1514,1515],{"class":346},"({ page, sort, filter }))\n",[270,1517,1518],{"class":272,"line":465},[270,1519,377],{"emptyLinePlaceholder":376},[270,1521,1522,1524],{"class":272,"line":482},[270,1523,435],{"class":342},[270,1525,438],{"class":346},[270,1527,1528,1530,1532],{"class":272,"line":492},[270,1529,444],{"class":346},[270,1531,695],{"class":447},[270,1533,451],{"class":346},[270,1535,1536,1538],{"class":272,"line":502},[270,1537,457],{"class":346},[270,1539,1540],{"class":447},"input\n",[270,1542,1543,1546,1548],{"class":272,"line":508},[270,1544,1545],{"class":276},"        type",[270,1547,642],{"class":342},[270,1549,1550],{"class":280},"\"text\"\n",[270,1552,1553,1556,1558],{"class":272,"line":708},[270,1554,1555],{"class":276},"        placeholder",[270,1557,642],{"class":342},[270,1559,1560],{"class":280},"\"Filter...\"\n",[270,1562,1563,1566,1568,1571,1574,1577],{"class":272,"line":724},[270,1564,1565],{"class":276},"        value",[270,1567,642],{"class":342},[270,1569,1570],{"class":346},"{filter ",[270,1572,1573],{"class":342},"??",[270,1575,1576],{"class":280}," ''",[270,1578,511],{"class":346},[270,1580,1581,1584,1586,1589,1592,1594,1596,1599,1602,1605,1608],{"class":272,"line":741},[270,1582,1583],{"class":276},"        onChange",[270,1585,642],{"class":342},[270,1587,1588],{"class":346},"{(",[270,1590,1591],{"class":399},"e",[270,1593,854],{"class":346},[270,1595,842],{"class":342},[270,1597,1598],{"class":276}," setFilter",[270,1600,1601],{"class":346},"(e.target.value ",[270,1603,1604],{"class":342},"||",[270,1606,1607],{"class":471}," null",[270,1609,965],{"class":346},[270,1611,1612],{"class":272,"line":747},[270,1613,1614],{"class":346},"      \u002F>\n",[270,1616,1617,1619,1622,1625,1627,1629,1631,1634,1637,1640,1643,1646,1649,1652,1654],{"class":272,"line":757},[270,1618,457],{"class":346},[270,1620,1621],{"class":447},"button",[270,1623,1624],{"class":276}," onClick",[270,1626,642],{"class":342},[270,1628,839],{"class":346},[270,1630,842],{"class":342},[270,1632,1633],{"class":276}," setSort",[270,1635,1636],{"class":346},"(sort ",[270,1638,1639],{"class":342},"===",[270,1641,1642],{"class":280}," 'asc'",[270,1644,1645],{"class":342}," ?",[270,1647,1648],{"class":280}," 'desc'",[270,1650,1651],{"class":342}," :",[270,1653,1642],{"class":280},[270,1655,1656],{"class":346},")}>\n",[270,1658,1659,1662,1664,1666,1668,1671,1673,1676],{"class":272,"line":773},[270,1660,1661],{"class":346},"        Sort: {sort ",[270,1663,1639],{"class":342},[270,1665,1642],{"class":280},[270,1667,1645],{"class":342},[270,1669,1670],{"class":280}," 'Descending'",[270,1672,1651],{"class":342},[270,1674,1675],{"class":280}," 'Ascending'",[270,1677,511],{"class":346},[270,1679,1680,1682,1684],{"class":272,"line":790},[270,1681,485],{"class":346},[270,1683,1621],{"class":447},[270,1685,451],{"class":346},[270,1687,1688,1690,1693],{"class":272,"line":796},[270,1689,457],{"class":346},[270,1691,1692],{"class":447},"table",[270,1694,451],{"class":346},[270,1696,1697,1699,1702],{"class":272,"line":806},[270,1698,468],{"class":346},[270,1700,1701],{"class":447},"thead",[270,1703,451],{"class":346},[270,1705,1706,1708,1711],{"class":272,"line":822},[270,1707,776],{"class":346},[270,1709,1710],{"class":447},"tr",[270,1712,451],{"class":346},[270,1714,1715,1717,1720,1723,1725],{"class":272,"line":831},[270,1716,825],{"class":346},[270,1718,1719],{"class":447},"th",[270,1721,1722],{"class":346},">Name\u003C\u002F",[270,1724,1719],{"class":447},[270,1726,451],{"class":346},[270,1728,1729,1731,1733,1736,1738],{"class":272,"line":882},[270,1730,825],{"class":346},[270,1732,1719],{"class":447},[270,1734,1735],{"class":346},">Value\u003C\u002F",[270,1737,1719],{"class":447},[270,1739,451],{"class":346},[270,1741,1742,1744,1746],{"class":272,"line":893},[270,1743,799],{"class":346},[270,1745,1710],{"class":447},[270,1747,451],{"class":346},[270,1749,1750,1752,1754],{"class":272,"line":899},[270,1751,750],{"class":346},[270,1753,1701],{"class":447},[270,1755,451],{"class":346},[270,1757,1758,1760,1763],{"class":272,"line":918},[270,1759,468],{"class":346},[270,1761,1762],{"class":447},"tbody",[270,1764,451],{"class":346},[270,1766,1767,1770,1773,1775,1778,1780,1782],{"class":272,"line":929},[270,1768,1769],{"class":346},"          {data?.",[270,1771,1772],{"class":276},"map",[270,1774,848],{"class":346},[270,1776,1777],{"class":399},"item",[270,1779,854],{"class":346},[270,1781,842],{"class":342},[270,1783,438],{"class":346},[270,1785,1786,1788,1790,1793,1795],{"class":272,"line":936},[270,1787,825],{"class":346},[270,1789,1710],{"class":447},[270,1791,1792],{"class":276}," key",[270,1794,642],{"class":342},[270,1796,1797],{"class":346},"{item.id}>\n",[270,1799,1800,1802,1805,1808,1810],{"class":272,"line":968},[270,1801,902],{"class":346},[270,1803,1804],{"class":447},"td",[270,1806,1807],{"class":346},">{item.name}\u003C\u002F",[270,1809,1804],{"class":447},[270,1811,451],{"class":346},[270,1813,1814,1816,1818,1821,1823],{"class":272,"line":977},[270,1815,902],{"class":346},[270,1817,1804],{"class":447},[270,1819,1820],{"class":346},">{item.value}\u003C\u002F",[270,1822,1804],{"class":447},[270,1824,451],{"class":346},[270,1826,1827,1829,1831],{"class":272,"line":982},[270,1828,921],{"class":346},[270,1830,1710],{"class":447},[270,1832,451],{"class":346},[270,1834,1835],{"class":272,"line":998},[270,1836,1837],{"class":346},"          ))}\n",[270,1839,1840,1842,1844],{"class":272,"line":1007},[270,1841,750],{"class":346},[270,1843,1762],{"class":447},[270,1845,451],{"class":346},[270,1847,1848,1850,1852],{"class":272,"line":1016},[270,1849,485],{"class":346},[270,1851,1692],{"class":447},[270,1853,451],{"class":346},[270,1855,1856,1858,1860,1862,1864,1866,1868,1871,1874,1876,1878,1881,1884,1886,1889,1892,1894,1897,1899],{"class":272,"line":1023},[270,1857,457],{"class":346},[270,1859,1621],{"class":447},[270,1861,1624],{"class":276},[270,1863,642],{"class":342},[270,1865,839],{"class":346},[270,1867,842],{"class":342},[270,1869,1870],{"class":276}," setPage",[270,1872,1873],{"class":346},"(page ",[270,1875,873],{"class":342},[270,1877,876],{"class":471},[270,1879,1880],{"class":346},")} ",[270,1882,1883],{"class":276},"disabled",[270,1885,642],{"class":342},[270,1887,1888],{"class":346},"{page ",[270,1890,1891],{"class":342},"\u003C=",[270,1893,876],{"class":471},[270,1895,1896],{"class":346},"}>Previous\u003C\u002F",[270,1898,1621],{"class":447},[270,1900,451],{"class":346},[270,1902,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1926,1928],{"class":272,"line":1044},[270,1904,457],{"class":346},[270,1906,1621],{"class":447},[270,1908,1624],{"class":276},[270,1910,642],{"class":342},[270,1912,839],{"class":346},[270,1914,842],{"class":342},[270,1916,1870],{"class":276},[270,1918,1873],{"class":346},[270,1920,960],{"class":342},[270,1922,876],{"class":471},[270,1924,1925],{"class":346},")}>Next\u003C\u002F",[270,1927,1621],{"class":447},[270,1929,451],{"class":346},[270,1931,1932,1934,1936],{"class":272,"line":1055},[270,1933,495],{"class":346},[270,1935,695],{"class":447},[270,1937,451],{"class":346},[270,1939,1940],{"class":272,"line":1066},[270,1941,505],{"class":346},[270,1943,1944],{"class":272,"line":1072},[270,1945,511],{"class":346},[15,1947,1948],{},"This ensures:",[1127,1950,1951,1957,1963],{},[1130,1952,1953,1954],{},"URL-based ",[104,1955,1956],{},"pagination, sorting, and filtering",[1130,1958,1959,1962],{},[104,1960,1961],{},"State persistence"," across refreshes and navigation",[1130,1964,1965,1968],{},[104,1966,1967],{},"Seamless user experience"," with Nuqs managing query states",[77,1970,1972],{"id":1971},"final-thoughts-holding-the-spot-that-matters","Final Thoughts: Holding the Spot That Matters",[15,1974,1975,1976,183],{},"At the end of the day, whether it's a table at a restaurant, a seat in a lecture hall, or your place in a digital experience, what we really want is simple: ",[104,1977,1978],{},"to not lose our spot",[15,1980,1981,1982,183],{},"Just like a well-managed reservation system ensures your table stays yours, a well-structured URL state ensures that users never feel lost or reset. It's not just about good UX — it's about ",[104,1983,1984],{},"respecting user intent",[15,1986,1987,1988,1991,1992,1995,1996,1999,2000,2003],{},"That's where ",[104,1989,1990],{},"Nuqs"," stands out. Unlike useSearchParams, which is limited to basic query strings, or ",[104,1993,1994],{},"state managers like Zustand and Redux",", which primarily handle ",[104,1997,1998],{},"in-app state"," (and lose it on refresh unless you introduce a persistence layer like localStorage), Nuqs ensures that state persists ",[104,2001,2002],{},"naturally via the URL","—without extra setup.",[15,2005,2006,2007,2010,2011,2014,2015,2018],{},"Beyond just improving user experience, ",[104,2008,2009],{},"persisting state in URLs has real advantages"," — it makes content more ",[104,2012,2013],{},"SEO-friendly",", allowing users to share stateful URLs effortlessly. It also enhances ",[104,2016,2017],{},"accessibility",", ensuring users returning via bookmarks or assistive technologies don't start from scratch.",[77,2020,2022],{"id":2021},"a-quick-note-on-limits","🚦 A Quick Note on Limits",[15,2024,2025,2026,2029],{},"Of course, even the best reservation systems have their limits — there's only so much space in a restaurant, and only so many seats in a theater. URLs are the same. While Nuqs lets you hold your spot seamlessly, ",[104,2027,2028],{},"every browser has a max URL length"," — and just like a restaurant that can't fit an entire wedding party at one table, a URL isn't the place for storing massive application state.",[15,2031,2032,2033,2036,2037,2040],{},"And just like some venues might have a \"no back-to-back reservations\" policy, browsers also ",[104,2034,2035],{},"throttle rapid URL updates"," to ensure smooth performance. Luckily, Nuqs ",[104,2038,2039],{},"handles this for you",", so you don't have to worry about overloading the system.",[15,2042,2043,2044,2047,2048],{},"So, as always, ",[104,2045,2046],{},"balance is key",". Not every piece of state belongs in the URL — ",[104,2049,2050],{},"but when it does, Nuqs makes sure it stays there.",[15,2052,2053,2054],{},"Because at the end of the day, the best experiences are the ones that let you leave — and come back — ",[104,2055,2056],{},"without losing your place.",[2058,2059,2060],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":20,"searchDepth":287,"depth":287,"links":2062},[2063,2064,2065,2066,2067,2068,2069,2070,2071,2072,2073,2074,2075,2076,2077,2078],{"id":12,"depth":294,"text":13},{"id":79,"depth":287,"text":80},{"id":115,"depth":287,"text":116},{"id":171,"depth":287,"text":172},{"id":208,"depth":287,"text":209},{"id":245,"depth":287,"text":246},{"id":255,"depth":287,"text":256},{"id":323,"depth":287,"text":324},{"id":520,"depth":287,"text":521},{"id":1124,"depth":287,"text":1125},{"id":1158,"depth":287,"text":1159},{"id":1165,"depth":287,"text":1166},{"id":1198,"depth":287,"text":1199},{"id":1333,"depth":287,"text":1334},{"id":1971,"depth":287,"text":1972},{"id":2021,"depth":287,"text":2022},"https:\u002F\u002Fiamlope.medium.com\u002Fnuqs-because-urls-should-do-more-5d5d86e873c1","2025-02-17","Type-safe URL search-param state management in Next.js with nuqs, so user context persists across refreshes and shared links.",false,"md",null,{},"\u002Fblog\u002Fnuqs-because-urls-should-do-more","7min",{"title":5,"description":2081},"blog\u002Fnuqs-because-urls-should-do-more","iKRTsLoF7x_HErz_S3oeglrXQhwgHJ4Vtd1IQkM2_mA",1781421037286]