Jai
TTCTheo's Typesafe Cult
•Created by Jai on 11/2/2023 in #questions
Restrict direct access to NextJS routes
I am writing a user onboarding flow where the whole onboarding flow is about 3 pages, it starts with username, email and password on route 1 (lets say /signup/credentials), full name, other details etc on route 2 (/signup/details) and some last few details on route 3 (/signup/confirm) lets say.
On route 3, I have a button which takes the data from all 3 routes, compiles it into some data, and makes the API call to sign up the user.
By this logic, I only want to allow client side routing from route 1 to route 2, and client side routing from route 2 to route 3, i.e. users shouldnt be able to go to /signup/confirm route directly.
I have 2 questions. Is this a good idea ? 2nd, how do I restrict direct access to these routes in NextJS ? One idea I have in mind is to keep some global state (lets say some boolean set to false initially), and only set it to something other than the default (lets say true) when the previous step is complete, so when user lands on a route directly, we check this state and only show if the state was altered from the default.
5 replies
TTCTheo's Typesafe Cult
•Created by Jai on 7/2/2023 in #questions
Does anyone have a good blog/video/resource to read up about CommonJS vs ESM vs CJS ?
Hi.
I am new to bundling logic. Learning about these. I have a component library I am looking to publish internally. Looking at Uber's baseweb and Airbnb's visx, it seems from their package json that they publish pkg, cjs and esm versions. I don't quite fully understand what these are and what are the differences between these. Can anyone point me to good resources that explain what these are and the differences between them ?
3 replies
TTCTheo's Typesafe Cult
•Created by Jai on 5/12/2023 in #questions
ESLint to force @types in dev-dependencies
We recently had an outage coz someone installed the @types/[package-name] in dependencies, but never installed the actual package itself. Particularly, they installed
@types/imurmurhash in dependencies, but didnt install imurmurhash itself (and no one reviewing noticed it in the PR). Our no-extraneous-dependencies rule in ESLint didnt catch this coz the type declarations were present.
Had the @types/ been installed in dev-dependencies, ESLint would have caught the missing dependency issue. Anyway to use to ESLint to check @types / packages are dev-dependencies and not dependencies ?
I can raise an issue in ESLint, but was wondering if getting a solution might be faster here.2 replies
TTCTheo's Typesafe Cult
•Created by Jai on 5/7/2023 in #questions
Analytics w/ RSC
Trying out the App Router for my blogsite.
My blogsite is mostly a static website and is a perfect candidate for RSC. However, I do a lot of tracking about interactions on my blog page - e.g. if you click a link to another blog post, I send an analytics event for a BUNCH of data. These events are sent on the
onClick event handler of the <a> tag. Now the blog link is a completely static component that is perfect for RSC, but I also would have to send JS to do that tracking. How should I build this ? I hate to convert this to a client side component.
It feels weird to send Javascript w/ a component for purely tracking purposes that does nothing to the UX. A static link, on paper, should be the perfect candidate to send 0 JS w/ it.
P.S. I dont own the web server that receives the <a> requests so I cant do the tracking there. Plus this question is more around general tracking that happens on client side on various components.5 replies