TTC
Theo's Typesafe Cult•2y ago
cje

Next.js dynamic route param typesafety

Is there a better solution than this? Feels annoying to do this for every dynamic route. 
// [userId].tsx

const UserPage: NextPage = () => {
  const { query } = useRouter();

  const userId =
    (Array.isArray(query.userId) ? query.userId[0] : query.userId) || "";

  return <div>{userId}</div>;
};
// [userId].tsx

const UserPage: NextPage = () => {
  const { query } = useRouter();

  const userId =
    (Array.isArray(query.userId) ? query.userId[0] : query.userId) || "";

  return <div>{userId}</div>;
};
2 Replies
esponges
esponges•2y ago
I was wondering the same. I had to implement something similar and it sucks. useRouter query is just not cool
needmorewood
needmorewood•2y ago
idk if this is a good idea, but could u potetially as string the query if you "know" its always going to be a single thing you can always put this into a hook as well that you pass the query param you want and make it reusable idk the anatomy of react hooks too much but i have worked with vue composables to do something very similar which are similar
Want results from more Discord servers?
Add your server
More Posts
react query questioncurrently when fetching the current user im checking if the JWT has expired, and making a call to a TRPC multiple mutation procedureI have currently a formular which calls my mutation. The query should create multiple different entiLoad theme from cookies without foucI want to load my theme from cookiees without a flash of unstyled content (nextjs), is it wise to ustRPC Subscription WebSockets can't subscribe``` TRPCClientError: Unexpected request method PATCH ```[solved] Running into build error with import even when it works locally.Have a file `Layout.tsx` importing `Header.tsx` both in same directory, but still runs into build erdoes anyone know how i can serve a subdirectory in vercel?[solved] serving a repo that has a /app folder inside which contains the next app, want to serve thais there a way stop vite client from re-connecting to the server?the client keeps logging `GET http://127.0.0.1:3000/ net::ERR_CONNECTION_REFUSED` they have nothingHelp me write a cleaner method?Hi all, I'm writing a function to break a list of assets into chunks with a max size. I have an arusing react.useRef with a dynamic elements list. is this a bad practice?I found this code sandbox when I googled the topic: https://codesandbox.io/s/react-useref-with-dynamFunctions type for key of objects with specific keyHey, are there any typescript wizards here that could help? I've been trying for a while already but