Closed MahmoudAlawdh closed 1 year ago
Yes sir. Will do.
Good afternoon sir,
Can you help me how to make trpc work with next js 13?
i always get this error
as of right now, trpc is not supported for next.js 13
read the documentation, learn the difference between client components and server components. learn about the files, page.tsx layout.tsx loading.tsx ... etc
learn about the fetching and mutation learn how to implement SSR,ISR,CSR ( hint, for these three you will use fetch function with different params) learn about the new react function " use "
i have pushed an updated, this should get you started.
yes sir, thank you.
Good evening sir,
I've finished updating the repo, Can you review my work sir?
looks good, one last thing, can you add pagination to these pages ?
also fix the issue with the prisma-client instances ( hint: https://github.com/MahmoudAlawdh/umbrella-design/blob/7aee31e8b83db57ee1599ab742119d4f56fc3c7d/prisma/connections.ts)
Yes sir
Good evening sir,
Can you help me how to make ssr pagination work? Is this possible sir or can i use pagination with numbers?
Good afternoon sir,
I've finished adding paginations on the pages sir, but im having some issues:
build error:
csr page is not interactive the button doesnt work:
comments,
whats the difference between path these paths ?
no need to use fetch in ssr, because its on the server you can use prisma directly, fetch should be used on csr
always use named exports, link
there is alot of components that is only used in a single place, you can make the project easier to read and maintain
for isr read this, use
export const revalidate = 60; // revalidate this page every 60 seconds
when you are not using fetch
fix these first
Yes sir.
Good afternoon sir,
I've refactored the code, I'm having an issue using the new "use hook", it triggers an infinite fetch so I've used a useEffect as a temporary workaround sir, Can you review my work sir?
/csr/[name] useEffect should be
useEffect(() => {
const fetchFunc = async () => {
const res = await fetch(`/api/getCountry?name=${params.name}`);
setCountry(await res.json());
};
fetchFunc();
}, [params.name]);
let me know if this fixes it
yes sir, thank you. is it okay if i havent used "use hook"?
yes, there is no issues, but i need you to read and learn about it, i think in the next 6 months app folder will be stable and we will move umbrella to it, that's why i need you to get familiar with it.
also try to find resources on how to use trpc/react-query with the app folder
if you find anything interesting send it to me please
Yes sir.
Good evening sir,
I've fixed the csr page to use "use hook". It is the fetchfunc function that creates infinite loop. https://www.youtube.com/watch?v=zwQs4wXr9Bg&t=1237s
update this project to next.js 13 using the app directory. the app directory is the new way to develop websites, its still in beta, i need you to take a look at it and experiment with it.
this is the documentation
this shouldnt take more than 2 days