Next.js Discord

Discord Forum

api

Answered
Southeastern blueberry bee posted this in #help-forum
Open in Discord
Southeastern blueberry beeOP
how would i hide requests from devtools on the client?
Answered by Argente Brun
"use client";
import { useSearchParams } from "next/navigation";

export default function SearchBar() {
    const searchParams = useSearchParams();
    const search = searchParams.get("q");

    fetch("/api/test")
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
        });

    return <></>;
}


// app/api/test/route.ts
export async function GET() {
    const res = await fetch("...");
    const data = await res.json();

    return Response.json({ data });
}
View full answer

207 Replies

Argente Brun
Server-Side Proxy: You send a request to a server and the server send the request you want to hide.
Southeastern blueberry beeOP
how would this work ?
Giant panda
fyi, since you have been repeatedly posting questions with low-effort titles that aren't helpful at all, please check our rules:
We value the time of our members so the moderation team is free to lock any posts they consider low-effort. For example, posts with no clear title or description, like "Help me"
https://nextjs-forum.com/post/1138338531983491154
Argente Brun
your browser -> request to your server api endpoint -> request to endpoint you want to hide -> result back to your server -> result back to browser
but code wise
Argente Brun
you want me to code that for you or what? Your question is "how would i hide requests from devtools on the client?"
Giant panda
Why don't you try implementing it first and then report issues instead of expecting people to spoonfeed you all the code?
Southeastern blueberry beeOP
because i cant implent it?
thats why im asking for help?
Giant panda
Well, did you even try anything based on fynn's suggestion?
Southeastern blueberry beeOP
becayse
no
i
cant
thats
why
im
help
for
asking
Argente Brun
No, you asked how u can hide it, not for someone to give u the code to hide it. If u try and it doesn't work or you have any questions I can help you, but I want sit here and code it for u
Giant panda
Please stop spamming.
Southeastern blueberry beeOP
before i tried this
/asd/test.tsx

export default function call() {
    const res = await fetch('...')
    const data = await res.json()

    return data
}


/app/user/page.tsx

'use client';
import { useSearchParams } from 'next/navigation'
import call from '../asd/test'

export default function SearchBar() {
  const searchParams = useSearchParams()
  const search = searchParams.get('q')

  const data = call()

  console.log(data)

  return <>
    
  </>
}
but it still shows in devtools
Argente Brun
And a tip for life, if you need help with something and ask questions, try to be polite to the people who want to help you. And since you are also using this Discord, you should also stick to the rules here, then more people will be willing to help you 🙂
@Argente Brun Because the request is still on the client, you just moved the fetch to another file.
Southeastern blueberry beeOP
how would i do it on the server then?
Argente Brun
wait
Southeastern blueberry beeOP
ok
Argente Brun
"use client";
import { useSearchParams } from "next/navigation";

export default function SearchBar() {
    const searchParams = useSearchParams();
    const search = searchParams.get("q");

    fetch("/api/test")
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
        });

    return <></>;
}


