Is a Dynamic Root Page Possible?
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
So first off I'm using NextJS 13, so
I'd like to make the homepage of my app immediately interactive AND unique to the visitor (it's a time tracking app), but then allow them to hit a link and navigate to a list view of many different timers. I think I could make a unique ID on first hit many different ways, like utilizing some UUID lib or timestamp and IP combo.
I don't want to require the visitor to do a second click into a page to generate a unique page / id. Is there a way to somehow inject a UUID into the root page so it creates a new unique instance of the content I want to display? How could I implement this the way NextJS is set up with routes and dynamic routing?
Thank you!
app routerI'd like to make the homepage of my app immediately interactive AND unique to the visitor (it's a time tracking app), but then allow them to hit a link and navigate to a list view of many different timers. I think I could make a unique ID on first hit many different ways, like utilizing some UUID lib or timestamp and IP combo.
I don't want to require the visitor to do a second click into a page to generate a unique page / id. Is there a way to somehow inject a UUID into the root page so it creates a new unique instance of the content I want to display? How could I implement this the way NextJS is set up with routes and dynamic routing?
Thank you!
26 Replies
Sloth bear
In app directory, unless prompted otherwise, all components are server-side-rendered
that means that if you make your function async
you can get the result you want
let me show you
export default async function Home() {
const uuid = await createuuid();
return <h1>{uuid}</h1>
}Norwegian Forest CatOP
@Sloth bear 🤔 that's good to know about the async availability. I'd like the whole path unique, not just content in the root page. So for example instead of hitting
xyz.com, you'd navigate to or redirect to xyz.com/timers/sf2fsldjf9s23fl when you go to the siteSloth bear
then use middleware
async function getData() {
const res = await fetch('https://api.example.com/...')
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
// Recommendation: handle errors
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}this is out of the docs
(I sent it to better understand async)
Norwegian Forest CatOP
Ooo that may be what I'm looking for!
Sloth bear
do you want me to prompt you to docs?
Norwegian Forest CatOP
her you go
Norwegian Forest CatOP
Coolio. Yea I think what I'd like to do is either middleware or redirect on root. Maybe there's some anti-pattern here, but maybe that could be captured also in middleware
Like retaining the UUID path for a certain TTL so as not to open up to spam generating rooms
Open to any thoughts on that too
Sloth bear
i am not sure i fully understand what you mean
maybe use cookie for saving each user's room?
Norwegian Forest CatOP
hmm yea that could do it. and / or just overwrite it each time, so only 1 instance stays alive in the browser
Sloth bear
sure
whatever suits your usecase best!
Norwegian Forest CatOP
Thanks for your help and quick response! I'll def look into these options. Great first experience with Discord forums lol
Sloth bear
bro i am trying to feagure out app router stuff
so might as well helo someone in the process