Single page file to handle two different routes | Next.js | Page 1

shy ravine Jul 25, 2024, 12:06 PM

#

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?

paper ospreyBOT Jul 25, 2024, 12:06 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frank violet Jul 25, 2024, 12:27 PM

#

@shy ravine you can abstract the same logic into util function or class whatever you like and then reuse it.

shy ravine Jul 25, 2024, 12:29 PM

#

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.

paper zinc Jul 25, 2024, 12:30 PM

#

import "server-only"; in your util file

#

I believe it is already a dep inside Next.js

frank violet Jul 25, 2024, 12:31 PM

#

There can't be massive duplication of code, if you abstract the repeated logic

paper zinc Jul 25, 2024, 12:31 PM

#

It would be much easier if I could see the code 👀

frank violet Jul 25, 2024, 12:31 PM

#

agreed 🤝

paper zinc Jul 25, 2024, 12:31 PM

#

https://tenor.com/bP9hr.gif

Tenor

#

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 😂

shy ravine Jul 25, 2024, 12:34 PM

#

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 😄

paper zinc Jul 25, 2024, 12:35 PM

#

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

shy ravine Jul 25, 2024, 12:35 PM

#

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 😄

paper zinc Jul 25, 2024, 12:36 PM

#

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.

shy ravine Jul 25, 2024, 12:37 PM

#

ohhh that could be nice. i'm using codeium. not much reliant on but it comes in handy sometimes

paper zinc Jul 25, 2024, 12:38 PM

#

We're an OpenAI competitor, so we can only use Copilot enterprise or local model 😭 haha

shy ravine Jul 25, 2024, 2:27 PM

#

weird

#

i removed it and has no problems

shy ravine Jul 25, 2024, 3:30 PM

#

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

#Single page file to handle two different routes