// app/api/test/route.ts
export async function GET() {
    const res = await fetch("...");
    const data = await res.json();

    return Response.json({ data });
}
Answer
Argente Brun
didnt test it but should work
now only your "/api/test" request will be visible in the devtools but not you fetch on the server.
its calling to that?
and thats the script location
Argente Brun
if customprofiles.xyz is your domain, yes
Southeastern blueberry beeOP
it is
hm
ok
Argente Brun
what information should "they" get from it? Its just a fetch to your api endpoint. And if you dont return anything, nobody can see what your doing there
Perhaps I can help you better if you tell me a little more about your project and what you want to achieve by "hiding your request"
Southeastern blueberry beeOP
on /api/test
Argente Brun
did u name the file "route.ts"?
Southeastern blueberry beeOP
under /app
Argente Brun
no, you need app/api/test/route.ts
Southeastern blueberry beeOP
oh yh
💀
#
Argente Brun
Also you can have ".tsx" files in your api because thats typescript JSX. your file needs to be names route.ts
Southeastern blueberry beeOP
Argente Brun
Whats the problem? Your just sending screenshots
Southeastern blueberry beeOP
Failed to parse URL from /api/test
Argente Brun
did u try going to the api/test endpoint in the browser after renaming it to api/test/route.ts?
Southeastern blueberry beeOP
Yes
Argente Brun
and? Did it work?
Southeastern blueberry beeOP
no
Argente Brun
Did u put 
` export async function GET() {
    const res = await fetch("...");
    const data = await res.json();

    return Response.json({ data });
}
` in the route.ts file?
Southeastern blueberry beeOP
yea
oh
im actually
insanly stupid
Argente Brun
and did you deploy it to your server where your domain points to?
Southeastern blueberry beeOP
i was actually calling to ...
not the api i need
Argente Brun
perfect 😄
Southeastern blueberry beeOP
💀
Argente Brun
?
Southeastern blueberry beeOP
so
whats the difference between me doing this and me going straight to the other url
oh wait
yes
i see
Argente Brun
you hide the url your sending a request to to the user and just show him the request to your api
Southeastern blueberry beeOP
yea
im starting to understand it now
and that means i can add all my secret headers etc in the /api/test to hide them from users
Argente Brun
no on fetch to "/api/test" but in the route.ts file to the fetch to your secret url
Southeastern blueberry beeOP
yh
perfect
tysm
ok
one last question
currently i have
"https://customprofiles.xyz/?q=..."
but i want it to be
"https://customprofiles.xyz/..."
so if ur custom name is abc
its
https://customprofiles.xyz/?q=abc
rn
but i want it to be
https://customprofiles.xyz/abc
do you get what i mean?
Argente Brun
yeah, u didnt need the send a new message for every word, but I get it.
Southeastern blueberry beeOP
yh lol
like this
but how do i get the username in the page.tsx
Argente Brun
What u are searching for is URL params. In NextJS the feature is Named "Dynamic Routes" https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Southeastern blueberry beeOP
i knew the name was "dynamic routes"
hm
Argente Brun
you just put your app/page.tsx file in app/[name]/page.tsx and then you can access the [name] by

export default function Page({ params }: { params: { name: string } }) {
  return <div>Name: {params.name}</div>
}
Do you need more help? Otherwise I would go offline
Southeastern blueberry beeOP
just testing it right now
so when i type in the url
server.get('/:username', async (req, res) => {
  return app.render(req, res, '/user')
})

