Add Remove A Query Param From The URL as a next.js til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_975 TILs and counting..._
+_976 TILs and counting..._
 
 ---
 
@@ -443,6 +443,7 @@ _975 TILs and counting..._
 ### Next.js
 
 - [Define URL Redirects In The Next Config](nextjs/define-url-redirects-in-the-next-config.md)
+- [Remove A Query Param From The URL](nextjs/remove-a-query-param-from-the-url.md)
 
 ### Phoenix
 

nextjs/remove-a-query-param-from-the-url.md

@@ -0,0 +1,50 @@
+# Remove A Query Param From The URL
+
+Let's say you have a Next.js app. Sometimes users visit the app with special
+query params. You want to extract the value of those query params, do something
+with them, and then remove them from the URL.
+
+This can be done with
+[`next/router`](https://nextjs.org/docs/api-reference/next/router).
+
+Let's say this component loads while the app URL is `/home?code=123`.
+
+```javascript
+import React, { useEffect } from "react";
+import {useRouter} from "next/router";
+
+function SomeComponent() {
+  const router = useRouter();
+
+  useEffect(() => {
+    // extract the value from the query params
+    const { code, ...updatedQuery } = router.query;
+
+    if (!!code) {
+      // do something with the extract query param
+      doSomethingWithCode(code);
+
+      // create an updated router path object
+      const newPathObject = {
+        pathname: router.pathname,
+        query: updatedQuery
+      }
+
+      // update the URL, without re-triggering data fetching
+      router.push(newPathObject, undefined, { shallow: true });
+    }
+  }, [])
+
+  return (
+   ...
+  );
+}
+```
+
+After the mount, the URL will read `/home` and the code will have done
+something with the code value.
+
+This is accomplished by destructuring the target query param apart from the
+rest, constructing a new router path object with the rest of the query params,
+and then pushing that route update _shallowly_ so that data doesn't get
+refetched.