Help with SSR

[slim ledge]

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)

[storm cobalt]

1. you cannot use useEffect in server component
2. you are using useEffect without importing it

[crisp turtle]

i did import and tried still the same

[storm cobalt]

you can't use useEffect in server component

just call connectDB directly

[crisp turtle]

lemme try

[storm cobalt]

home component can be async

[crisp turtle]

hey i think its working

so ik the folder structure plays an important role in next
say i wanna fetch data from db and work on servers should those files be put in some separate folders??

[storm cobalt]

it's up to you. for me, yes I would put it in separate folder

https://nextjs.org/docs/app/building-your-application/routing/colocation

[crisp turtle]

mann this is so confusing

[storm cobalt]

what is confusing?

[crisp turtle]

the serverside things
theres getServerSideProps and getStaticProps, they both do the same job right

[storm cobalt]

there is no getServerSideProps nor getStaticProps in app router

check this course
https://nextjs.org/learn

[crisp turtle]

thanks and whats app router 😭

[storm cobalt]

its app router when you using app folder

[crisp turtle]

ohh so i cant use ssrprops when using that?

[storm cobalt]

getServerSideProps and getStaticProps are for page router which use pages folder

[storm cobalt]

in app router, you don't need getServerSideProps, just fetch inside the component

[crisp turtle]

right does that mean im good using just callback functions??

[storm cobalt]

just execute the function in the component

[crisp turtle]

right

[storm cobalt]

by default, the component is a server component

[crisp turtle]

lets say my main page is a client comp can i declare a function in there as a server??

[storm cobalt]

no

[crisp turtle]

whaaat

[storm cobalt]

it is better to leave the page as server component because metadata api need to be used with server component

[crisp turtle]

uhhh

can i dm?

[storm cobalt]

better not, I have lot of unread dm

[crisp turtle]

im really confused and excited at the same time lol

[storm cobalt]

you should read this
https://nextjs.org/learn

[crisp turtle]

alright

why doesnt it get passed as props??

[storm cobalt]

what is that

man it isn't how nextjs work

[crisp turtle]

T_T

[storm cobalt]

move the fetching inside the Home component

you don't need getProps()

[crisp turtle]

My dumb knowledge just got more dumb 😵

[crisp turtle]

can i use this in src structure?

[storm cobalt]

it only available in page router

npx create-next-app@latest and choose no when it ask do you want to use app router

[crisp turtle]

Aight thanks

I’ll let yk if there anything else

[crisp turtle]

Help with SSR [Solved]

[slim ledge]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1196145641009713202 message)

[vale pond]

please do not delete the question after it has been answered because (1) the answer will look awkward without the context and (2) other people cannot benefit from the answer as well. if your question includes sensitive data, you should edit the question to remove it instead (but you should never reveal any sensitive data in public forums like this one)

[crisp turtle]

okay thanks

Help with SSR

whenever i call the signup route it says 404 not found

[storm cobalt]

it should be /pages/api/signup.js if you are using page router

[crisp turtle]

i switched to app router and some server error

[summer badge]

Can you show how you switched to the App router?

[crisp turtle]

im always getting some kind of error whenever i do server stuffs

[storm cobalt]

import { NextResponse } from "next/server";

[summer badge]

Does it need to be an API route? If you're always going to be calling this API from inside, just make it a server action IMO
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

[crisp turtle]

im not getting any suggestions so its kinda hard

[crisp turtle]

i tried creating an object and saving in db that doesnt work either

[summer badge]

"doesn't work" isn't very helpful to us

[crisp turtle]

500 error code

wait a min

[summer badge]

Also, why is your page.js a client component?

[crisp turtle]

um i was using some hooks earlier so i changed it back then

[summer badge]

That doesn't show the error shown in the console. You're also not helping yourself by not using TypeScript

[crisp turtle]

im not used to ts and i needed to submit this asap inorder to get into the next round T_T

[summer badge]

Are you in a competition or something? Or is this for school or something?

[crisp turtle]

Im in college and this is a task given for me by a company

like inorder for me to get placed or hired i must clear their rounds and tasks

[summer badge]

Either way, I would use server actions instead of creating internal API routes.

Server actions are just functions that run on the server that you can call both from server and client components.

[storm cobalt]

const reqBody = await NextRequest.json()

to

export async function POST(req: NextRequest) {
  const reqBody = await req.json()
}

[storm cobalt]

I don't think you will get hired this time. try again in the next time 😆

[crisp turtle]

T+T why you bully me

[crisp turtle]

isnt this ts and i still cant understand these server functions TwT

[storm cobalt]

NextRequest is a class

[storm cobalt]

take this course and prepare for next time😂

[crisp turtle]

lol dont give up

[storm cobalt]

you need time to learn

[crisp turtle]

express was simple T_T

[storm cobalt]

express is old

use hono 👍🏾

[crisp turtle]

if only i can somehow make this work

[crisp turtle]

oooh thats new

[summer badge]

I don't think Hono or Express are super relevant here. The app router's API routes really give you what you need here. You just need to be willing to read the documentation or the course.

[crisp turtle]

okayy imma try that T_T no job i guess too

[summer badge]

Don't rush into a job just for the sake of getting a job

The task for won't be easier just because you're paid to do it

[crisp turtle]

i mean yyeah but still T_T i can atleast experience a new thing right

[summer badge]

It won't be a very good experience for anyone if you get fired

Assuming it is Next.js you want to learn, take your time to read through https://nextjs.org/learn. There are also a bunch of great video sources that can teach you both the theory and practical parts. Vercel's Lee comes to mind: https://www.youtube.com/@leerob

[crisp turtle]

aight thanks TxT

[crisp turtle]

i found the problem mann
not sure why but i used ts instead of js and voila

[summer badge]

nice

[crisp turtle]

So how can I limit the route.. like I want to allow /login/ok only when username and password are correct