Reading URL on server side
Unanswered
Reddish carpenter ant posted this in #help-forum
Reddish carpenter antOP
I wonder, is there a way to read URL on server side?
I got a folder
At frist I though to do:
However... you could also get params right but ummmm, how would ya go about doing this?
http://localhost:3000/@username?I got a folder
[@(username)] - or how would ya'll go about this?At frist I though to do:
const headersList = headers();
const pathname = headersList.get('x-url')!;However... you could also get params right but ummmm, how would ya go about doing this?
68 Replies
may i ask first what you plan to do with the URL?
@aardani may i ask first what you plan to do with the URL?
Reddish carpenter antOP
I'm re-creating basically exactly this functionality https://dribbble.com/Unini or https://dribbble.com/rakabir - its a username of those users, but I want to have @ instead, but that's the thing I want to do pretty much
so to display/use the URL on a component?
@aardani so to display/use the URL on a component?
Reddish carpenter antOP
So the URL gets read on the server side right, better for performance etc... and then when I get the URL< make a database query to get the user data, and display it, then add some button functoinality
Something like
const user = await getUserProfile("username") - but do that on the server firstso it saves the api call time travel I believe, and do it directly there
oh you dont need to read the full URL from that
i assume you have the page structure under
app/[username]/page.tsx?Reddish carpenter antOP
So the get user profile its
export async function getUserProfile(username: string) {
return db
.select()
.from(profile)
.where(eq(profile.username, username))
}@aardani i assume you have the page structure under `app/[username]/page.tsx`?
Reddish carpenter antOP
Its
so the url is
domain.com/@username@Reddish carpenter ant Its
in
page.tsx, try console.logging the parameter of your default export functionyou can get the parameter for your variadic route
/[something]@aardani in `page.tsx`, try console.logging the parameter of your default export function
Reddish carpenter antOP
What do you mean by that? Which paremeters exactly?
can I see screenshot of your page.tsx?
@aardani can I see screenshot of your page.tsx?
Reddish carpenter antOP
import { headers } from "next/headers";
import { usePathname } from 'next/navigation';
import { NextResponse, NextRequest } from 'next/server';
import { getURL } from '@/lib/helpers';
import EmptyState from '@/components/molecules/EmptyState';
import { getUserProfile } from '@/db/queries/profile';
async function PublicProfile({ children, searchParams }: any) {
const headersList = headers();
const pathname = headersList.get('x-url');
// const username = pathname.split('/').pop().replace('@', '');
// console.log("username", headersList)
// console.log(searchParams, pathname, headersList)
console.log()
const user = await getUserProfile("username")
const view = user[0]
if (!view) {
return <>No user found</>
}
return (
<div>
Name: {view.username}
</div>
);
}
export default PublicProfile;there
Reddish carpenter antOP
So the username would be then passed to
getUserProfileexport default PublicProfilewhich is the PublicProfile(...)
try
PublicProfile(params) {
console.log(params)@aardani try
tsx
PublicProfile(params) {
console.log(params)
Reddish carpenter antOP
Oh wow there are soo many things xD
{ '@{username}': '%40username' }Yeah that displays this in the console
and access it like this right
console.log(params["@{username}"])although t has a
%40 in it@Reddish carpenter ant Oh wow there are soo many things xD
js
{ '@{username}': '%40username' }
yes so since the identified of the param you used is
you can access it via the params property
@{username} (i think this shouldnt be like this imo)you can access it via the params property
%40 can be decoded back to %
Reddish carpenter antOP
Why
% though?Where did that came from?
@Reddish carpenter ant Where did that came from?
its because symbols needs to be encoded in the URL when processed to the backend
its part of the protocol
Reddish carpenter antOP
Ah
still learning back-end as well
i would rename
[@{username}] folder to just [username]Reddish carpenter antOP
But would the
@ still work?and validate that params.username starts with
@ or %40in page.tsx
@Reddish carpenter ant But would the `@` still work?
you cant filter the routes based on the name of the folder. it needs to be done manually
so it will still work
%40username is @username when decoded
Reddish carpenter antOP
makes sense, so then I just need to extract the @ anyway right, because in my databas I just store the username without @
yeah
but its up to you what happen if i try to access localhost:3000/aurelian instead of @aurelian
Reddish carpenter antOP
Yeah, I only put
@ because I don't want somene to create a username say about-us and then not being able to use that route, so any username or user would have a @ at least that's the UXyou can still validate that before creating it
Reddish carpenter antOP
I like how this site has done things
https://laracasts.com/@onurzdgnJust copying that site in a way as well xD
you need to define in the program, what happen if user access a username without the
@ symbolwhether to redirect or error or rename to @something
its up to you
Reddish carpenter antOP
Ah, then it would go to a 404 page right
it would be treated like a normal page I think without the
@if that's what you mean
@Reddish carpenter ant Ah, then it would go to a 404 page right
idk? its not defined in your code
if you want to behave that way
then you have to filter the [username] params
Reddish carpenter antOP
btw I need to go, but I will try the solution you mentioned above first thing when I'm back and then play around with this a bit
Going to try and make this work first and go from there
aight
Reddish carpenter antOP
really appriciate the help so far 😄 i'll try probably later this eavening
no worries! take your time! enjoy your eavening
Reddish carpenter antOP
Hey, I wonder, why does this route default to the user route and not a 404 route? Why is this special?
I did try the things we talked above in regards of checking the route etc... I was confused at first when you said that because I'm sure if there is no route you catch it to a 404page, but the user route goes there... so that means putting a
I did try the things we talked above in regards of checking the route etc... I was confused at first when you said that because I'm sure if there is no route you catch it to a 404page, but the user route goes there... so that means putting a
@ in the folder, does nothing, and that's why every route is directed to the user folder?putting
@ does not do anythingtherefore you need to filter it on your own in the
/[user]/layout.tsx or page.tsxReddish carpenter antOP
I see, this makes sense now. I'll try to implement it soon thanks ^^