Next.js Discord

Discord Forum

Single page file to handle two different routes

Answered
Satin posted this in #help-forum
Open in Discord
SatinOP
Hi, I'm creating an app where people can have "things" and they can view their own things and they can also view other peoples' things. There's a bit of code in the getServerSideProps function and I don't want to repeat this code (or the page component itself).

So I need to setup a single page component/file to handle two routes that look like these:
- /things
- /profile/[username]/things

How do I do this?
Answered by James4u
@Satin you can abstract the same logic into util function or class whatever you like and then reuse it.
View full answer

24 Replies

James4u
@Satin you can abstract the same logic into util function or class whatever you like and then reuse it.
Answer
SatinOP
tried that, ran into different issues ranging from supposedly-serverside code running in client to massive duplication of code. my best option now is duplicate code that's why i asked here.
Luke
import "server-only"; in your util file
I believe it is already a dep inside Next.js
James4u
There can't be massive duplication of code, if you abstract the repeated logic
Luke
It would be much easier if I could see the code 👀
James4u
agreed 🤝
Luke
https://tenor.com/bP9hr.gif
I lay out my libs like this so I can keep it straight in my head how they get used

everything inside lib/server/ has import "server-only"; to ensure that code can never be run in the client, as I am super paranoid about leaking those keys somehow 😂
SatinOP
i'll try the abstraction again. sorry, i'm not at liberty to share the code. thanks for your help.
but it's good to know i tried the thing that makes most sense the first time 😄
Luke
I can't imagine a few lines is going to be anything super sensitive. So perhaps if you run into this again when trying to abstract it out, show us what lines specifically are throwing the error. Ping me if you need to
SatinOP
thanks for the offer.
i know about the few lines thing but i would have to slice it and i'm kinda lazy like that 😄
Luke
Me to. Also you could throw it into GPT or something.

Hot tip, if you install Jan.ai and use Turbo 3.5 or Claude 3, they run locally so not leaking your data to OpenAI / Anthropic.
SatinOP
ohhh that could be nice. i'm using codeium. not much reliant on but it comes in handy sometimes
Luke
We're an OpenAI competitor, so we can only use Copilot enterprise or local model 😭 haha
SatinOP
weird
i removed it and has no problems
SatinOP
abstraction worked
export const getServerSideProps: GetServerSideProps = async (context) =>
  await getInitialPayload(context);
one page has the page component, the other just imports and exports the component
both has the above block
thanks everyone