is run too which goes to my page.tsx
Argente Brun
what? I dont get what your asking
Argente Brun
i know
Southeastern blueberry beeOP
right
when the users types .../abc
in /user
yea?
Argente Brun
I guess yea?
Southeastern blueberry beeOP
So will i get the abc
in the url
@Southeastern blueberry bee So will i get the abc
Southeastern blueberry beeOP
how will*
Argente Brun
So you got a express server which redirects the user to a next app?
Southeastern blueberry beeOP
mhm
Argente Brun
Ok, I dont want to know why..... But when you request your domain.xyz/abc it goes to you express app and then you are redirected to your next app with "/user"? Am I getting that right?
Southeastern blueberry beeOP
exactly
Argente Brun
and now you want to go from /user to /abc
@Argente Brun and now you want to go from /user to /abc
Southeastern blueberry beeOP
no
so
when it goes from the express to the next app /user
i want to get the url in the bar
Argente Brun
then why redirect to "/user"`?
Southeastern blueberry beeOP
bc thats the file
Argente Brun
aaah
Southeastern blueberry beeOP
rn
like
im in the /user file
but with /abc domain
Argente Brun
and whats inside the /user file?
Southeastern blueberry beeOP
'use client';

export default function Page({ params }: { params: { name: string } }) {
  return <div>Name: {params.name}</div>
}
Argente Brun
can u do a console.log(params); for me above you return?
and send the log
Southeastern blueberry beeOP
alr
{}
js empty
Argente Brun
Oh wait, remove the "use client"
Southeastern blueberry beeOP
ok
still empty
{}
export default function Page({ params }: { params: { name: string } }) {
  console.log(params)
  
  return <div>Name: {params.name}</div>
}


prints 
{}
my url https://customprofiles.xyz/abc
the express 
server.get('/:name', async (req, res) => {
    return app.render(req, res, '/user')
})
Argente Brun
 "use client"

import { useParams, usePathname } from "next/navigation"

export default function Page() {
    const params = useParams()
    const pathname = usePathname()

    console.log({
        params,
        pathname
    });

    return <div>Name: {params.name}</div>
}
Why do you use express infront of your next app?
Southeastern blueberry beeOP
because im linking the website to my discord bot
my url https://customprofiles.xyz/abc
Argente Brun
server.get('/:name', async (req, res) => {
    const queryParams = { name: req.params.name } 
    return app.render(req, res, '/user', queryParams)
})
Southeastern blueberry beeOP
{ params: {}, pathname: '/user' }
nothing changed
Argente Brun
export default function Page({ params }: { params: { name: string } }) {
  console.log(params)
  
  return <div>Name: {params.name}</div>
}
Maybe try this again, else I dont know without seeing the whole project
main.js

const express = require('express');
const next = require('next');
const path = require('path');
const cors = require('cors');

module.exports = {
    async execute(client) {

        const port = 8080;
        const dev = "production";
        const app = next({ dev, dir: '../client' });
        const handle = app.getRequestHandler();

        app.prepare().then(() => {
            
            const server = express();

            server.use(express.static(path.join(__dirname, '../client/public')))
            server.use('/_next', express.static(path.join(__dirname, '../client/.next')))
            server.use(cors())

            server.get('/', async (req, res) => {
                return app.render(req, res, '/')
            })

            server.get('/:name', async (req, res) => {
                const queryParams = { name: req.params.name } 
                return app.render(req, res, '/user', queryParams)
            })

            server.get('*', async (req, res) => {
                handle(req, res)
            })

            server.listen(port, async (err) => {
                if (err) throw err;
                console.log(`Ready on http://localhost:${port}`);
            });

        });

    }
}
do u need to see anything else?
Argente Brun
sleep
Southeastern blueberry beeOP
wdym
Argente Brun
for me its 4am
Southeastern blueberry beeOP
3am for me
you going now?
Argente Brun
....
Southeastern blueberry beeOP
?
Argente Brun
I see the "bug"
Southeastern blueberry beeOP
whats wrong?
wait does it not need to be [user]
in the folder name
Argente Brun
wait
@Southeastern blueberry bee wait does it not need to be [user]
Southeastern blueberry beeOP
didnt fix
Argente Brun
server.get('/:name', async (req, res) => {
const queryParams = { name: req.params.name }
return app.render(req, res, /${req.params.name})
})

and rename your folder from app/user/page.tsx to app/[name]/page.tsx
Southeastern blueberry beeOP
ok 1 sec
Argente Brun
I never users express app.render, dont really know how it works so we have to test
Southeastern blueberry beeOP
..
Argente Brun
?
Southeastern blueberry beeOP
it
worked
thank you
so MUCH
OMG
you can sleep now
and so can i
Argente Brun
you can also remove the "const queryParams = { name: req.params.name } " line
Southeastern blueberry beeOP
thank you so much
tysm
Argente Brun
and btw 
"use client";
import { useSearchParams } from "next/navigation";

export default function SearchBar() {
    const searchParams = useSearchParams();
    const search = searchParams.get("q");

    fetch("/api/test")
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
        });

    return <></>;
}
Dont just put the fetch in there. That will trigger the fetch on every rerender of the page. Put it in a useEffect
have a good night
Southeastern blueberry beeOP
you too
thank youso much