Next.js Discord

Discord Forum

Reading URL on server side

Unanswered
Tiphiid wasp posted this in #help-forum
Open in Discord
Tiphiid waspOP
I wonder, is there a way to read URL on server side? 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

@aardani may i ask first what you plan to do with the URL?
Tiphiid waspOP
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?
Tiphiid waspOP
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 first
so 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?
Tiphiid waspOP
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`?
Tiphiid waspOP
Its
so the url is domain.com/@username
@Tiphiid wasp Its
in page.tsx, try console.logging the parameter of your default export function
you can get the parameter for your variadic route /[something]
@aardani in `page.tsx`, try console.logging the parameter of your default export function
Tiphiid waspOP
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?
Tiphiid waspOP
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
Tiphiid waspOP
So the username would be then passed to getUserProfile
export default PublicProfile
which is the PublicProfile(...)
try
PublicProfile(params) {
  console.log(params)
@aardani try tsx PublicProfile(params) { console.log(params)
Tiphiid waspOP
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
@Tiphiid wasp Oh wow there are soo many things xD js { '@{username}': '%40username' }
yes so since the identified of the param you used is @{username} (i think this shouldnt be like this imo)
you can access it via the params property
%40 can be decoded back to %
Tiphiid waspOP
Why % though?
Where did that came from?
@Tiphiid wasp 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
Tiphiid waspOP
Ah
still learning back-end as well
i would rename [@{username}] folder to just [username]
Tiphiid waspOP
But would the @ still work?
and validate that params.username starts with @ or %40
in page.tsx
@Tiphiid wasp 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
Tiphiid waspOP
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
Tiphiid waspOP
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 UX
you can still validate that before creating it
Tiphiid waspOP
I like how this site has done things https://laracasts.com/@onurzdgn
Just 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 @ symbol
whether to redirect or error or rename to @something
its up to you
Tiphiid waspOP
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
@Tiphiid wasp 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
Tiphiid waspOP
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
Tiphiid waspOP
really appriciate the help so far 😄 i'll try probably later this eavening
no worries! take your time! enjoy your eavening
Tiphiid waspOP
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 @ in the folder, does nothing, and that's why every route is directed to the user folder?
Tiphiid waspOP
I see, this makes sense now. I'll try to implement it soon thanks ^^